16
Dez
2010
admin

Das Facebook Registration Tool

Wie bereits angekündigt, hat Facebook ein neues Soziales Plugin veröffentlicht. Das Plugin Registration Tool ist ein Registrierungs-Formular, welches auf einer Webseite eingebunden werden kann, um die Registrierung für Facebook Benutzer zu vereinfachen, bzw. den bisherigen Registrierungs-Prozess komplett zu ersetzen. Der Mehrwert des Registration Tools liegt unter anderem darin, dass man Felder bereits mit den auf Facebook hinterlegten Daten vor ausfüllen kann und so dem Nutzer die Arbeit abnimmt.

Hinweis
Wenn Du das Tool vorab in Aktion sehen willst, kannst Du dir diese Demo ansehen. Durch das Registrieren bei dieser Demo werden KEINE Daten von Dir gespeichert. Sie werden Dir lediglich als Array ausgegeben. Dieses Beispiel befindet sich ebenfalls im Repository, aus dem Du Dir die Codebeispiele auschecken kannst.

Man kann das Registration Tool als IFrame oder als XFBML Tag einbinden. Sehen wir uns zunächst die IFrame Variante an:

<iframe src="http://www.facebook.com/plugins/registration.php?
             client_id=111425885597866&
             redirect_uri=http://user-registration.abouttheweb.de/"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="500">
</iframe>

Rufen wir diesen IFrame auf, erhalten wir das folgende Formular:

Alternativ kannst die dir dieses Beispiel hier live ansehen.

Das Wichtigste ist hier das src Attribut. Als URL tragen wir hier immer folgendes ein:

http://www.facebook.com/plugins/registration.php

An diese URL können wir nun weitere Parameter anhängen.

Parameter Beschreibung
client_id Die ID der Facebook Anwendung, die mit diesem Registration Tool verknüpft ist.
redirect_uri Die URL, die den Request verarbeiten soll.
fields Kommaseparierte Liste von Feldern, die abgefragt werden sollen. Alternativ ein JSON String, um auch Felder abfragen zu können, die bei Facebook nicht hinterlegt sind.
fb_only (boolean) Wenn dieser Wert true ist, kann man sich nur registrieren, wenn man die Registrierung mit einem Facebook Account verbindet. Nutzer, die das nicht wollen, oder keinen Facebook Account besitzen, können sich nicht registrieren. Standardmäßig ist dieser Wert auf false.
width Die Breite des IFrames in Pixeln.

Hier eine Liste der Felder die wir abfragen können und bereits von Facebook vor ausfüllen lassen können (soweit der Benutzer die Daten in seinem Profil hinterlegt hat):

Feld Beschreibung
name Voller Name des Benutzers.
birthday Das Geburtsdatum im Format dd/mm/yyyy.
email Die Email Adresse des Benutzers. Bei einer Verknüpfung mit dem Facebook Account, ist dies eine validierte Adresse.
gender Geschlecht.
location Name und ID des derzeitigen Wohnortes.
password Ein Passwort Feld (nicht das auf Facebook hinterlegte Passwort).
captcha Ein Captcha.
first_name Vorname des Benutzers.
last_name Nachname des Benutzers.

Diese Felder können wir der URL nun im src Attribut nun als kommaseparierte Liste anhängen. Die Felder werden in der Reihenfolge im Formular angezeigt, in der wir sie im fields Parameter angeben. Die einzige Vorgabe ist, dass das name Feld immer als erstes stehen muss:

<iframe src="http://www.facebook.com/plugins/registration.php?
             client_id=111425885597866&
             redirect_uri=http://user-registration.abouttheweb.de/&
             fields=name,first_name,last_name,birthday,email,gender,location,password,captcha"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="700">
</iframe>

Das Formular sieht nun wie folgt aus:

Alternativ kannst die dir dieses Beispiel hier live ansehen.

Zusätzlich haben wir die Möglichkeit das Registrierungs-Formular mit eigenen Feldern zu erweitern. Dafür übergeben wir dem fields Parameter einen JSON String, in dem wir die Felder definieren, als Wert.

$json = '[
 {"name":"name"},
 {"name":"email"},
 {"name":"location"},
 {"name":"gender"},
 {"name":"birthday"},
 {"name":"password",   "view":"not_prefilled"},
 {"name":"like",       "description":"Gefällt Dir dieses Plugin?",        "type":"checkbox",  "default":"checked"},
 {"name":"phone",      "description":"Telefonnummer",                     "type":"text"},
 {"name":"anniversary","description":"Jahrestag",                         "type":"date"},
 {"name":"useplugin",  "description":"Wirst Du dieses Plugin einsetzen?", "type":"select",    "options":{"ja":"Ja","nein":"Nein"}, "default":"ja"},
 {"name":"movie",      "description":"Lieblingsfilm",                     "type":"typeahead", "categories":["movie","book"]},
 {"name":"captcha"}
]
';
<iframe src='http://www.facebook.com/plugins/registration.php?
             client_id=111425885597866&
             redirect_uri=http://user-registration.abouttheweb.de/&
             fields=<?= $json ?>'
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="700">
</iframe>

Das Formular:

Alternativ kannst die dir dieses Beispiel hier live ansehen.

Wie man sieht, haben die Facebook eigenen Felder nur den name Wert. Alle eigenen Felder bestehen aus folgenden Werten:

Feld Beschreibung
name Der Name des HTML <input> Elements.
description Das Label, bzw. der Text, der dem Benutzer angezeigt wird.
type Der Feld Typ. Unterstützt werden text, date, select, checkbox und typeahead.
view Gibt an, wem dieses Feld angezeigt wird. Unterstützt werden die Werte prefilled und not_prefilled. Felder mit dem Wert prefilled sind für Benutzer sichtbar, die sich mit ihrem Facebook Account anmelden. Felder mit dem Wert not_prefilled gelten nur für Benutzer, die sich ohne Facebook Account anmelden. Das ist sinnvoll, wenn z.B. das Passwort Feld nur für Benutzer sichtbar sein soll, die sich ohne Facebook Account anmelden.

Einige Attribute werden nur von bestimmten Feldern unterstützt.

Feld Beschreibung
options Für type:select. Ein Key/Value Paar, bzw. der Wert der mit dem Request übertragen wird (key)) und der Wert, der dem Benutzer angezeigt wird (value).
categories Für type:typeahead. Ein Array von Open Graph Protokol Typen.
default Für type:select und type:checkbox. Legt den Standardwert fest.

Haben wir nun unser Formular ausgefüllt und abgeschickt, erhalten wir als Antwort einen sogenannten signed_request. Der signed_request sieht zunächst recht kryptisch aus. Er enthält aber alle Formulardaten und stellt gleichzeitig sicher, dass die Daten auch wirklich von Facebook gesendet wurden, da dieser Request sozusagen mit dem Anwendungs Geheimnis signiert ist. Den Request kann man sich folgendermaßen ausgeben:

var_dump($_REQUEST)

Der dekodierte signed_request ist ein JSON Objekt, welches alle relevanten Daten enthält. Um ein Array zu erhalten, das wir anschließend weiterverarbeiten können, benutzen wir folgende Funktion:

define('FACEBOOK_APP_ID', '140311802689086');
define('FACEBOOK_SECRET', '5beff86f67ef26fdebed3b4e7be886b7');

function parse_signed_request($signed_request, $secret) {
  list($encoded_sig, $payload) = explode('.', $signed_request, 2);

  // decode the data
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);

  if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
    error_log('Unknown algorithm. Expected HMAC-SHA256');
    return null;
  }

  // check sig
  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log('Bad Signed JSON signature!');
    return null;
  }

  return $data;
}

function base64_url_decode($input) {
    return base64_decode(strtr($input, '-_', '+/'));
}

if ($_REQUEST) {
  print '<p>signed_request contents:</p>';
  $response = parse_signed_request($_REQUEST['signed_request'], FACEBOOK_SECRET);
  print '<pre>';
  print_r($response);
  print '</pre>';
} else {
  print '$_REQUEST is empty';
}

Als Ausgabe erhalten wir ein Array mit unseren Daten. Hier ein Auszug:

Zum Schluss sei noch erwähnt, wie das Registration Tool mit XFBML und der JavaScript SDK eingebunden werden kann:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/de_DE/all.js#appId=140311802689086&xfbml=1"></script>

<fb:registration
  fields="name,birthday,gender,location,email"
  redirect-uri="http://user-registration.abouttheweb.de/"
  width=560>
</fb:registration>
Hinweis
Du kannst alle Codebeispiele von AboutTheWeb über ein SVN Repository auschecken. Dieses Beispiel findest du unter folgender Adresse:
http://svn.abouttheweb.de/atwtutorials/trunk/user-registration/

Alternativ kannst Du alle Codebeispiele über das AboutTheWeb github Repository auschecken.

Trackback-URL für diesen Beitrag

http://www.abouttheweb.de/trackback/619

Ähnliche Artikel

Bild des Benutzers Frank
Frank
Di, 07/12/2011 - 07:31

Danke für dies wirklich gute Anleitung!!!

X
Laden