✅ Notizie, temi, plugin WEB e WordPress. Qui condividiamo suggerimenti e le migliori soluzioni per siti web.

Sistema di accesso social utilizzando Laravel Socialite

65

Credito: questo articolo è ispirato a questo post Laravel Social Authentication with Socialite

Stai cercando di implementare il sistema di accesso social nel tuo sito web Laravel? Consentendo l’accesso social, i tuoi utenti non devono registrarsi sul tuo sito web. Ci fa anche risparmiare molto lavoro come l’invio di link di attivazione, verifica dell’account e-mail. In questo articolo, studiamo come aggiungere il sistema di accesso social usando Laravel socialite.

La libreria Laravel Socialite fornisce l’autenticazione OAuth con Facebook, Twitter, Google, LinkedIn, GitHub e Bitbucket. Quello che dobbiamo fare è installare questa libreria nel nostro sito Web Laravel, configurarla, ottenere le chiavi API da un sito social e siamo a posto.

Sistema di accesso social utilizzando Laravel Socialite

Crea tabella utenti

Per implementare il sistema di accesso social, è necessario creare una tabella utenti che memorizzerà i dettagli forniti dal sito social.

Se hai una nuova installazione di Laravel, apri lo strumento da riga di comando nella directory principale di un progetto ed esegui il comando php artisan make:auth. Questo comando creerà controller di autenticazione come LoginController, RegisterController, ecc. che si trovano nella directory app/Http/Controllers/Auth. Crea anche una vista login.blade.php, register.blade.php nella directory resource/view/auth.

Quindi, apri la tabella Migrazione per utenti. Modificheremo questa migrazione predefinita e aggiungeremo altre due colonne denominate provider e provider_id.

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('email')->nullable();
        $table->string('password')->nullable();
        $table->string('provider');
        $table->string('provider_id');
        $table->rememberToken();
        $table->timestamps();
    });
}

Come vedi, impostiamo le colonne email e password su nullable. Perché? Quando utilizziamo l’autenticazione dell’accesso social non vi è alcuna garanzia di ottenere un ID e-mail di un utente. E anche la password non è necessaria in questo caso. Quindi manteniamo email e password annullabili. Il provider della colonna memorizzerà il nome del sito social come facebook, twitter, ecc. La colonna provider_id memorizzerà l’id social di un utente relativo al sito social.

Dopo aver modificato la migrazione dell’utente come sopra, esegui il comando php artisan migrate. Creerà una tabella chiamata "utenti" nel tuo database.

Probabilmente, durante l’esecuzione del comando di migrazione otterrai qualche strano errore relativo alla lunghezza dei caratteri. In tal caso, apri il file AppServiceProvider.php dalla directory app/Providers. In questo file, è necessario impostare la lunghezza della stringa predefinita per le colonne della tabella di un database.

File AppServiceProvider.php

<?php
 
namespace AppProviders;
 
use IlluminateSupportServiceProvider;
use IlluminateSupportFacadesSchema;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(255);
    }
 
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Modello utente

Per impostazione predefinita, Laravel include un modello AppUser Eloquent nella directory dell’app. Apri User.php dalla cartella dell’app. Aggiungi altre due colonne provider, provider_id alla variabile $fillable.

protected $fillable = [
    'name', 'email', 'password', 'provider', 'provider_id',
];

Installa e configura Laravel Socialite

Per installare questa libreria, dovresti avere il compositore installato sul tuo sistema.

Nel tuo strumento da riga di comando esegui il comando seguente.

composer require laravel/socialite

Dopo aver installato la libreria, registra LaravelSocialiteSocialiteServiceProvider nel tuo file di configurazione config/app.php.

'providers' => [
    // Other service providers...
 
    LaravelSocialiteSocialiteServiceProvider::class,
],

Nello stesso file config/app.php, sotto l’array degli alias, aggiungi Socialite facciata.

'Socialite' => LaravelSocialiteFacadesSocialite::class,

Ora è il momento di registrare la tua applicazione sul sito social. Ad esempio, supponiamo che tu voglia implementare l’autenticazione dell’accesso a Facebook. Quindi vai avanti e crea un’applicazione su Facebook.

