Implémentez facilement une authentification OAuth à l'aide de Laravel Socialite


Dans cet article, découvrez comment simplifier l'authentification utilisateur sur votre application en utilisant des services populaires tels que Google, Meta et Apple, grâce à Laravel Socialite.
Ce package facilite la gestion des connexions OAuth, dans cet article, nous vous montrons comment configurer cette authentification avec Google. Si vous souhaitez explorer des options d'authentification plus exotiques, ne vous inquiétez pas, vous trouverez sûrement ce dont vous avez besoin parmi les nombreux connecteurs proposés par la communauté. Pourquoi ne pas envisager de créer le vôtre ?
Dans notre exemple, nous partirons d'une application Laravel avec une authentification basique, le couple email mot de passe qui nous est offert par Laravel Breeze.
Nous allons ajouter en parallèle Socialite pour proposer à nos utilisateurs différents choix de connexion avec la commande suivante :
1composer require laravel/socialite
Maintenant que le package est installé, il est nécessaire d'aller récupérer les éléments d'authentification dans la section développeur des services d'authentification que vous souhaitez utiliser.
Dans notre cas, nous avons suivi les étapes décrites dans cet article pour récupérer les informations nécessaires à la connexion via Google Auth.
Une fois en possession des informations d'identification, il sera nécessaire de les placer dans votre fichier .env
. Ensuite, rendez-vous dans config/services.php
pour ajouter le nouveau fournisseur :
1'google' => [2 'client_id' => env('GOOGLE_CLIENT_ID'),3 'client_secret' => env('GOOGLE_CLIENT_SECRET'),4 'redirect' => '/auth/google/callback',5],
Dans notre exemple, le client ID et le client secret sont requis pour se connecter avec Google, mais ces informations peuvent varier en fonction des fournisseurs. À noter que certains prestataires ne seront utilisables que par des applications respectant certaines règles ou éventuellement via un abonnement, comme c'est le cas pour FranceConnect ou Apple.
Il est temps de configurer nos routes :
1Route::prefix('auth/{provider}')->group(function () {2 Route::get('/redirect', [AuthenticationController::class, 'redirect'])->name('auth.redirect');3 Route::get('/callback', [AuthenticationController::class, 'callback'])->name('auth.callback');4});
La première route redirigera l'utilisateur vers le site du fournisseur pour s'authentifier et approuver le périmètre des données partagées avec votre application. Une fois l'authentification validée, l'utilisateur est redirigé vers votre URL de callback avec les données nécessaires au traitement par votre application.
Passons maintenant à l'aspect logique :
1<?php 2 3namespace App\Http\Controllers\Auth; 4 5use App\Http\Controllers\Controller; 6use App\Models\User; 7use Illuminate\Support\Facades\Auth; 8use Laravel\Socialite\Facades\Socialite; 9use Symfony\Component\HttpFoundation\RedirectResponse;10 11class AuthenticationController extends Controller12{13 public function redirect(string $provider): RedirectResponse14 {15 return Socialite::driver($provider)->redirect();16 }17 18 public function callback(string $provider): RedirectResponse19 {20 $socialiteUser = Socialite::driver($provider)->user();21 22 $user = User::updateOrCreate([23 'email' => $socialiteUser->getEmail(),24 ], [25 'name' => $socialiteUser->getName(),26 ]);27 28 Auth::login($user);29 30 return redirect()->intended(route('home'));31 }32}
Comme mentionné précédemment, la fonction redirect utilise Socialite pour générer l'URL d'authentification propre au fournisseur utilisé.
Quant à la fonction callback, elle récupère les informations de l'utilisateur nouvellement authentifié renvoyées par le fournisseur.
C'est à ce moment-là que la logique de votre application intervient. Dans notre exemple, nous vérifions si l'utilisateur existe dans notre base de données, sinon, nous le créons en enregistrant également son nom, puis nous le connectons à notre application.
Cet exemple est minimaliste. Il est important de noter que le fournisseur renvoie également d'autres informations sur votre utilisateur, comme son ID
, son token d'authentification
, son avatar
, etc. Ces informations varient en fonction des différents fournisseurs d'authentification. À vous de décider, en fonction des cas, quels éléments sont pertinents pour votre utilisation.
Si votre application a besoin d'accéder à des informations supplémentaires, vous pouvez utiliser la fonction setScopes()
pour demander davantage de permissions :
1return Socialite::driver($provider)2 ->setScopes(['<https://www.googleapis.com/auth/calendar>']) 3 ->redirect();
Et voilà ! En seulement quelques minutes, vos utilisateurs peuvent désormais s'authentifier sur votre application grâce à OAuth.
Par ailleurs, n'hésitez pas à jeter un œil au dépôt de notre ami Ludo pour vous inspirer de ses tests concernant ce package.
A lire
Autres articles de la même catégorie

PHPStan : Il est où dd() ?
On part à la chasse aux dd, var_dump et autres joyeusetés à l'aide de PHPStan

William Suppo

Créer votre assistant ChatGPT
Découvrez comment créer et communiquer avec votre propre assistant ChatGPT directement depuis Laravel !

Mathieu De Gracia

Les bases 6/6 : Les tests
Consolider le code avec des tests.

William Suppo