哈！伸港創作者！哈: 在本機Laravel 12 中實作 FaceBook OAuth2 登入

系列文章：
1.利用 laravel 12 做一個類似Google文件的簡單範例
2.在本機Laravel 12 中實作 Google OAuth2 登入
3.如何在 Laravel 12 使用 Gmail SMTP 寄信
4.在本機Laravel 12 中實作 FaceBook OAuth2 登入
5.在本機 laravel 12 ，上傳很多PDF，上傳之後可以自己排序，合併之後下載-方法一
6.在本機 laravel 12 ，上傳很多PDF，上傳之後可以自己排序，合併之後下載-方法二

一、在 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();
        });

如下圖：

(2) 編輯app/Models/User.php

        'facebook_id', // 加入這一行

如下圖：

(3)執行 php artisan migrate

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

如下圖：

6.編輯 resources/views/welcome.blade.php

                <div class="flex items-center justify-end mt-4">
                    <a href="{{ url('auth/facebook') }}">
                        使用 Facebook 帳號登入
                    </a>
                </div>