Laravel Socialite - Facebook 第三方登入

更新於 發佈於 閱讀時間約 4 分鐘

Laravel設定


1. 安裝Socialite:
在之前的google第三方登入文章有提到,不再贅述。

2. .env新增:
FB_CLIENT_ID=xxx
FB_CLIENT_SECRET=xxx
FB_REDIRECT=http://yourdomain/facebook/authCallback

3. config/services.php新增:
'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中。

raw-image
raw-image
raw-image
raw-image
raw-image
raw-image
raw-image
raw-image

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

raw-image

Source code

raw-image

注意:

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

raw-image

後記: 設定想存取什麼資料

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

留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
21會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
本篇純粹紀錄實作流程,以方便未來可以照此版繼續優化改進作法,這篇會使用Laravel 9版本並搭配Boostrap 5來做開發。 發現將每一次的實作作筆記,回頭再看的時候,就可以發現實作差異並進行改正,沒搞懂的底層操作也能在覆盤的時候理解,建議大家都要筆記自己的實作流程。
Thumbnail
本篇純粹紀錄實作流程,以方便未來可以照此版繼續優化改進作法,這篇會使用Laravel 9版本並搭配Boostrap 5來做開發。 發現將每一次的實作作筆記,回頭再看的時候,就可以發現實作差異並進行改正,沒搞懂的底層操作也能在覆盤的時候理解,建議大家都要筆記自己的實作流程。
Thumbnail
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
建立middleware指令: 假設建立一個Test middleware: 新增的middleware檔案會在app/Http/Middleware路徑中。 註冊Middleware: Global Middleware: 2. Route Middleware route group用法如下:
Thumbnail
建立middleware指令: 假設建立一個Test middleware: 新增的middleware檔案會在app/Http/Middleware路徑中。 註冊Middleware: Global Middleware: 2. Route Middleware route group用法如下:
Thumbnail
若是用第一種callback方法,response json要包含連結跟unique code,這個連結是要給user查詢刪除狀態用的,從官方提供的範例PHP程式碼可得知。 Note: 別忘了圖1的「資料刪除回呼網址」記得填你的callback url。
Thumbnail
若是用第一種callback方法,response json要包含連結跟unique code,這個連結是要給user查詢刪除狀態用的,從官方提供的範例PHP程式碼可得知。 Note: 別忘了圖1的「資料刪除回呼網址」記得填你的callback url。
Thumbnail
如果要使用FB Login等FB外掛服務,一定要申請一組FB APP,才能夠執行後台的FB登入功能,下方為FB APP的申請流程教學,一起來觀看學習吧!
Thumbnail
如果要使用FB Login等FB外掛服務,一定要申請一組FB APP,才能夠執行後台的FB登入功能,下方為FB APP的申請流程教學,一起來觀看學習吧!
Thumbnail
Laravel設定 1. 安裝Socialite: 在之前的google第三方登入文章有提到,不再贅述。 2. .env新增: FB_CLIENT_ID=xxx FB_CLIENT_SECRET=xxx FB_REDIRECT=http://yourdomain/facebook/authCall
Thumbnail
Laravel設定 1. 安裝Socialite: 在之前的google第三方登入文章有提到,不再贅述。 2. .env新增: FB_CLIENT_ID=xxx FB_CLIENT_SECRET=xxx FB_REDIRECT=http://yourdomain/facebook/authCall
Thumbnail
本文使用網站的 FB 登入做示範 採用 Laravel 8 + Socialite 5 使用 Session 記錄狀態 不同版本可能會有些許語法及方法上的差異,請自行調整 前言 最近因為碰到需要實作 OAuth 第三方登入的需求,只好把之前隨便看看的東西撿回來研究並實作。不過我找到多數現存的中文文章
Thumbnail
本文使用網站的 FB 登入做示範 採用 Laravel 8 + Socialite 5 使用 Session 記錄狀態 不同版本可能會有些許語法及方法上的差異,請自行調整 前言 最近因為碰到需要實作 OAuth 第三方登入的需求,只好把之前隨便看看的東西撿回來研究並實作。不過我找到多數現存的中文文章
Thumbnail
GCP: API和服務 -> 資訊主頁 -> +啟用API和服務 搜尋google+ 啟用: 設定 OAuth 同意畫面: 選擇外部後,開始填寫資料: 建立憑證: 假如有多個應用程式平台,如網頁、app,都要各自建立OAuth用戶。 已授權的重新導向URI: 使用者透過 G
Thumbnail
GCP: API和服務 -> 資訊主頁 -> +啟用API和服務 搜尋google+ 啟用: 設定 OAuth 同意畫面: 選擇外部後,開始填寫資料: 建立憑證: 假如有多個應用程式平台,如網頁、app,都要各自建立OAuth用戶。 已授權的重新導向URI: 使用者透過 G
Thumbnail
如上篇,Laravel JWT預設只能認證一種user,但實務上我們可能有不同的role需要各自做Authentication,例如我們有管理員、客戶、員工,等等。 Note: 小弟一開始是參考了網路上各種教學,但都是Laravel較舊版本的教學,經測試在Laravel 8無法work(也有可能是我
Thumbnail
如上篇,Laravel JWT預設只能認證一種user,但實務上我們可能有不同的role需要各自做Authentication,例如我們有管理員、客戶、員工,等等。 Note: 小弟一開始是參考了網路上各種教學,但都是Laravel較舊版本的教學,經測試在Laravel 8無法work(也有可能是我
Thumbnail
本文模擬user註冊的情境來簡單演示,在Laravel中如何透過ajax來存取資料,以post request為例。 前端透過post把user資料送到controller中,並且透過model把資料塞進DB,最後回傳json response。 完整source cod
Thumbnail
本文模擬user註冊的情境來簡單演示,在Laravel中如何透過ajax來存取資料,以post request為例。 前端透過post把user資料送到controller中,並且透過model把資料塞進DB,最後回傳json response。 完整source cod
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News