Laravel 實作第三方登入

Laravel Breeze

Laravel Breeze 是 Laravel 身份驗證功能的最小、簡單實現，包括登錄、註冊、密碼重置、電子郵件驗證和密碼確認。Laravel Breeze 的默認視圖層由使用 Tailwind CSS 樣式的簡單 Blade 模板組成，利用此套件生成基本登入登出很方便。

安裝

首先，創建一個新的 Laravel 應用程序，配置您的數據庫，並運行您的數據庫遷移：

laravel new example

cd example

php artisan migrate

創建新的 Laravel 應用程序後，您可以使用 Composer 安裝 Laravel Breeze：

composer require laravel/breeze --dev

安裝完成後，可以運行 breeze:installArtisan 指令。此指令將身份驗證視圖、路由、控制器和其他資源發佈到我們的應用程序。

php artisan breeze:install

npm install
npm run dev
php artisan migrate

之後執行php artisan serve到 login 和 register 路由就可以看到基本的登入註冊畫面

Laravel Socialite

介紹

這個套件是最常拿來做 laravel 第三方登入的套件，向 OAuth 提供者進行身份驗證。Socialite 目前支持通過 Facebook、Twitter、LinkedIn、Google、GitHub、GitLab 和 Bitbucket 進行身份驗證。

如果還想要串其他的第三方登入，可以到Socialite Providers查看，只需要載入套件，添加 provider 事件監聽器，剩餘做法與以下範例相同。

安裝

使用 composer 安裝包
composer require laravel/socialite

配置

配置檔案會生成在config/services.php，並應使用鍵 facebook，twitter，linkedin，google，github，gitlab，或者 bitbucket，根據您的應用需要提供：

'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
    'redirect' => env('FACEBOOK_REDIRECT_URI'),
],

到.env 設定

FACEBOOK_CLIENT_ID=""
FACEBOOK_CLIENT_SECRET=""
FACEBOOK_REDIRECT_URI="http://localhost:8000/auth/callback"

路由

要使用 OAuth 提供程序對用戶進行身份驗證，您將需要兩條路由：一條用於將用戶重定向到 OAuth 提供程序，另一條用於在身份驗證後接收來自提供程序的回調。下面的示例控制器演示了兩個路由的實現：

use Laravel\Socialite\Facades\Socialite;

Route::get('/auth/redirect', function () {
    return Socialite::driver('facebook')->redirect();
});

Route::get('/auth/callback', function () {
    $user = Socialite::driver('facebook')->user();

    // $user->token
});

Facaderedirect提供的方法Socialite負責將用戶重定向到 OAuth 提供者，而該 user 方法將讀取傳入的請求並在用戶通過身份驗證後從提供者處檢索用戶的信息。

檢索用戶詳細信息

在用戶重定向回您的身份驗證回調路由後，您可以使用 Socialite 的 user 方法檢索用戶的詳細信息。該 user 方法返回的用戶對象提供了多種屬性和方法，您可以使用這些屬性和方法將有關用戶的信息存儲在您自己的數據庫中。

use Laravel\Socialite\Facades\Socialite;

Route::get('/auth/callback', function () {
    $user = Socialite::driver('github')->user();

    // OAuth 2.0 providers...
    $token = $user->token;
    $refreshToken = $user->refreshToken;
    $expiresIn = $user->expiresIn;

    // OAuth 1.0 providers...
    $token = $user->token;
    $tokenSecret = $user->tokenSecret;

    // All providers...
    $user->getId();
    $user->getNickname();
    $user->getName();
    $user->getEmail();
    $user->getAvatar();
});

申請 Facebook 登入

到Facebook for Developers進行申請

創建一個應用程式

輸入應用程式名稱

選擇 facebook 登入

到應用程式設定為本地

在紅色框框輸入你的網域，因我在本地測試所以為localhost

藍色框框的資料填入.env 檔案中

如果不是在本機端開發，記得在設定填入 callback 的 Url

let go 測試

首先在login.blade.php加上一個 a tag

<a class="btn btn-primary" href="{{ route('socialite.redirect') }}">
  Facebook 登入
</a>

設定好路由，就可以開始拉，

懶得新建資料表所以我直接去資料庫把 user 的 password 欄位改成允許 null

這裡的 stateless()意味著沒有存儲 sessions，官方稱為 Stateless Authentication(無狀態認證)

無狀態身份驗證不適用於 Twitter 驅動程序，它使用 OAuth 1.0 進行身份驗證。

use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
use App\Providers\RouteServiceProvider;
use App\Models\User;

Route::get('/auth/redirect', function () {
    return Socialite::driver('facebook')->stateless()->redirect();
})->name('socialite.redirect');

Route::get('/auth/callback', function () {
    $User = Socialite::driver('facebook')->stateless()->user();
    $users = User::where(['email' => $User->email])->first();
    if($users){
                Auth::login($users);
                return redirect()->intended(RouteServiceProvider::HOME);
            }else{
    $user = User::create([
                    'name'          => $User->name,
                    'email'         => $User->email,
                ]);
                Auth::login($user);
                return redirect()->intended(RouteServiceProvider::HOME);
        }

    // $user->token
});