Una volta che sei pronto con l’ID app, il segreto dell’app della tua applicazione Facebook, apri il file config/services.php e aggiungi il codice sottostante.

'facebook' => [
    'client_id' => env('FB_APP_ID'),
    'client_secret' => env('FB_APP_SECRET'),
    'redirect' => env('FB_CALLBACK_URL'),
],

Come mostrato nel codice sopra, dobbiamo memorizzare i dettagli della nostra applicazione e l’URL di richiamata nel file .env.

FB_APP_ID=PASTE_APP_ID_HERE
FB_APP_SECRET=PASTE_APP_SECRET_HERE
FB_CALLBACK_URL=YOU_SITE_URL/login/facebook/callback

Abbiamo passato l’URL di richiamata come YOU_SITE_URL/login/facebook/callback. Ora è il momento di creare due percorsi, uno per reindirizzare l’utente al provider OAuth (nel nostro caso, Facebook) e un altro per ricevere la richiamata dal provider dopo l’autenticazione.

Codice effettivo per la gestione di OAuth

A questo punto, abbiamo completato tutte le impostazioni per Laravel Socialite. È ora di scrivere del codice che gestisca il reindirizzamento OAuth e recuperi i dettagli dell’utente.

Apri il tuo file login.blade.php e inserisci il codice sottostante probabilmente dopo il pulsante di invio.

<div class="form-group">
    <div class="col-md-6 col-md-offset-4">
        Login with
        <a href="{{ url('/login/facebook') }}"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a>
        <a href="{{ url('/login/twitter') }}"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
        <a href="{{ url('/login/github') }}"><i class="fa fa-github" aria-hidden="true"></i> Github</a>
    </div>
</div>

Qui, stiamo aggiungendo un collegamento per Github e Twitter. I passaggi per l’aggiunta di OAuth per questi siti social sono gli stessi di Facebook. Devi solo creare un’applicazione dei rispettivi siti social e memorizzare quei dettagli nello stesso modo in cui abbiamo aggiunto per Facebook.

Nel tuo file di percorso, definisci i percorsi come di seguito.

Route::get('login/{provider}', 'AuthLoginController@redirectToProvider');
Route::get('login/{provider}/callback', 'AuthLoginController@handleProviderCallback');

Quindi, vai su app/Http/Controllers/Auth/LoginController.php e modifica il file. Dovresti aggiungere il codice seguente al suo interno.

<?php
 
namespace AppHttpControllersAuth;
 
use AppHttpControllersController;
use IlluminateFoundationAuthAuthenticatesUsers;
use Socialite;
use AppUser;
use Auth;
 
class LoginController extends Controller
{
    /**
     * Redirect the user to the GitHub authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->scopes(['email'])->redirect();
    }
 
    /**
     * Obtain the user information from GitHub.
     *
     * @return Response
     */
    public function handleProviderCallback($provider)
    {
        $user = Socialite::driver($provider)->user();
        $authUser = $this->findOrCreateUser($user, $provider);
        Auth::login($authUser, true);
        return redirect($this->redirectTo);
    }
 
    /**
     * If a user has registered before using social auth, return the user
     * else, create a new user object.
     * @param  $user Socialite user object
     * @param $provider Social auth provider
     * @return  User
     */
    public function findOrCreateUser($user, $provider)
    {
        $authUser = User::where('provider_id', $user->id)->first();
        if ($authUser) {
            return $authUser;
        }
        return User::create([
            'name'     => $user->name,
            'email'    => $user->email,
            'provider' => $provider,
            'provider_id' => $user->id
        ]);
    }
}

Il metodo redirectToProvider reindirizza l’utente alla pagina di accesso di un sito social. Una volta che l’utente ha autorizzato l’applicazione, recuperiamo le informazioni dell’utente nella funzione handleProviderCallback. Se l’utente non esiste con il nostro sistema, aggiungiamo i suoi dettagli utilizzando il metodo findOrCreateUser.

Ci auguriamo che tu sia venuto a conoscenza del sistema di accesso social utilizzando Laravel Socialite. Se hai domande o suggerimenti, lascia un commento qui sotto.

articoli Correlati

Fonte di registrazione: artisansweb.net

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More