Facebook ha introdotto da qualche settimana un nuovo social plugin dedicato a quei siti che prevedono una raccolta di dati dagli utenti per, ad esempio, la registrazione al sito o l'iscrizione ad una newsletter. Si chiama Registration Social Plug-in e, in poche parole, permette all'utente collegato a Facebook che visita il vostro modulo di iscrizione di trovare già compilati i campi di registrazione con le sue informazioni personali, direttamente ricavate dal suo profilo Facebook.
La comodità di un simile strumento è evidente: la compilazione del form sarà velocissima, migliorando il tasso di iscrizione e la complessiva "esperienza" del visitatore. Friendfeed, servizio di proprietà di Facebook stessa, ha già incluso questo strumento all'interno del modulo di registrazione ricevendo un incremento del 300% delle registrazioni via Facebook.
Oltre ad essere utile, il plugin è inoltre semplicissimo da includere nel proprio sito e da far interagire con il sistema di registrazione già esistente. È possibile includere caselle di testo proprie di Facebook (nome, cognome, e-mail), aggiungerne di proprie, aggiungere checkbox o liste di opzioni. Si può decidere quali informazioni devono essere recuperate da Facebook o quali devono essere invece compilate direttamente dall'utente.
Il modulo di registrazione, che viene, anche se non del tutto, tradotto nella lingua dell'utente che lo visualizza, si presenta nella forma più semplice così:
Figura 1: Il modulo di registrazione vuoto
Così invece quando viene visualizzato da un utente che ha già eseguito il login su Facebook:
Figura 2: Il modulo di registrazione pre-compilato
Una volta fatto clic sul pulsante Registrati i dati vengono inviati, in formato Json codificato, da Facebook ad una pagina del proprio sito da indicare nelle opzioni del codice. Trasformarli in semplici elementi da includerli in un database, visualizzarli o manipolarli è cosa semplicissima.
Nelle prossime pagine vedremo come includere nel proprio sito il plug-in, come personalizzarlo e come farlo interagire con un sistema di registrazione. Prima però, lo vedremo nella prossima pagina, è necessario creare un'applicazione Facebook.
Creazione dell'applicazione Facebook
Il Registration plug-in può essere incluso nella propria pagina Web in formato iFrame o in formato XFBML. In entrambi i casi è necessario comunque creare un'applicazione all'interno del social network per abilitare l'integrazione. Creare un'applicazione è semplice.
Andate sulla pagina dell'applicazione Sviluppatore di Facebook, consentitele l'accesso con il pulsante Consenti (se non lo avete già fatto in precedenza) e create una nuova applicazione facendo clic sul pulsante Crea una nuova applicazione in alto a destra. Indicate un nome per l'applicazione e, nella pagina successiva, fate clic sulla voce Sito Web nel menu di sinistra indicando nel campo URL del sito l'indirizzo della homepage del vostro sito e nel campo Dominio del sito il dominio su cui si desidera attivare l'applicazione.
Per HTML.it le impostazioni sono quelle che vedete nella figura sotto. Come Dominio del sito abbiamo impostato html.it e non www.html.it perché la nostra applicazione dovrà essere attiva non solo nelle pagine sotto il dominio www.html.it, ma anche nei sotto-domini (come linux.html.it, php.html.it e così via).
Figura 3: Le impostazione di connessione dell'applicazione Facebook
(clic per ingrandire)
Segniamoci adesso l'Id della nostra applicazione che ci servirà quando andremo a includere il plug-in. Lo si trova in alto, sempre nella schermata in figura 3: il dato si chiama ID applicazione (figura 4).
Figura 4: L'Id della nostra applicazione di test
Integrazione del plugin in una pagina Web
Per includere il modulo di registrazione all'interno del proprio sito si può utilizzare un'Iframe o del codice XFBML. Il primo è più semplice da implementare - basta incollare un semplice tag HTML -, mentre il secondo richiede un po' di codice in più ma è più flessibile e ha il vantaggio di adattarsi dinamicamente alle dimensioni del box all'interno della pagina.
Versione Iframe
Il tag HTML da includere per un modulo di registrazione di base è il seguente:
<iframe src="http://www.facebook.com/plugins/registration.php?
client_id=ID_APPLICAZIONE&
redirect_uri=http%3A%2F%2Fwww.html.it%2F&
fields=name,email"
scrolling="auto"
frameborder="no"
style="border:none"
allowTransparency="true"
width="500"
height="330">
</iframe>
Al rigo 2 (evidenziato) la voce ID_APPLICAZIONE andrà sostituita con l'id applicazione ottenuto con la procedura descritta a pagina 2 di questo articolo.
Questo codice creerà un box di 500 pixel di larghezza (rigo 9) e 330 pixel di altezza (rigo 10) in cui saranno incluse le caselle per indicare nome ed e-mail (rigo 4). L'attributo redirect_uri (rigo 3) indica l'indirizzo della pagina Web cui sarà inviato l'utente una volta fatto clic sul pulsante Registrati. Quella pagina dovrebbe contenere le istruzioni, in PHP ad esempio, necessaria a processare i dati ricevuti: per includerli in un database o semplicemente per visualizzarli. L'URL indicata in quel campo, come si nota dal codice di esempio, deve essere "encodata", cosa che si può fare facilmente online. Nella quarta pagina di questo articolo vedremo come personalizzare questi campi.
Versione XFBML
Per poter usare la versione XFBML è necessario per prima cosa includere il Facebook Javascript SDK all'interno della pagina in cui si desidera ospitare il plugin: basta includere il seguente codice Javascript:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'ID_APPLICAZIONE', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/it_IT/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Al rigo 4 (evidenziato) la voce ID_APPLICAZIONE andrà naturalmente sostituita con l'id ottenuto con la procedura descritta a pagina 2.
Il codice mostrato sopra va incluso in tutte le pagine su cui si vuole far uso di codice XFBML. Poiché il codice è asincrono, lo si può includere anche subito dopo il tag <body> senza che interrompa, durante il caricamento, la visualizzazione della pagina.
Un'ultima aggiunta prima di poter usare codice XFBML va fatta all'elemento <html>, l'elemento che apre, dopo il doctype, il documento HTML. Per far sì che i browser riconoscano i tag XFBML, all'elemento va aggiunto questo attributo
xmlns:fb="http://www.facebook.com/2008/fbml"
In modo che diventi una cosa del genere:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Integrare il registration plugin diventa a questo punto un gioco da ragazzi:
<fb:registration fields="name,email" redirect-uri="https://www.html.it/" width="500"> </fb:registration>
Le opzioni sono molto simili a quelle indicate nel codice Iframe. Da notare che, rispetto alla versione Iframe, l'indirizzo della pagina indicata all'attributo redirect-uri non va encodata e non viene indicata l'altezza del box poiché viene adattata dinamicamente alla pagina in base alla disposizione degli altri elementi.
Personalizzazione del plugin
La personalizzazione del plugin consiste, in pratica, nella scelta del tipo e del nome dei campi di registrazione, modificabili attraverso l'attributo fields del codice di inclusione. Ne esistono di due tipi: quelli preimpostati (Named Fields) e quelli personalizzati (Custom Fields). I primi sono quelli i cui dati sono tipicamente conservati sul social network e non possono essere modificati né nel
testo che visualizzano né nella forma, i secondi possono visualizzare voci e tipologie di campi del tutto personalizzate.
Named fields
Per aggiungere un named field basta aggiungere una delle parole-chiave previste da Facebook al campo fields (rigo 4) del codice, così per la versione iFrame:
<iframe src="http://www.facebook.com/plugins/registration.php?
client_id=ID_APPLICAZIONE&
redirect_uri=http%3A%2F%2Fwww.html.it%2F&
fields=name,email,birthday,gender,location"
scrolling="auto"
frameborder="no"
style="border:none"
allowTransparency="true"
width="500"
height="330">
</iframe>
Così per la versione XFBML (rigo 2):
<fb:registration fields="name,email,birthday,gender,location" redirect-uri="https://www.html.it/" width="500"> </fb:registration>
In questo modo si includeranno i campi per impostare nome, email, giorno di nascita, sesso e luogo. I campi saranno visualizzati nello stesso ordine in cui vengono indicati e il campo name deve essere sempre incluso nella prima posizione.
Questo è l'elenco dei named field disponibili:
- name: nome e cognome
- birthday: data di nascita nel formato mm/dd/yyyy
- email: l'indirizzo e-mail
- gender: sesso
- location: città in cui si trova l'utente
- password: una password da scegliere (non la password di Facebook)
- captcha: il sistema per evitare false registrazioni
- first_name: nome
- last_name: cognome
Custom fields
Se si intende includere nel modulo dei campi personalizzabili è necessario usare un'altra sintassi. L'attributo fields deve essere riempito da una lista di elementi (array Json di oggetti) suddivisi da parentesi graffe. I valori, con i relativi attributi, sono i seguenti:
{
'name':'accetto',
'description':'Accetto i termini del servizio',
'view':'not_prefilled',
'type':'checkbox'
}Name è il nome del campo (univoco per ogni modulo); description contiene il testo che sarà visualizzata accanto, o sopra, al campo; type è il tipo di campo da mostrare (vedi più avanti i vari tipi); view indica se il campo debba essere o no "riempito" con i valori recuperati dal profilo Facebook dell'utente (laddove possibile).
Questa sintassi deve essere usata anche per mescolare assieme named field e custom field. Nel caso si volesse includere un named field sarà dunque sufficiente impostare l'attributo del valore name ad uno dei campi named indicati sopra. Per aggiungere un campo per il nome si dovrà aggiungere{ 'name':'name' }, per aggiungere un campo per l'e-mail si dovrà aggiungere { 'name':'email' } e così via. Ad esempio, ecco un modulo che mostra il nome, l'e-mail e un campo personalizzato:
<fb:registration
fields="[{'name':'name'},{'name':'email'},{'name':'nick','description':'Il tuo nickname','type':'text'}]"
width="500">
</fb:registration>
Che verrà mostrato così:
Oltre a questi quattro valori, ve ne sono altri tre disponibili solo per alcuni tipi di campo. Li vedremo nella pagina successiva.
I vari tipi di custom fields
Il valore più importante è il valore type che definisce la tipologia del campo del modulo. Vediamo dunque come viene reso ogni singolo campo personalizzabile assieme ai suoi parametri opzionali. Faremo riferimento, in questi esempi, alla versione XFBML del codice, adattabile facilmente alla versione iFrame.
Vi ricordiamo che il primo campo ({'name':'name'}) è
obbligatorio e va incluso sempre in prima posizione e che l'attributo del valore
redirect-uri (per semplicitià qui impostato su www.html.it) deve
essere impostato sulla pagina su cui verrà rindirizzato l'utente dopo il clic
sul pulsante Registrati. Nelle pagine finali di questo articolo vedremo
esempi pratici di come progettare questa pagina.
Type: Text
L'istruzione di tipo text mostra una semplice casella di testo a scrittura libera. Non prevede nessuna opzione supplementare.
<fb:registration
fields="[{'name':'name'},{'name':'nick','description':'Il tuo nickname','type':'text'}]"
redirect-uri="https://www.html.it/"
width="500">
</fb:registration>
Il campo viene mostrato così:
Type: Date
L'istruzione di tipo date mostra tre menu dai quali selezionare giorno, mese e anno. Anche questa non prevede opzioni supplementari.
<fb:registration
fields="[{'name':'name'},{'name':'data','description':'La tua data preferita','type':'date'}]"
redirect-uri="https://www.html.it/"
width="500">
</fb:registration>
Il campo viene mostrato così:
Type: Select
L'istruzione di tipo select mostra un menu a tendina con un elenco di opzioni. Le opzioni devono essere impostate con l'istruzione 'options':{'A':'Juventus','B':'Milan','C':'Inter'}.
<fb:registration
fields="[{'name':'name'},{'name':'data','description':'La tua squadra del cuore','type':'select','options':{'A':'Juventus','B':'Milan','C':'Inter'}}]"
redirect-uri="https://www.html.it/"
width="500">
</fb:registration>
Il campo viene mostrato così:
Type: Checkbox
Mostra un checkbox da spuntare. Attraverso l'istruzione opzionale 'default':'checked' è possibile impostare il segno di spunta in via predefinita.
<fb:registration
fields="[{'name':'name'},{'name':'servizio','description':'Accetto le regole del servizio','type':'checkbox','default':'checked'}]"
redirect-uri="https://www.html.it/"
width="500">
</fb:registration>
Il campo viene mostrato così:
Type: Typeahead
Si tratta di una casella di testo che viene riempita, durante la digitazione delle parole, con voci strutturate recuperate da una o più categorie incluse nel database di Facebook. Le categorie - tipo film, ristoranti, sport - sono elencate nel sito ogp.me. Nell'esempio qui sotto gli elementi saranno estratti dalle categorie degli attori, degli autori e dei cantanti. La categorie devono essere impostate con l'istruzione 'categories':['actor','author','musician'].
<fb:registration
fields="[{'name':'name'},{'name':'artista','description':'Il tuo artista preferito','type':'typeahead','categories':['actor','author','musician']}]"
redirect-uri="https://www.html.it/"
width="500">
</fb:registration>
Il campo viene mostrato così (provate a scrivere nel campo il nome di un attore o di un cantante):
Gestire i dati di registrazione
Una volta che, dopo aver riempito correttamente i campi, l'utente fa clic sul pulsante Registrati, i dati da lui compilati vengono inviati a Facebook che provvede a restituirli in formato Json alla pagina indicata dalla voce redirect-uri. In mancanza di questa indicazione, i dati saranno inviati alla pagina stessa in cui risiede il modulo.
Sia nell'uno sia nell'altro caso, alla pagina di rindirizzamento dovrà essere presente uno script in grado di leggere i dati inviati indietro da Facebook. Qui sotto proponiamo tre diversi esempi di pagina che potrebbero essere adattate alle vostre esigenze. Gli esempi sono versioni da noi modificate dello script proposto da Facebook nella sua documentazione ufficiale. Per poter essere utilizzati devono essere processati da un server con PHP 5.
Le uniche cose da personalizzare sono le istruzioni define presenti al rigo 2 e 3: nella prima va incluso il numero corrispondente al Facebook Secret, nella seconda l'ID applicazione. Sono due valori che si trovano alla stessa pagina in cui è presente l'ID applicazione, così come lo abbiamo descritto alla pagina x di questo articolo.
Esempio 1: dati formattati
In questo primo esempio vedremo come i dati di registrazione possono essere recuperati attraverso PHP e visualizzati successivamente all'interno di una pagina Web. È possibile partire dal codice suggerito per scrivere uno script che, al posto di visualizzare i dati, li invii ad un database.
<?php
//Sostituire alle XXXXXXXXXXXX i dati della propria applicazione
define('FACEBOOK_SECRET', 'XXXXXXXXXXXX', true);
define('FACEBOOK_ID', 'XXXXXXXXXXXX', true);
function parse_signed_request($signed_request, $secret) {
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decodifico i dati
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
error_log('Algoritmo sconosciuto. Ci aspettiamo HMAC-SHA256');
return null;
}
// verifico la firma digitale
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log('Firma digitale non corretta!');
return null;
}
return $data;
}
function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>
Registration plug-in
</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body style="font-family:verdana;">
<div style="width: 600px;margin-left:auto;margin-right: auto;">
<?php if (isset($_REQUEST['signed_request'])) {
$response = parse_signed_request($_REQUEST['signed_request'], FACEBOOK_SECRET); ?>
<h2>
Registration plug-in
</h2>
<p>
<em>Questi sono i dati che sono stati indicati nel modulo di registrazione</em>
</p>
<p>
Nome e cognome: <?=$response["registration"]["name"];?>
</p>
<p>
Email: <?=$response["registration"]["email"];?>
</p>
<p>
Nome: <?=$response["registration"]["first_name"];?>
</p>
<p>
Cognome: <?=$response["registration"]["last_name"];?>
</p>
<p>
Sesso: <?php if ($response["registration"]["gender"] == 'male') echo 'Uomo'; if ($response["registration"]["gender"] == 'female') echo 'Donna' ?>
</p>
<p>
Mese di nascita: <?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '2', $response["registration"]["birthday"]);?>
</p>
<p>
Giorno di nascita: <?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '1', $response["registration"]["birthday"]);?>
</p>
<p>
Anno di nascita: <?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '34', $response["registration"]["birthday"]);?>
</p>
</div>
<?php //Se non sono presenti i dati visualizzo il modulo di registrazione di FB
} else { ?>
<h2>Registration plug-in</h2>
<fb:registration
fields="name,email,first_name,last_name,gender,birthday"
width="450">
</fb:registration>
</div>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit=function(){FB.init({appId:"<?=facebook_id?>",status:true,cookie:true,xfbml:true})};(function(){var a=document.createElement("script");a.async=true;a.src=document.location.protocol+"//connect.facebook.net/it_IT/all.js";document.getElementById("fb-root").appendChild(a)})();
</script>
<?php } ?>
</body>
</html>
Esempio 2: riempimento di un form
Nel caso si volessero utilizzare i dati conservati su Facebook solo per pre-compilare un form già presente sul proprio sito, si può usare questo secondo esempio. In questo caso, alla pressione del pulsante Registrati, i dati ricavati da Facebook vengono inviati ai campi di un modulo tradizionale.
<?php
//Sostituire alle XXXXXXXXXXXX i dati della propria applicazione
define('FACEBOOK_SECRET', 'XXXXXXXXXXXX', true);
define('FACEBOOK_ID', 'XXXXXXXXXXXX', true);
function parse_signed_request($signed_request, $secret) {
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decodifico i dati
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
error_log('Algoritmo sconosciuto. Ci aspettiamo HMAC-SHA256');
return null;
}
// verifico la firma digitale
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log('Firma digitale non corretta!');
return null;
}
return $data;
}
function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Registration plug-in</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="font-family:verdana;">
<div style="width: 600px;margin-left:auto;margin-right: auto;">
<?php if (isset($_REQUEST['signed_request'])) {
$response = parse_signed_request($_REQUEST['signed_request'], FACEBOOK_SECRET); ?>
<h2>Registration plug-in</h2>
<div id="container">
<p>
<em>Questi sono i dati che sono stati indicati nel modulo di registrazione</em>
</p>
<form action="" method="post">
<fieldset>
<legend>Informazioni personali</legend>
<dl>
<dt><span style="font-weight: bold; font-size: 11px; color: #666666"></span><label for="email">Nome:</label></dt>
<dd><input type="text" name="nome" id="nome" size="32" maxlength="128" value="<?=$response["registration"]["first_name"];?>"/></dd>
</dl>
<dl>
<dt><span style="font-weight: bold; font-size: 11px; color: #666666"></span><label for="email">Cognome:</label></dt>
<dd><input type="text" name="cognome" id="cognome" size="32" maxlength="128" value="<?=$response["registration"]["last_name"];?>" /></dd>
</dl>
<dl>
<dt><span style="font-weight: bold; font-size: 11px; color: #666666"></span><label for="email">Indirizzo e-mail:</label></dt>
<dd><input type="text" name="email" id="email" size="32" maxlength="128" value="<?=$response["registration"]["email"];?>" /></dd>
</dl>
<dl>
<dt><label for="gender">Sesso:</label></dt>
<dd>
<select size="1" name="gender" id="gender">
<option value="Uomo" <?php if ($response["registration"]["gender"] == 'male') echo 'selected="selected"'; ?>>Uomo</option>
<option value="Donna" <?php if ($response["registration"]["gender"] == 'female') echo 'selected="selected"'; ?>>Donna</option>
</select>
</dd>
</dl>
<dl>
<dt><label for="date">Data di nascita:</label></dt>
<dd>
<select size="1" name="dobDay" id="dobDay">
<option value="<?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '2', $response["registration"]["birthday"]);?>"><?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '2', $response["registration"]["birthday"]);?></option>
</select>
<select size="1" name="dobMonth" id="dobMonth">
<option value="<?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '1', $response["registration"]["birthday"]);?>"><?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '1', $response["registration"]["birthday"]);?></option>
</select>
<select size="1" name="dobYear" id="dobYear">
<option value="<?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '3', $response["registration"]["birthday"]);?>"><?=preg_replace('/(d{1,2})/(d{1,2})/(19|20)(d{2})/', '34', $response["registration"]["birthday"]);?></option>
</select>
</dd>
</dl>
</fieldset>
<fieldset class="action">
<input type="submit" name="submit" id="submit" value="Invia" />
</fieldset>
</form>
</div>
<?php //Se non sono presenti i dati visualizzo il modulo di registrazione di FB
} else { ?>
<h2>Registration plug-in</h2>
<fb:registration
fields="name,email,first_name,last_name,gender,birthday"
width="450">
</fb:registration>
</div>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit=function(){FB.init({appId:"<?=facebook_id?>",status:true,cookie:true,xfbml:true})};(function(){var a=document.createElement("script");a.async=true;a.src=document.location.protocol+"//connect.facebook.net/it_IT/all.js";document.getElementById("fb-root").appendChild(a)})();
</script>
<?php } ?>
</body>
</html>
Esempio 3: dati grezzi
Questo script fa un unica cosa: mostra i dati grezzi che vengono restituiti da Facebook alla pressione del pulsante Registrati. È un ottimo metodo per esaminare la risposta del social network e visualizzare i dati che invia.
<?php
//Sostituire alle XXXXXXXXXXXX i dati della propria applicazione
define('FACEBOOK_SECRET', 'XXXXXXXXXXXX', true);
define('FACEBOOK_ID', 'XXXXXXXXXXXX', true);
function parse_signed_request($signed_request, $secret) {
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decodifico i dati
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
error_log('Algoritmo sconosciuto. Ci aspettiamo HMAC-SHA256');
return null;
}
// verifico la firma digitale
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log('Firma digitale non corretta!');
return null;
}
return $data;
}
function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Registration plug-in</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<?php if (isset($_REQUEST['signed_request'])) {
$response = parse_signed_request($_REQUEST['signed_request'], FACEBOOK_SECRET);
echo '<p>I contenuti della richiesta sono:</p>';
$response = parse_signed_request($_REQUEST['signed_request'],
FACEBOOK_SECRET);
echo '<pre>';
print_r($response);
echo '</pre>';
//Se non sono presenti i dati visualizzo il modulo di registrazione di FB
} else { ?>
<h2>Registration plug-in</h2>
<fb:registration
fields="name,email,first_name,last_name,gender,birthday"
width="450">
</fb:registration>
</div>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit=function(){FB.init({appId:"<?=facebook_id?>",status:true,cookie:true,xfbml:true})};(function(){var a=document.createElement("script");a.async=true;a.src=document.location.protocol+"//connect.facebook.net/it_IT/all.js";document.getElementById("fb-root").appendChild(a)})();
</script>
<?php } ?>
</body>
</html>
