Laravel開發(fā):如何使用Laravel Socialite快速集成第三方登錄?

laravel是一種流行的php框架,用于開發(fā)web應(yīng)用程序。其中一個最常見的功能是在應(yīng)用程序中集成第三方登錄。這樣做可以為用戶提供更好的用戶體驗,減少注冊重復流程。

在本文中,我們將討論如何使用laravel Socialite庫集成第三方登錄。

什么是Laravel Socialite?

Laravel Socialite是Laravel框架的一個擴展包,它允許開發(fā)人員在應(yīng)用程序中輕松實現(xiàn)第三方登錄。它支持各種社交平臺,如Facebook,Twitter,LinkedIn等。

Socialite如何工作?

Socialite遵循OAuth協(xié)議。 OAuth是一種授權(quán)框架,它允許用戶將其帳戶信息從一個站點傳遞到另一個站點,而無需共享其憑據(jù)。 OAuth需要用戶授權(quán),在這種情況下,用戶將授權(quán)應(yīng)用程序訪問其社交媒體帳戶。

Socialite授權(quán)工作原理如下:

  1. 用戶單擊“登錄”按鈕,該按鈕將指向Socialite授權(quán):

    Route::get('auth/{provider}', 'AuthSocialController@redirectToProvider');
  2. Socialite挑戰(zhàn)用戶以授權(quán)訪問其社交媒體帳戶; Socialite將重定向到社交媒體站點;

    Route::get('auth/{provider}/callback', 'AuthSocialController@handleProviderCallback');

3.用戶授權(quán)自己的帳戶,社交媒體網(wǎng)站重定向到回調(diào)URL;

public function redirectToProvider($provider) {   return Socialite::driver($provider)->redirect(); }
  1. Socialite將帶有授權(quán)代碼的回調(diào)URL返回應(yīng)用程序,應(yīng)用程序?qū)⒂檬跈?quán)代碼請求OAuth訪問令牌;

    public function handleProviderCallback($provider) { $socialUser = Socialite::driver($provider)->user(); }
  2. 完成認證,Socialite將返回用戶授權(quán)的令牌,并將其傳遞到應(yīng)用程序中。

如何在Laravel中使用Socialite?

使用Socialite支持的任何社交媒體平臺,您需要在以下兩個地方設(shè)置應(yīng)用程序憑據(jù)或密鑰:

    'facebook' => [         'client_id' => env('FB_CLIENT_ID'),         'client_secret' => env('FB_CLIENT_SECRET'),         'redirect' => env('FB_CALLBACK_URL'),     ]      'twitter' => [         'client_id' => env('TW_CLIENT_ID'),         'client_secret' => env('TW_CLIENT_SECRET'),         'redirect' => env('TW_CALLBACK_URL'),     ],      'google' => [          'client_id' => env('GOOGLE_CLIENT_ID'),          'client_secret' => env('GOOGLE_CLIENT_SECRET'),          'redirect' => env('GOOGLE_CALLBACK_URL')     ]

應(yīng)用程序憑據(jù)或密鑰旨在驗證應(yīng)用程序的身份。

我們將在config / services.php文件中進行此設(shè)置。

步驟1:創(chuàng)建授權(quán)路由

創(chuàng)建用于觸發(fā)Socialite授權(quán)的路由:

Route::get('auth/{provider}', 'AuthSocialController@redirectToProvider'); Route::get('auth/{provider}/callback', 'AuthSocialController@handleProviderCallback');

通常將這些路由放置在一個名為SocialController的控制器中,該控制器用于處理Socialite授權(quán)和回調(diào)。

步驟2:創(chuàng)建SocialController

像所有控制器一樣,我們需要創(chuàng)建使用良好的代碼實踐的SocialController。

使用以下命令來創(chuàng)建控制器:

php artisan make:controller AuthSocialController

最終,這將使我們可以使用授權(quán)提供程序進行授權(quán)并回調(diào)我們的路由。

在SocialController中,我們定義了兩個方法,redirectToProvider和handleProviderCallback。 第一個是重定向至授權(quán)提供程序。 隨后的回調(diào)函數(shù)則為具有授權(quán)代碼的客戶端檢索信息并完成身份驗證的客戶端提供回調(diào)URL。

以下是SocialController的示例代碼:

