Laravel Socialite 實作前後端分離的第三方登入 API

本文使用網站的 FB 登入做示範
採用 Laravel 8 + Socialite 5
使用 Session 記錄狀態

不同版本可能會有些許語法及方法上的差異，請自行調整

前言

前置作業

安裝 PHP

安裝 composer

一個 Laravel project

composer create-project laravel/laravel {your-project-name}

本教學文範例

前置作業（Auth 相關）

composer require laravel/ui --dev
php artisan ui vue --auth

安裝與設定 Socialite

composer require laravel/socialite

composer require laravel/socialite:4.4.1

FB_CLIENT_ID=
FB_CLIENT_SECRET=
# 重新導向的網址請依照自己的環境及 URI 填寫
FB_REDIRECT=http://localhost:8000/auth/facebook-login-callback

Laravel\Socialite\SocialiteServiceProvider::class,

'Socialite' => Laravel\Socialite\SocialiteServiceProvider::class,

'facebook' => [
    'client_id' => env('FB_CLIENT_ID'),
    'client_secret' => env('FB_CLIENT_SECRET'),
    'redirect' => env('FB_REDIRECT'),
],

Facebook 設定

將應用程式的設定加入 Socialite

撰寫 API 及商業邏輯

資料庫新增欄位記錄

php artisan make:migration AddFbIdColumnToUsersTable

public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('fb_id', 30)->nullable()->comment('使用者的臉書 ID');  // 加入這行
        });
    }

protected $fillable = [
        // 省略
        'fb_id',
    ];

撰寫 API 與商業邏輯

// FB 登入
Route::get('/auth/facebook-login', [App\Http\Controllers\Auth\LoginController::class, 'fbLogin']);
// FB 登入 callback
Route::get('/auth/facebook-login-callback', [App\Http\Controllers\Auth\LoginController::class, 'fbLoginCallback']);

// 省略
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Session;
use Laravel\Socialite\Facades\Socialite;
// 省略
// 註解 middleware
// 省略
/*
    |--------------------------------------------------------------------------
    | Facebook Login
    |--------------------------------------------------------------------------
    */
    public function fbLogin(Request $request)
    {
        $redirect_url = Socialite::driver('facebook')
            ->scopes(['email'])  // 額外要求要使用者的電子信箱地址
            ->redirect()->getTargetUrl();
        return response()->json(['target' => [$redirect_url]], 302);
    }
    public function fbLoginCallback(Request $request)
    {
        if (is_null($request['code']) || is_null($request['state'])){
            return response()->json(['messages' => ['授權失敗']], 401);
        }
        Session::put('state', $request['state']);  // 不寫入 session 就要 stateless
        try{
            $fb_user = Socialite::driver('facebook')->user();
        } catch (\Exception $exception){
            Log::error($exception);
            return response()->json(['messages' => [strval($exception)]], 401);
        }
        // 確認使用者是否已經使用此方法註冊過
        if (User::where('facebook_id', $fb_user->getId())->exists()){  // 有
            // 登入
            Auth::guard('web')->login(User::where('facebook_id', $fb_user->getId())->first());
        } else if (User::where('email', $fb_user->getEmail())->exists()){  // 有相同 email 的使用者
            // 更新使用者資料
            DB::transaction(function () use ($fb_user){
                User::where('email', $fb_user->getEmail())->update([
                    'facebook_id' => $fb_user->getId()
                ]);
            });
            Auth::guard('web')->login(User::where('email', $fb_user->getEmail())->first());
        }else {  // 沒找到
            // 自動註冊
            DB::transaction(function () use ($fb_user){
                User::create([
                    'name' => $fb_user->getName(),
                    'email' => $fb_user->getEmail(),
                    'password' => Hash::make(uniqid('FB_')),
                    'facebook_id' => $fb_user->getId()
                ]);
            });
            Auth::guard('web')->login(User::where('email', $fb_user->getEmail())->where('facebook_id', $fb_user->getId())->first());
        }
        return response()->json(['messages' => ['登入成功！']], 200);
    }

1. 有符合的 fb_id ：直接登入。
2. 沒有 fb_id 但有重複的 email：幫使用者連結帳號後登入。
3. 以上都沒有：註冊新帳號後登入。

參考資料

結語

慣例的聲明