Google-kirjautuminen Laravelissa Laravel Socialiten avulla

Viimeisin päivitys loka 17, 2021

Sisältö

Luo Google-sovellus ja hanki kirjautumistietosi

Äskettäin olen julkaissut artikkelin Sisäänkirjautuminen LinkedInillä Laravel Socialiten avulla ja yksi lukijoistamme kysyi Google Loginin integroimisesta Laraveliin. Google-sisäänkirjautuminen on myös yksi suosituimmista alustoista, joita käytetään sosiaaliseen sisäänkirjautumiseen verkkosivustolla.

Kun annat käyttäjien kirjautua sosiaalisen profiilinsa avulla verkkosivustollesi, ohitat heidän sähköpostinsa vahvistamisen. Käyttäjiesi ei tarvitse seurata sähköpostin aktivointiprosessia. Voimme luottaa sosiaalisiin sivustoihin, koska ne ovat jo vahvistaneet käyttäjät alustallaan. Se antaa käyttäjillesi paremman käyttökokemuksen, koska heidän ei tarvitse muistaa kirjautumistietojaan verkkosivustollesi ja säästää sinua myös lisäämästä koodeja vahvistusvirtaan. Se on win-win-tilanne.

Tässä artikkelissa tutkitaan askel askeleelta opasta Google-kirjautumisen lisäämisestä Laraveliin Laravel Socialiten avulla. Laravel socialite hoitaa OAuth-virran sosiaalisen sisäänkirjautumisen kulissien takana. Tämä paketti nopeuttaa sosiaalisen kirjautumisen integrointia Laraveliin.

Tässä opetusohjelmassa käytän uutta Laravel-asennusta, joten suorita alla oleva komento, joka asentaa Laravelin sinulle:

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

Laravel-asennuksen jälkeen luo tietokanta ja lisää tietokannan kirjautumistiedot .envtiedostoon. Kun lisäämme sosiaalista sisäänkirjautumista sovellukseen, lisätään 2 saraketta käyttäjän oletussiirtotiedostoon ja muokkaan sen koodia vähän.

Avaa käyttäjän siirtotiedosto ja lisää alla oleva koodi upmenetelmään.

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->bigIncrements('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();
    });
}

Yllä olevaan koodiin olen lisännyt 2 saraketta providerja provider_idjotka pitävät vastaavasti arvoja ‘google’ ja käyttäjän Google-profiilin id. Luo käyttäjien taulukko suorittamalla siirto-komento.

php artisan migrate

Sinun on myös lisättävä nämä 2 saraketta käyttäjämalliin.

app / User.php

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

Luo Google-sovellus ja hanki kirjautumistietosi

Seuraavaksi meidän on luotava projekti Google APIs -konsoliin. Tarvitsemme sovelluksen asiakastunnuksen ja asiakassalaisuuden OAuth-prosessin suorittamiseksi käyttäjille.

Seuraa alla olevia ohjeita Google-projektin luomiseksi ja hanki kirjautumistiedot. Opetuksen vuoksi käytän paikallisen palvelimen URL-osoitetta. Voit säätää tätä URL-osoitetta vaatimuksesi mukaan.

Siirry Google Developer Consoleen.
Napsauta avattavaa valikkoa ja luo uusi projekti napsauttamalla (+) -merkkiä. Vaihtoehtoisesti voit myös valita olemassa olevan projektin.
Valitse projektin hallintapaneelista Sivutiedot sivupalkista.
Napsauta Tunnistetiedot-välilehden avattavaa Luo tunnistetiedot -valikkoa ja valitse OAuth-asiakastunnus.
Valitse verkkosovellus sovellustyypistä. Kirjoita URL-osoite Valtuutetut uudelleenohjaus-URL-osoitteet -kohtaan http://localhost:8000/google/callback.

Kun olet tallentanut sen, saat ponnahdusikkunan yhdessä asiakastunnuksesi ja asiakassalaisuutesi kanssa. Kopioi nämä avaimet, joita tarvitsemme hetkessä.

Luo reitit ja ohjain

Olet valmis API-avaimiesi kanssa. Nyt eteenpäin on luotava reitit, korttitiedosto ja ohjain. Luo a LoginControllerkäyttämällä komentoa:

php artisan make:controller LoginController

Tämän jälkeen luo korttitiedosto nimeltä login.blade.phpja lisää siihen alla oleva HTML.

<a href="{{ url('/login/google') }}">
    {{ __('Login with Google') }}
</a>

Kutsu tätä näkymää indexmetodista LoginController.

public function index()
{
    return view('login');
}

Tätä näkymää kutsutaan lisäämällä siihen reitti. Lisätään vielä muutama reitti, joka edellyttää opetusohjelman seuraavaa osaa.

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';
});

Huomaa, että lisäsin homereitin. Kun käyttäjä kirjautuu Googleen, ohjaan hänet homereitille. Pidän sitä vain demotarkoituksiin. Sinun pitäisi vaihtaa tämä reitti joksikin muuksi.

Google-kirjautuminen Laravelissa Laravel Socialiten avulla

Toistaiseksi olemme suorittaneet sosiaalisen kirjautumisen edellyttämät perusasetukset. Nyt. on aika asentaa Laravel Socialite -kirjasto. Asenna se suorittamalla alla oleva komento terminaalissa.

composer require laravel/socialite

Kun kirjasto on asennettu, avaa config/services.phpja lisää Google-kokoonpano seuraavasti:

'google' => [
    'client_id'     => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect'      => env('GOOGLE_REDIRECT_URL'),
],

Kun käytimme envtapaa saada tunnistetiedot, meidän on lisättävä nämä tunnistetiedot .envtiedostoon.

GOOGLE_CLIENT_ID=YOUR_CLIENT_ID
GOOGLE_CLIENT_SECRET=YOUR_CLIENT_SECRET
GOOGLE_REDIRECT_URL=http://localhost:8000/google/callback

Muista korvata paikkamerkit todellisilla arvoilla. Lopuksi meidän on lisättävä LoginController.phptiedostoon koodi, joka ohjaa käyttäjän Google-kirjautumissivulle ja vastineeksi käsittelee vastauksen. Tässä tiedostossa kirjoitamme toiminnon, joka ohjaa käyttäjän Google-kirjautumissivulle ja onnistuneen valtuutuksen yhteydessä se lisää käyttäjän tiedot tietokantaan ja kirjaa käyttäjän sisään.

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 Google authentication page.
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
    
    /**
     * Obtain the user information from Google.
     *
     * @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
        ]);
    }
}

Ohjaintiedostossamme tarkistamme, onko käyttäjä provider_idjo olemassa vai ei. Jos se on olemassa, palauta nykyinen käyttäjäesiintymä muuten lisää se käyttäjätaulukoon ja kirjaa käyttäjä sisään.

Toivon, että sait tietää Google Loginista Laravelissa Socialite-paketin avulla. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.

Aiheeseen liittyvät artikkelit

: artisansweb.net