一、在 Facebook Developers 建立應用程式
取得 Facebook 的 API 憑證：
1.前往 Meta for Developers 並登入。
2.點擊 「我的應用程式」 -> 「建立應用程式」。
3.選擇 「允許用戶登入 Facebook 的應用程式」（通常是「消費者」類型）。
4.在左側選單找到 「使用案例」，新增 「Facebook 登入」。
5.前往 「設定」->「基本」，獲取你的 App ID 和 App Secret。
6.重要 (本機開發)： 在「Facebook 登入」的「設定」中，將 http://127.0.0.1:8000/auth/facebook/callback 加到 「有效的 OAuth 重新導向 URI」。
7.注意：雖然 Facebook 現在要求 HTTPS，但在 localhost 開發環境下通常允許使用 HTTP。
二、建立專案與安裝相關套件
1.建立laravel 12 專案
指令：composer create-project --prefer-dist laravel/laravel laravel12FaBSSO
cd laravel12FaBSSO
2.安裝套件 Laravel Socialite
指令：composer require laravel/socialite
三、laravel 12 設定
1.編輯.env
APP_URL=http://127.0.0.1:8000
與
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel12FaBSSO
DB_USERNAME=root
DB_PASSWORD=
與
FACEBOOK_CLIENT_ID=你的App_ID
FACEBOOK_CLIENT_SECRET=你的App_Secret
FACEBOOK_REDIRECT_URI=http://127.0.0.1:8000/auth/facebook/callback
如下圖：
2.編輯config/services.php
'facebook' => [
'client_id' => env('FACEBOOK_CLIENT_ID'),
'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
'redirect' => env('FACEBOOK_REDIRECT_URI'),
],
如下圖：
3.建立 migration 與 編輯Model
指令：php artisan make:migration add_facebook_id_to_users_table --table=users
(1)編輯add_facebook_id_to_users_table.php
Schema::table('users', function (Blueprint $table) {
// 1. 新增 facebook_id 欄位，設定為 nullable 並建立索引（加速查詢）
$table->string('facebook_id')->nullable()->after('id')->unique();
// 2. 將原本的 password 欄位改為 nullable
// 注意：這需要安裝教本套件，或者在 Laravel 10+ 之後可以直接修改
$table->string('password')->nullable()->change();
});
與
Schema::table('users', function (Blueprint $table) {
// 移除欄位
$table->dropColumn('facebook_id');
// 恢復 password 為必填（視你的需求而定，通常建議恢復原狀）
$table->string('password')->nullable(false)->change();
});
如下圖：
app/Models/User.php 'facebook_id', // 加入這一行
如下圖：
4.建立控制器
(1)建立一個
SocialiteController與編輯其內容 指令：php artisan make:controller SocialiteController
use Laravel\Socialite\Facades\Socialite;use App\Models\User;use Illuminate\Support\Facades\Auth;
class SocialiteController extends Controller{ // 1. 引導使用者到 Facebook public function redirectToFacebook(){ return Socialite::driver('facebook')->redirect(); }
// 2. 處理 Facebook 回傳的資料 public function handleFacebookCallback(){ $fbUser = Socialite::driver('facebook')->user();
$user = User::updateOrCreate([ 'facebook_id' => $fbUser->id, ], [ 'name' => $fbUser->name, 'email' => $fbUser->email, // 如果是新使用者，可以給予隨機密碼或保持 null ]);
Auth::login($user);
return redirect('/dashboard'); }} 如下圖：
5.設定路由
(1)編輯 routes/web.php
use App\Http\Controllers\SocialiteController;
Route::get('auth/facebook', [SocialiteController::class, 'redirectToFacebook']);
Route::get('auth/facebook/callback', [SocialiteController::class, 'handleFacebookCallback']);
<div class="flex items-center justify-end mt-4">
<a href="{{ url('auth/facebook') }}">
使用 Facebook 帳號登入
</a>
</div>
如下圖：
資料來源：
