Da tempo ormai i social network sono entrati prepotentemente nella nostra vita, sia sociale che lavorativa.
Prima o poi ogni sviluppatore ha avuto a che fare con la richiesta “Puoi fare in modo che gli utenti si registrino con Facebook?”
Alzi la mano a chi non è mai capitato!
Integrare servizi come quello di Facebook non è sempre facile, sopratutto se non si gioca d’anticipo. Se il cliente ti ha chiesto Facebook, quanto credi ci metta a chiederti anche Twitter, Google e così via?
Quasi sicuramente ti farà questa richiesta, e starà a te, bravo sviluppatore, astrarre il più possibile la logica di accesso per andare incontro a tutte le esigenze!
Per fortuna dalla versione 5.0 di Laravel tutto questo lavoraccio viene fornito da un first-party package che prende il nome di Socialite.
Questo package sviluppato da Taylor Otwell fornisce delle API semplici e concise che ti permtteranno di integrare nel giro di pochi minuti tutti i servizi ( provider ) di login sopra citati.
Nello specifico Socialite permette di integrare:
- GitHub
- Bitbucket
In questo tutorial ti mostrerò come integrare Facebook per realizzare in pochi minuti un sistema di login e di registrazione.
Creazione di un’Applicazione Facebook
Prima di poter implementare il login/registrazione con Facebook è necessario creare una applicazione sul portale developer di Facebook.
Visita quindi il portale Facebook Developers: se è la prima volta che lo visiti ti verrà richiesto di inserire un numero di cellulare in modo da attivare il tuo account developer.
Una volta verificato il tuo account clicca sull voce My Apps e successivamente su Add a New App.
Ti verranno presentate diverse tipologie di applicazione: visto che quella che dobbiamo realizzare sarà un’applicazione web clicca su Sito Web e nella nuova scermata scegli il nome che vuoi dare alla tua app e la categoria di riferimento.
Ti consiglio di utilizzare lo stesso nome del sito che stai realizzando in modo da poterla riconoscere a colpo d’occhio.
Inserisci nella schermata successiva il link al tuo sito ( è valido anche un url locale ) e siamo pronti a scrivere un po’ di codice.
Installare Socialite
Socialite, nonostante sia un package sviluppato dal team di Laravel, non è incluso di default ma è disponibile come pacchetto separato. Vediamo come installarlo.
Per prima cosa modifica il tuo composer.json e nella sezione required aggiungi:
“laravel/socialite”: “~2.0”
Aggiorna quindi le dipendenze con:
composer update
e, finita l’installazione, non ti resta che modificare il file config/app.php e aggiungere nell’array $providers
LaravelSocialiteSocialiteServiceProvider
mentre, nell’array $aliases
‘Socialize’ => ‘LaravelSocialiteFacadesSocialite’,
Nota bene: Anche se il pacchetto si chiama Socialite verrà utilizzata la facade Socialize
Preparare il File di Configurazione
Laravel include un file di configurazione utilizzabile per l’integrazione dei servizi esterni come ad esempio MailChimp.
Essendo Facebook un servizio esterno dovrà essere inserito all’interno di questo file, modifica quindi il file config/services.php e aggiungi:
‘facebook’ => [
‘client_id’ => ”,
‘client_secret’ => ”,
‘redirect’ => ”,
],
Questi saranno i campi necessari per fare in modo che Socialite possa comunicare con Facebook.
Nota bene: i campi sono gli stessi anche per gli altri servizi, questo proprio grazie all’ottimo lavoro di astrazione che c’è dietro a Socialite.
I dati li puoi recuperare all’interno dell’applicazione Facebook creata all’inizio di questo tutorial.
Per trovare i dati ti basterà cliccare sulla voce My Apps e successivamente sul nome dell’applicazione che hai creato.
Copia quindi i valori di APP ID e APP SECRET inserendoli nei ripettivi campi.
Dovrai anche impostare l’url di ritorno di Facebook ma fai attenzione perchè questo campo è abbastanza confusionario per chi è alla prima implementazione.
Infatti, non dovrai impostare l’url al quale l’utente verrà indirizzato dopo aver autorizzato la nostra app ad accedere al suo account ma un url al quale Facebook dovrà mandare il risultato del login e nel quale tu dovrai scrivere la logica di elaborazione con i dati.
Per questa applicazione supponiamo di avere questo url per l’elaborazione:
http://provalogin.app/auth/provider/response/facebook
Ho utilizzato un url il più descrittivo possibile in modo da ricerdarmi che quel campo non è la risposta al login ma la risposta di Facebook.
Per impostare questo url clicca su Settings e poi su Advanced, il campo da compilare è Valid OAuth redirect URIs.
Il tuo array di configurazione dovrà quindi essere simile a questo:
‘facebook’ => [
‘client_id’ => ‘123456789’,
‘client_secret’ => ‘abcdefghi’,
‘redirect’ => ‘http://provalogin.app/auth/provider/response/facebook’,
],
In questo modo Facebook saprà dove inviare il token di sicurezza che rappresenta l’utente che ha appena acconsentito a condividere con la nostra applicazione i suoi dati pubblici.
Questo token non contiene ovviamente la password dell’utente ma è un “ponte” che ci permette di accedere a determinati dati prelevandoli direttamente da Facebook.
Proviamo a spiegarlo in modo semplice:
- L’utente accede al nostro sito e ci informa che vuole fare il login con Facebook.
- Il nostro sito raccoglie la richiesta e rimanda l’utente al sito di Facebook.
- Facebook mostrerà all’utente una pagina dove chiederà se l’utente è sicuro di voler concedere al nostro sito l’accesso a determinate informazioni.
- L’utente accetta.
- Facebook manda al nostro sito il token di autorizzazione e le informazioni pubbliche richieste.
- Il nostro sito conferma all’utente che la connessione con Facebook è stata eseguita correttamente.
Preparazione Database
Per poter integrare il login/registrazione alla nostra applicazione web dobbiamo aggiungere una colonna alla tabella users in modo da salvare il token restituito da Facebook.
Salvare il token non è necessario ma ci potrebbe tornare utile nel caso un domani volessimo richiedere a Facebook altri dati del nostro utente, magari recuperare l’elenco dei suoi amici e così via ( sempre nei limiti delle autorizzazioni richieste ).
Crea quindi una nuova migration:
php artisan make:migration add_provider_token_column –table=users
e aggiungi una nuova colonna provider_token inserendo questo codice nel metodo up:
Schema::table(‘users’, function(Blueprint $table)
{
$table->string(‘provider_token’)->unique();
});
e questo nel metodo down:
Schema::table(‘users’, function(Blueprint $table)
{
$table->dropColumn(‘provider_token’);
});
Adesso esegui la migration per rendere effettive le modifiche:
php artisan migrate
Impostazione delle Route
Per questo nostro esempio lavoreremo in modo molto basilare: supponiamo che non ci sia nessun form di registrazione ma che sia possibile solo autenticarsi tramite Facebook.
Ecco le route di cui avremo bisogno.
Route::get(‘auth/provider/{provider}’, [‘uses’ => ‘SocialController@redirectProvider’]);
Route::get(‘auth/provider/response/{provider}’, [‘uses’ => ‘SocialController@handleProvider’]);
Come vadi saranno sufficienti queste due route, una per reindirizzare l’utente al provider per richiedere l’autorizzazione ad accedere al suo profilo (redirectProvider) e l’altra per gestire e utilizzare le informazioni ricevute (handleProvider).
Creazione del Controller
A questo punto manca solo il controller che gestirà tutto:
redirect();
}
/**
* Recupera tutti i dati dell’utente
*
* @param string $provider
* @return IlluminateHttpRedirectResponse|IlluminateRoutingRedirector
*/
public function handleProvider( $provider = “facebook” )
{
// Recuperiamo tutti i dati che ci fornisce facebook
$response = Socialize::with( $provider )->user();
//Qui controlliamo se dobbiamo creare un nuovo utente o se
//ne esiste già uno con la stessa email, in questo caso
//invece che crearlo andremo ad aggiornare i suoi dati
$user = User::firstOrCreate([
‘email’ => $response->email
]);
//Impostiamo i dati dell’utente
$user->name = $response->name;
$user->provider_token = $response->token;
//Salviamo l’utente
$user->save();
//Effettuiamo il login con i dati ricevuti
$this->auth->login( $user );
return redirect(‘/’);
}
}
Questo è un esempio molto basilare di come gestire il login con Facebook, è possibile adattarlo per rispondere a tutti i provider che vogliamo abilitare, lascio a te come eserizio la modifica del codice!
