Google-inloggning i Laravel med Laravel Socialite
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 .env
filen. 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 up
metoden.
/**
* 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 provider
och provider_id
som 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 LoginController
med kommandot:
php artisan make:controller LoginController
Skapa sedan en bladfil som heter login.blade.php
och lägg till nedanstående HTML i den.
<a href="{{ url('/login/google') }}">
{{ __('Login with Google') }}
</a>
Kalla denna vy från index
metoden 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 home
rutt. När en användare loggar in på Google kommer jag att omdirigera dem till home
rutten. 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.php
och 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 env
metoden för att få autentiseringsuppgifter måste vi lägga till dessa autentiseringsuppgifter i .env
filen.
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.php
fil 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_id
redan 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
- Logga in med LinkedIn i Laravel med Laravel Socialite
- Logga in med Twitter i Laravel med Laravel Socialite
- Hur man lägger till Google OAuth-inloggning på webbplatsen med PHP