Laravel開發：如何使用Laravel Socialite快速整合第三方登入？

Laravel是一種流行的PHP框架，用於開發Web應用程式。其中一個最常見的功能是在應用程式中整合第三方登入。這樣做可以為使用者提供更好的使用者體驗，減少註冊重複流程。

在本文中，我們將討論如何使用Laravel Socialite庫整合第三方登入。

什麼是Laravel Socialite？

Laravel Socialite是Laravel框架的擴充包，它允許開發人員在應用程式中輕鬆實現第三方登入。它支援各種社交平台，如Facebook，Twitter，LinkedIn等。

Socialite如何運作？

Socialite遵循OAuth協定。 OAuth是一種授權框架，它允許使用者將其帳戶資訊從一個站點傳遞到另一個站點，而無需共享其憑證。 OAuth需要使用者授權，在這種情況下，使用者將授權應用程式存取其社交媒體帳戶。

Socialite授權工作原理如下：

1. 使用者點擊「登入」按鈕，該按鈕將指向Socialite授權：

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

2. Socialite挑戰用戶以授權存取其社交媒體帳戶； Socialite將重定向到社交媒體網站；

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

3.用戶授權自己的帳戶，社交媒體網站重定向到回調URL;

public function redirectToProvider($provider)
{
  return Socialite::driver($provider)->redirect();
}

4. Socialite將帶有授權代碼的回調URL傳回應用程序，應用程式將使用授權代碼請求OAuth存取令牌；

   public function handleProviderCallback($provider)
   {
   $socialUser = Socialite::driver($provider)->user();
   }

5. #完成認證，Socialite將返回用戶授權的令牌，並將其傳遞到應用程式中。

如何在Laravel中使用Socialite？

使用Socialite支援的任何社交媒體平台，您需要在以下兩個地方設定應用程式憑證或金鑰：

    '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')
    ]

應用程式憑證或金鑰旨在驗證應用程式的身份。

我們將在config / services.php檔案中進行此設定。

步驟1：建立授權路由

建立用於觸發Socialite授權的路由：

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

通常會將這些路由放置在一個名為SocialController的控制器中，該控制器用於處理Socialite授權和回調。

步驟2：建立SocialController

就像所有控制器一樣，我們需要建立使用良好的程式碼實踐的SocialController。

使用以下命令來建立控制器：

php artisan make:controller AuthSocialController

最終，這將使我們可以使用授權提供者進行授權並回調我們的路由。

在SocialController中，我們定義了兩個方法，redirectToProvider和handleProviderCallback。第一個是重新導向至授權提供者。隨後的回呼函數則為具有授權程式碼的用戶端擷取資訊並完成驗證的用戶端提供回呼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的視圖控制器為我們的應用程式建立一個簡單的視圖。

使用下列指令來建立檢視控制器：

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：建立登入視圖

現在我們的控制器和路由都已準備就緒。現在我們需要建立用於登入的視圖。

建立一個視圖檔案並將其命名為social_login.blade.php。我們需要顯示可以觸發第三方登入的按鈕。在這種情況下，我們將展示3個按鈕，以支援Google，Facebook和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="{{ route('social.oauth', ['provider' => 'google']) }}" class="btn btn-google">Sign in with google</a>
                        <a href="{{ route('social.oauth', ['provider' => 'facebook']) }}" class="btn btn-facebook">Sign in with Facebook</a>
                        <a href="{{ route('social.oauth', ['provider' => 'twitter']) }}" class="btn btn-twitter">Sign in with twitter</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

頂部使用佈局檔案。當使用者點擊任何按鈕時，我們將它們重新導向到授權提供者。在SocialController respond中，我們將獲得使用者資料並完成身份驗證。

步驟5：建立新路由

現在我們需要建立新路由以處理上面的視圖檔案。

修改web.php文件，如下所示：

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

我們應該注意，上面的路由透過名稱進行標識，以便可以在控制器程式碼中引用它們。

步驟6：測試

現在我們已經設定了我們的社群媒體標識，在測試應用程式之前，我們需要透過.env檔案對我們的應用程式進行設定。

要設定.env文件，請新增以下程式碼：

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」取代實際的應用程式識別碼。之後，我們可以透過命令列啟動我們的應用程序，並存取上面的視圖文件。一旦我們單擊任何按鈕並透過OAuth授權我們的帳戶，我們將以已知的每個使用者進行身份驗證。

結論

在本文中，我們學習如何使用Laravel Socialite庫整合第三方登入。 Socialite的主要目的是簡化社群媒體登入流程，以提高使用者體驗。我們學習瞭如何設定Socialite以支援Google，Facebook和Twitter。我們也會在控制器中檢索授權代碼，並使用要求的資料完成OAuth身份驗證。該過程實際上將建立新帳戶或更新現有帳戶。

以上是Laravel開發：如何使用Laravel Socialite快速整合第三方登入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！