Laravel設定
1. 安裝Socialite:
在之前的google第三方登入文章有提到,不再贅述。
2. .env新增:
FB_CLIENT_ID=xxx
FB_CLIENT_SECRET=xxx
FB_REDIRECT=http://yourdomain/facebook/authCallback
'facebook' => [
'client_id' => env('FB_CLIENT_ID'),
'client_secret' => env('FB_CLIENT_SECRET'),
'redirect' => env('FB_REDIRECT'),
]
4. config/app.php providers新增:
Laravel\Socialite\SocialiteServiceProvider::class,
5. config/app.php aliases新增:
'Socialite' => Laravel\Socialite\SocialiteServiceProvider::class,
6. route/web.php新增:
Route::get('/facebook/auth', [FBSocialiteController::class, 'fbLogin']);
Route::get('/facebook/authCallback', [FBSocialiteController::class, 'fbLoginCallback']);
FB相關設定
1. 註冊FB開發者帳號:
https://developers.facebook.com/
2. 首頁 -> 我的應用程式 -> 建立應用程式
照著圖片步驟填,最後拿到應用程式編號與密鑰,填回Laravel config中。








需特別注意,要記得設定OAuth callback url:
上述提到的.env中FB_REDIRECT這串http://yourdomain/facebook/authCallback

Source code

注意:
回傳的avatar url後面要加上&access_token=yourtoken
帶上拿到的token,才能看到正常圖片,不然會看到這樣灰底的大頭貼:

後記: 設定想存取什麼資料
public function fbLogin(){
return Socialite::driver('facebook')->scopes(['user_friends'])->redirect();
}
這邊可以改成->scopes(['user_friends'])之類的,來設定想取得user什麼樣的資料,user登入時會跳出視窗詢問同不同意,例如user_friends就是朋友名單。
user同意登入後,callback取得的token,就有權限可以存取user朋友資料,需再額外存取graph api帶上token來拿。
本筆記參考:
1. https://hms5232.medium.com/laravel-socialite-%E5%AF%A6%E4%BD%9C%E5%89%8D%E5%BE%8C%E7%AB%AF%E5%88%86%E9%9B%A2%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E7%99%BB%E5%85%A5-api-284ce2819667
2. https://github.com/laravel/socialite/issues/487