...
✅ WEB- och WordPress -nyheter, teman, plugins. Här delar vi tips och bästa webbplatslösningar.

Google-inloggning i Laravel med Laravel Socialite

20

Nyligen har jag publicerat en artikel Login with LinkedIn Using Laravel Socialite och en av våra läsare frågade om att integrera Google Login i Laravel. Google-inloggning är också en av de populära plattformarna som används för social inloggning på webbplatsen.

När du tillåter användare att logga in med sin sociala profil på din webbplats hoppar du över processen för att validera deras e-post. Dina användare behöver inte följa en e-postaktivering. Vi kan lita på sociala webbplatser eftersom de redan validerat användare på sin plattform. Det ger en bättre användarupplevelse för dina användare eftersom de inte behöver komma ihåg sina inloggningsuppgifter för din webbplats och sparar dig också från att lägga till koder för verifieringsflöde. Det är en vinn-vinn-situation.

I den här artikeln studerar vi steg för steg guide om hur du lägger till Google-inloggning i Laravel med Laravel Socialite. Laravel socialite hanterar OAuth-flöde för social inloggning bakom kulisserna. Detta paket påskyndar processen för att integrera social inloggning på Laravel.

För den här handledningen använder jag en ny Laravel-installation så kör nedanstående kommando som kommer att installera Laravel åt dig:

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

Vid Laravel-installationen skapar du en databas och lägger till dina databasuppgifter i .envfilen. När vi lägger till social inloggning i applikationen lägger jag till ytterligare två kolumner i standardmigrationsfilen för användaren och ändrade dess kod lite.

Öppna din användares migreringsfil och lägg till koden nedan till upmetoden.

/**
 * 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();
    });
}

I koden ovan har jag lagt till två kolumner provideroch provider_idsom kommer att innehålla värdena ‘google’ och användarens Google-profil-id. Skapa tabellen "användare" genom att köra kommandot migrera.

php artisan migrate

Du måste också lägga till dessa två kolumner i användarmodellen.

app / User.php

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

Skapa Google-applikation och få dina uppgifter

Därefter måste vi skapa ett projekt på Googles API-konsol. Vi kommer att kräva klient-id och klienthemlighet för applikationen för att slutföra OAuth-processen för användarna.

Följ stegen nedan för att skapa ett Google-projekt och få uppgifterna. För handledningens skull använder jag den lokala serverns URL. Du kan justera den här webbadressen enligt dina krav.

  • Gå till Googles utvecklarkonsol.
  • Klicka på rullgardinsmenyn och skapa ett nytt projekt genom att klicka på (+) -tecknet. Alternativt kan du också välja det befintliga projektet.
  • Välj inloggningsuppgifter från sidofältet på projektets instrumentpanel.
  • Under fliken Referenser klickar du på rullgardinsmenyn Skapa referenser och väljer OAuth-klient-ID.
  • Välj webbapplikationen från applikationstypen. Ange webbadressen i de auktoriserade omdirigeringsadresserna http://localhost:8000/google/callback.

När du har sparat den får du popup-fönstret tillsammans med ditt klient-ID och klienthemlighet. Kopiera dessa nycklar som vi kommer att behöva på några ögonblick.

Skapa rutter och kontroller

Du är redo med dina API-nycklar. För att gå vidare måste vi skapa rutter, bladfil och styrenhet. Skapa ett LoginControllermed kommandot:

php artisan make:controller LoginController

Skapa sedan en bladfil som heter login.blade.phpoch lägg till nedanstående HTML i den.

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

Kalla denna vy från indexmetoden för LoginController.

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

För att ringa den här vyn måste du lägga till en rutt för den. Låt oss lägga till några fler rutter också som kommer att krävas för nästa del av handledningen.

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

Lägg märke till att jag lade till en homerutt. När en användare loggar in på Google kommer jag att omdirigera dem till homerutten. Jag håller det bara för demoändamål. Du bör ändra denna rutt till något annat.

Google-inloggning i Laravel med Laravel Socialite

Hittills är vi klara med den grundläggande installation som krävs för social inloggning. Nu. det är dags att installera Laravel Socialite- biblioteket. Installera det genom att köra kommandot nedan i terminalen.

composer require laravel/socialite

Vid installation av biblioteket, öppna config/services.phpoch lägg till Google-konfiguration enligt följande:

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

När vi använde envmetoden för att få autentiseringsuppgifter måste vi lägga till dessa autentiseringsuppgifter i .envfilen.

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

Se till att ersätta platshållarna med faktiska värden. Slutligen måste vi lägga till kod i LoginController.phpfil som omdirigerar användare till Googles inloggningssida och i gengäld hanterar svaret. I den här filen skriver vi en funktion som omdirigerar en användare till Googles inloggningssida och efter lyckad auktorisering kommer den att infoga användardetaljer i databasen och logga in användaren.

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

I vår kontrollfil kontrollerar vi om användaren med provider_idredan finns eller inte. Om den existerar ska du returnera den aktuella användarinstansen annars infoga den i tabellen användare och logga in användaren.

Jag hoppas att du fick veta om Google-inloggning i Laravel med hjälp av Socialite-paketet. Jag skulle vilja höra dina tankar och förslag i kommentarsektionen nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer