{"id":23297,"date":"2021-04-27T13:48:00","date_gmt":"2021-04-27T10:48:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23297"},"modified":"2021-10-18T02:25:28","modified_gmt":"2021-10-17T23:25:28","slug":"systeme-de-connexion-sociale-utilisant-laravel-socialite","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/systeme-de-connexion-sociale-utilisant-laravel-socialite\/","title":{"rendered":"Syst\u00e8me de connexion sociale utilisant Laravel Socialite"},"content":{"rendered":"

Cr\u00e9dit: Cet article est inspir\u00e9 de ce post Laravel Social Authentication with Socialite<\/a><\/p>\n

Cherchez-vous \u00e0 mettre en \u0153uvre un syst\u00e8me de connexion sociale sur votre site Web Laravel\u00a0? En autorisant la connexion sociale, vos utilisateurs n’ont pas besoin de s’inscrire sur votre site Web. Cela nous permet \u00e9galement d’\u00e9conomiser beaucoup de travail, comme l’envoi du lien d’activation, la v\u00e9rification du compte de messagerie. Dans cet article, nous \u00e9tudions comment ajouter un syst\u00e8me de connexion sociale \u00e0 l’aide de Laravel socialite.<\/p>\n

La<\/a> biblioth\u00e8que Laravel Socialite<\/a> fournit une authentification OAuth avec Facebook, Twitter, Google, LinkedIn, GitHub et Bitbucket. Ce que nous devons faire, c’est installer cette biblioth\u00e8que sur notre site Web Laravel, la configurer, obtenir les cl\u00e9s API d’un site social et nous sommes pr\u00eats \u00e0 partir.<\/p>\n

\"Syst\u00e8me<\/a><\/p>\n

Cr\u00e9er un tableau des utilisateurs<\/h3>\n

Pour mettre en \u0153uvre le syst\u00e8me de connexion sociale, nous devons cr\u00e9er une table des utilisateurs qui stockera les d\u00e9tails fournis par le site social.<\/p>\n

Si vous avez une nouvelle installation d’un Laravel, ouvrez l’outil de ligne de commande dans le r\u00e9pertoire racine d’un projet et ex\u00e9cutez la commande php artisan make:auth<\/code>. Cette commande cr\u00e9era des contr\u00f4leurs d’authentification tels que LoginController, RegisterController, etc. qui se trouvent dans le r\u00e9pertoire app\/Http\/Controllers\/Auth. Il cr\u00e9e \u00e9galement une vue login.blade.php, register.blade.php dans le r\u00e9pertoire resources\/view\/auth.<\/p>\n

Ensuite, ouvrez la table de migration pour les utilisateurs. Nous allons modifier cette migration par d\u00e9faut et ajouter deux colonnes suppl\u00e9mentaires appel\u00e9es provider et provider_id.<\/p>\n

public function up()\n{\n\u00a0\u00a0\u00a0\u00a0Schema::create('users', function (Blueprint $table) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->increments('id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('name');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('email')->nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('password')->nullable();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('provider');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('provider_id');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->rememberToken();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->timestamps();\n\u00a0\u00a0\u00a0\u00a0});\n}<\/code><\/pre>\n
Comme vous le voyez, nous d\u00e9finissons les colonnes d’e-mail et de mot de passe sur nullable. Pourquoi? Lorsque nous utilisons l’authentification de connexion sociale, il n’y a aucune garantie d’obtenir un identifiant de messagerie d’un utilisateur. Et le mot de passe n’est pas non plus n\u00e9cessaire dans ce cas. Nous gardons donc l’adresse e-mail et le mot de passe \u00e0 nullable. Le fournisseur de colonne stockera le nom du site social comme Facebook, Twitter, etc. Column provider_id stockera l’identifiant social d’un utilisateur respectif du site social.<\/p>\n
Une fois que vous avez modifi\u00e9 votre migration d’utilisateur comme ci-dessus, ex\u00e9cutez la commande php artisan migrate<\/code>. Cela cr\u00e9era une table appel\u00e9e \u00ab\u00a0utilisateurs\u00a0\u00bb dans votre base de donn\u00e9es.<\/p>\n
Probablement, lors de l’ex\u00e9cution de la commande de migration, vous obtiendrez une erreur \u00e9trange li\u00e9e \u00e0 la longueur des caract\u00e8res. Si tel est le cas, ouvrez le fichier AppServiceProvider.php \u00e0 partir du r\u00e9pertoire app\/Providers. Dans ce fichier, nous devons d\u00e9finir la longueur de cha\u00eene par d\u00e9faut pour les colonnes d’une table de base de donn\u00e9es.<\/p>\n
Fichier AppServiceProvider.php<\/p>\n
<?php\n\u00a0\nnamespace AppProviders;\n\u00a0\nuse IlluminateSupportServiceProvider;\nuse IlluminateSupportFacadesSchema;\n\u00a0\nclass AppServiceProvider extends ServiceProvider\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Bootstrap any application services.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return void\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function boot()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Schema::defaultStringLength(255);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Register any application services.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return void\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function register()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Mod\u00e8le d’utilisateur<\/h3>\n
Par d\u00e9faut, Laravel inclut un mod\u00e8le AppUser Eloquent dans votre r\u00e9pertoire d’applications. Ouvrez User.php \u00e0 partir du dossier de l’application. Ajoutez deux autres colonnes provider, provider_id \u00e0 la variable $fillable.<\/p>\n
protected $fillable = [\n\u00a0\u00a0\u00a0\u00a0'name', 'email', 'password', 'provider', 'provider_id',\n];<\/code><\/pre>\n
Installer et configurer Laravel Socialite<\/h3>\n
Pour installer cette biblioth\u00e8que, vous devez avoir install\u00e9 composer<\/a> sur votre syst\u00e8me.<\/p>\n
Dans votre outil de ligne de commande, ex\u00e9cutez la commande ci-dessous.<\/p>\n
composer require laravel\/socialite<\/code><\/p>\n
Apr\u00e8s avoir install\u00e9 la biblioth\u00e8que, enregistrez LaravelSocialiteSocialiteServiceProvider dans votre fichier de configuration config\/app.php.<\/p>\n
'providers' => [\n\u00a0\u00a0\u00a0\u00a0\/\/ Other service providers...\n\u00a0\n\u00a0\u00a0\u00a0\u00a0LaravelSocialiteSocialiteServiceProvider::class,\n],<\/code><\/pre>\n
Dans le m\u00eame fichier config\/app.php, sous le tableau aliases, ajoutez Fa\u00e7ade Socialite.<\/p>\n
'Socialite' => LaravelSocialiteFacadesSocialite::class,<\/code><\/pre>\n
Maintenant, il est temps d’enregistrer votre candidature sur le site social. Par exemple, nous supposons que vous souhaitez impl\u00e9menter l’authentification de connexion Facebook. Alors n’h\u00e9sitez plus et cr\u00e9ez une application sur Facebook<\/a>.<\/p>\n
Une fois que vous \u00eates pr\u00eat avec l’identifiant de l’application, le secret de l’application de votre application Facebook, ouvrez le fichier config\/services.php et ajoutez-y le code ci-dessous.<\/p>\n
'facebook' => [\n\u00a0\u00a0\u00a0\u00a0'client_id' => env('FB_APP_ID'),\n\u00a0\u00a0\u00a0\u00a0'client_secret' => env('FB_APP_SECRET'),\n\u00a0\u00a0\u00a0\u00a0'redirect' => env('FB_CALLBACK_URL'),\n],<\/code><\/pre>\n
Comme indiqu\u00e9 dans le code ci-dessus, nous devons stocker les d\u00e9tails de notre application et l’URL de rappel dans le fichier .env.<\/p>\n
FB_APP_ID=PASTE_APP_ID_HERE\nFB_APP_SECRET=PASTE_APP_SECRET_HERE\nFB_CALLBACK_URL=YOU_SITE_URL\/login\/facebook\/callback<\/code><\/pre>\n
Nous avons transmis l’URL de rappel en tant que YOU_SITE_URL\/login\/facebook\/callback. Maintenant, il est temps de cr\u00e9er deux routes, une pour rediriger l’utilisateur vers le fournisseur OAuth (dans notre cas, Facebook) et une autre pour recevoir le rappel du fournisseur apr\u00e8s authentification.<\/p>\n
Code r\u00e9el pour la gestion d’OAuth<\/h3>\n
\u00c0 ce stade, nous avons termin\u00e9 toutes les configurations de Laravel Socialite. Il est temps d’\u00e9crire du code qui g\u00e8re la redirection OAuth et r\u00e9cup\u00e8re les d\u00e9tails de l’utilisateur.<\/p>\n
Ouvrez votre fichier login.blade.php et placez-y le code ci-dessous probablement apr\u00e8s le bouton d’envoi.<\/p>\n
<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-6 col-md-offset-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Login with\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/facebook') }}\"><i class=\"fa fa-facebook-official\" aria-hidden=\"true\"><\/i> Facebook<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/twitter') }}\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"><\/i> Twitter<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"{{ url('\/login\/github') }}\"><i class=\"fa fa-github\" aria-hidden=\"true\"><\/i> Github<\/a>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Ici, nous ajoutons un lien pour Github et Twitter. Les \u00e9tapes d’ajout d’OAuth pour ces sites sociaux sont \u00e9galement identiques \u00e0 celles de Facebook. Il vous suffit de cr\u00e9er une application des sites sociaux respectifs et de stocker ces informations de la m\u00eame mani\u00e8re que nous avons ajout\u00e9es pour Facebook.<\/p>\n
Dans votre fichier de route, d\u00e9finissez les routes comme ci-dessous.<\/p>\n
Route::get('login\/{provider}', 'AuthLoginController@redirectToProvider');\nRoute::get('login\/{provider}\/callback', 'AuthLoginController@handleProviderCallback');<\/code><\/pre>\n
Ensuite, acc\u00e9dez \u00e0 app\/Http\/Controllers\/Auth\/LoginController.php et modifiez le fichier. Vous devez y ajouter le code ci-dessous.<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllersAuth;\n\u00a0\nuse AppHttpControllersController;\nuse IlluminateFoundationAuthAuthenticatesUsers;\nuse Socialite;\nuse AppUser;\nuse Auth;\n\u00a0\nclass LoginController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Redirect the user to the GitHub authentication page.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return Response\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function redirectToProvider($provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return Socialite::driver($provider)->scopes(['email'])->redirect();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* Obtain the user information from GitHub.\n\u00a0\u00a0\u00a0\u00a0\u00a0*\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return Response\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function handleProviderCallback($provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$user = Socialite::driver($provider)->user();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$authUser = $this->findOrCreateUser($user, $provider);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Auth::login($authUser, true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return redirect($this->redirectTo);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/**\n\u00a0\u00a0\u00a0\u00a0\u00a0* If a user has registered before using social auth, return the user\n\u00a0\u00a0\u00a0\u00a0\u00a0* else, create a new user object.\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param\u00a0 $user Socialite user object\n\u00a0\u00a0\u00a0\u00a0\u00a0* @param $provider Social auth provider\n\u00a0\u00a0\u00a0\u00a0\u00a0* @return\u00a0 User\n\u00a0\u00a0\u00a0\u00a0\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0public function findOrCreateUser($user, $provider)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$authUser = User::where('provider_id', $user->id)->first();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($authUser) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $authUser;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return User::create([\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'name'\u00a0\u00a0\u00a0\u00a0 => $user->name,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email'\u00a0\u00a0\u00a0 => $user->email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider' => $provider,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'provider_id' => $user->id\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]);\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
La m\u00e9thode redirectToProvider redirige l’utilisateur vers la page de connexion d’un site social. Une fois que l’utilisateur autorise l’application, nous r\u00e9cup\u00e9rons les informations de l’utilisateur dans la fonction handleProviderCallback. Si l’utilisateur n’existe pas avec notre syst\u00e8me, nous ajoutons ses coordonn\u00e9es \u00e0 l’aide de la m\u00e9thode findOrCreateUser.<\/p>\n
Nous esp\u00e9rons que vous avez pris connaissance du syst\u00e8me de connexion sociale utilisant Laravel Socialite. Si vous avez des questions ou des suggestions, veuillez laisser un commentaire ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n