namespace AppHttpControllersAuth; use AppHttpControllersController; use IlluminateSupportFacadesAuth; use IlluminateHttpRequest; use LaravelSocialiteFacadesSocialite;  class SocialController extends Controller {     /**      * Redirect the user to the OAuth Provider.      *      * @return IlluminateHttpResponse      */     public function redirectToProvider($provider)     {         return Socialite::driver($provider)->redirect();     }     /**      * Obtain the user information from OAuth Provider.      *      * @return IlluminateHttpResponse      */     public function handleProviderCallback($provider)     {         $user = Socialite::driver($provider)->user();          // Do something with user data, for example:         // $user->token;         // $user->getId();         // $user->getEmail();     } }

步驟3:使用視圖控制器

通常,我們會使用視圖控制器來管理渲染我們的所有視圖。 這使我們的代碼更易于閱讀和管理。 讓我們使用Laravel的視圖控制器為我們的應(yīng)用程序創(chuàng)建一個簡單的視圖。

使用以下命令來創(chuàng)建視圖控制器:

php artisan make:controller SocialAuthController

以下是在該控制器中所做的更改。

namespace AppHttpControllers;  use IlluminateHttpRequest;  class SocialAuthController extends Controller {     /**      * Redirect the user to the OAuth Provider.      *      * @return IlluminateHttpResponse      */     public function redirectToProvider($provider)     {         return Socialite::driver($provider)->redirect();     }      /**      * Obtain the user information from OAuth Provider.      *      * @return IlluminateHttpResponse      */     public function handleProviderCallback($provider)     {         $user = Socialite::driver($provider)->user();         $existingUser = User::where('email', $user->getEmail())->first();         if ($existingUser) { // If user already exists, login the user                             auth()->login($existingUser, true);         } else { // Register new user                                 $newUser = new User();             $newUser->name = $user->getName();             $newUser->email = $user->getEmail();             $newUser->google_id = $user->getId();             $newUser->password = encrypt('amitthakur');             $newUser->save();             auth()->login($newUser, true);         }         return redirect()->to('/home');     } }

步驟4:創(chuàng)建登錄視圖

現(xiàn)在我們的控制器和路由都已準備就緒。 現(xiàn)在我們需要創(chuàng)建用于登錄的視圖。

創(chuàng)建一個視圖文件并將其命名為social_login.blade.php。 我們需要顯示可以觸發(fā)第三方登錄的按鈕。 在這種情況下,我們將展示3個按鈕,以支持Google,F(xiàn)acebook和Twitter的登錄。

以下是視圖文件的示例代碼:

@extends('layouts.app') @section('content') <main class="py-4"><div class="container">         <div class="row justify-content-center">             <div class="col-md-8">                 <div class="card">                     <div class="card-header">{{ __('Login') }}</div>                     <div class="card-body">                         <a href="%7B%7B%20route('social.oauth',%20%5B'provider'%20=&gt;%20'google'%5D)%20%7D%7D" class="btn btn-google">Sign in with google</a>                         <a href="%7B%7B%20route('social.oauth',%20%5B'provider'%20=&gt;%20'facebook'%5D)%20%7D%7D" class="btn btn-facebook">Sign in with Facebook</a>                         <a href="%7B%7B%20route('social.oauth',%20%5B'provider'%20=&gt;%20'twitter'%5D)%20%7D%7D" class="btn btn-twitter">Sign in with twitter</a>                     </div>                 </div>             </div>         </div>     </div> </main> @endsection

頂部使用布局文件。當用戶單擊任何按鈕時,我們將它們重定向到授權(quán)提供程序。 在SocialController respond中,我們將獲得用戶數(shù)據(jù)并完成身份驗證。

步驟5:創(chuàng)建新路由

現(xiàn)在我們需要創(chuàng)建新路由以處理上面的視圖文件。

修改web.php文件,如下所示:

Route::get('social', 'SocialAuthController@index')-&gt;name('social.login'); Route::get('social/{provider}', 'SocialAuthController@redirectToProvider')-&gt;name('social.oauth'); Route::get('social/{provider}/callback', 'SocialAuthController@handleProviderCallback');

我們應(yīng)該注意,上面的路由通過名稱進行標識,以便可以在控制器代碼中引用它們。

步驟6:測試

現(xiàn)在我們已經(jīng)設(shè)置了我們的社交媒體標識,在測試應(yīng)用程序之前,我們需要通過.env文件對我們的應(yīng)用程序進行配置。

要配置.env文件,請?zhí)砑右韵麓a:

FACEBOOK_CLIENT_ID=xxxxxxxxxxxxxxxxx FACEBOOK_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx FACEBOOK_CALLBACK_URL=http://www.example.com/auth/facebook/callback  GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxxx GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx GOOGLE_CALLBACK_URL=http://www.example.com/auth/google/callback  TWITTER_CLIENT_ID=xxxxxxxxxxxxxxxxx TWITTER_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx TWITTER_CALLBACK_URL=http://www.example.com/auth/twitter/callback

該行中用“xxxxxxxxxxxxxxxxx”替換實際的應(yīng)用程序標識。 之后,我們可以通過命令行啟動我們的應(yīng)用程序,并訪問上面的視圖文件。 一旦我們單擊任何按鈕并通過OAuth授權(quán)我們的帳戶,我們將以已知的每個用戶進行身份驗證。

結(jié)論

在本文中,我們學習了如何使用Laravel Socialite庫集成第三方登錄。 Socialite的主要目的是簡化社交媒體登錄流程,以提高用戶體驗。 我們學習了如何設(shè)置Socialite以支持Google,F(xiàn)acebook和Twitter。 我們還在控制器中檢索授權(quán)代碼,并使用請求的數(shù)據(jù)完成OAuth身份驗證。 該過程實際上將創(chuàng)建新帳戶或更新現(xiàn)有帳戶。

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點贊14 分享