Accedi con Twitter in Laravel utilizzando Laravel Socialite

Last updated Ott 18, 2021

Contenuto

Iniziare

Iniziamo con la nuova installazione di Laravel. Non è obbligatorio utilizzare una nuova installazione di Laravel, puoi anche utilizzare il tuo progetto esistente.

Per installare l’ultima versione di Laravel, esegui il comando seguente:

composer create-project --prefer-dist laravel/laravel twitterlogin

Al momento dell’installazione, creare il database e aggiungere le credenziali nel .envfile. Stiamo costruendo un sistema di accesso, quindi dovremmo memorizzare i dettagli dell’utente nel database.

Questo tutorial si basa su Accedi con Twitter, quindi otterremo l’ID Twitter dell’utente dopo l’autenticazione riuscita. Per memorizzare questo ID social stiamo aggiungendo colonne providere provider_idalla tabella "utenti". La colonna providermemorizzerà il valore come "twitter" e una colonna provider_idè per l’id Twitter dell’utente.

Quando utilizziamo l’accesso social non è necessario memorizzare le password, quindi la colonna della password dovrebbe accettare il valore "NULL" come impostazione predefinita. Non vi è alcuna garanzia di ricevere l’e-mail dell’utente dopo l’accesso social, quindi per curiosità è necessario impostare le colonne dell’e-mail anche per accettare il valore ‘NULL’.

Apri il file di migrazione della tabella "utenti" e aggiungi il codice di seguito.

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('email')->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->string('provider');
        $table->string('provider_id');
        $table->rememberToken();
        $table->timestamps();
    });
}

Dopodiché esegui il comando di migrazione che creerà tabelle nel tuo database.

php artisan migrate

È inoltre necessario aggiungere le colonne providere provider_idal modello utente.

app/Utente.php

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name', 'email', 'password', 'provider', 'provider_id'
];

Ottieni credenziali Twitter

Poiché integreremo l’accesso a Twitter in Laravel, devi prima ottenere le tue credenziali di Twitter. Segui i passaggi seguenti per creare un’app Twitter e ottenere le tue credenziali.

Accedi all’account sviluppatore di Twitter e crea una nuova applicazione.
Compila tutti i campi obbligatori come il nome dell’applicazione e la descrizione.
Aggiungi il dominio del tuo sito web nel campo Sito web.
Imposta l’URL di richiamata come http://localhost:8000/twitter/callback. Modifica l’URL in base alle tue esigenze.
Una volta effettuata la registrazione, copia e incolla le credenziali dell’applicazione creata (Consumer Key e Secret) che richiedono in un certo tempo.

Utilizzando queste credenziali copiate, la tua applicazione Laravel completerà il flusso OAuth quando gli utenti accedono con il proprio account Twitter.

Crea percorsi e controller

Per includere la funzionalità di accesso con Twitter, dobbiamo aggiungere un codice nel nostro progetto Laravel. Creiamo un LoginControllerutilizzando il comando:

php artisan make:controller LoginController

Dobbiamo aggiungere un collegamento di accesso nel file blade. Crea un login.blade.phpe aggiungi il seguente codice HTML ad esso.

<a href="{{ url('/login/twitter') }}" class="btn btn-success">
    {{ __('Login with Twitter') }}
</a>

Puoi chiamare questa vista dal indexmetodo di LoginController.

/**
 * Call the view
 */
public function index()
{
    return view('login');
}

Quindi, aggiungi il percorso per esso. Sto anche aggiungendo alcuni altri percorsi che saranno necessari per la prossima parte del tutorial.

Route::get('login', 'LoginController@index');
Route::get('login/{provider}', 'LoginController@redirectToProvider');
Route::get('{provider}/callback', 'LoginController@handleProviderCallback');
Route::get('/home', function() {
    return 'User is logged in';
});

Dopo che l’utente avrà effettuato l’accesso con Twitter, lo reindirizzerò al homepercorso. È solo a scopo dimostrativo. Dovresti cambiare questo percorso con qualcos’altro.

Accedi con Twitter a Laravel

È ora di utilizzare il pacchetto Socialite ora. Usando il comando seguente puoi installare il pacchetto Socialite nel tuo progetto Laravel.

composer require laravel/socialite

Dopo aver installato Socialite, dobbiamo configurarlo. Apri config/services.phpe aggiungi la configurazione di Twitter a questo file come segue:

'twitter' => [
    'client_id' => env('TWITTER_API_KEY'),
    'client_secret' => env('TWITTER_API_SECRET_KEY'),
    'redirect' => env('TWITTER_CALLBACK_URL'),
],

Potresti notare che ho usato il envmetodo per ottenere i valori specificati. Significa che dobbiamo definire queste costanti nel .envfile.

TWITTER_API_KEY=PASTE_TWITTER_API_KEY
TWITTER_API_SECRET_KEY=PASTE_TWITTER_API_SECRET_KEY
TWITTER_CALLBACK_URL=http://localhost:8000/twitter/callback

Assicurati di sostituire i segnaposto con le tue chiavi API effettive. Successivamente nel LoginController, stiamo scrivendo una funzione che reindirizza un utente alla pagina di accesso di Twitter e, in caso di autorizzazione riuscita, effettuerà l’accesso dell’utente.

LoginController.php

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use Socialite;
use AppModelsUser;
use Auth;
 
class LoginController extends Controller
{
    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';
  
    /**
     * Call the view
     */
    public function index()
    {
        return view('login');
    }
  
    /**
     * Redirect the user to the Twitter authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    
    /**
     * Obtain the user information from Twitter.
     *
     * @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
        ]);
    }
}

Vai alla pagina di accesso e fai clic sul link "Accedi con Twitter". Completa il processo e dovresti accedere al sistema utilizzando Twitter. Puoi anche trovare voci di utenti nella userstabella.

Spero che tu possa conoscere l’accesso con Twitter in Laravel utilizzando il pacchetto Socialite. Mi piacerebbe sentire i tuoi pensieri o suggerimenti nella sezione commenti qui sotto.

Accedi con Twitter in Laravel utilizzando Laravel Socialite

Iniziare

Ottieni credenziali Twitter

Crea percorsi e controller

Accedi con Twitter a Laravel

articoli Correlati