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中。
需特別注意,要記得設定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來拿。
為什麼會看到廣告
avatar-img
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
Laravel中透過SMTP寄信,出現類似這種錯誤訊息: Failed to authenticate on SMTP server with username \"xxx@gmail.com\" using 3 possible authenticators. Authenticator LOGI
從瀏覽器console看到類似這個error:  ..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 表示遇到CORS的
接續上一篇,navbar元件其實寫的不是很好,還不能說是可真正reuse,我們把程式改成這樣,透過props傳入navbar的items,定義好navbar title, li的href/name/active等等,就可以達到navbar元件無須改code就能重用的目的! Navbar 元件中用m
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
Laravel中透過SMTP寄信,出現類似這種錯誤訊息: Failed to authenticate on SMTP server with username \"xxx@gmail.com\" using 3 possible authenticators. Authenticator LOGI
從瀏覽器console看到類似這個error:  ..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 表示遇到CORS的
接續上一篇,navbar元件其實寫的不是很好,還不能說是可真正reuse,我們把程式改成這樣,透過props傳入navbar的items,定義好navbar title, li的href/name/active等等,就可以達到navbar元件無須改code就能重用的目的! Navbar 元件中用m
本文章目的是希望可以用最簡單的範例,來讓大家了解React到底是什麼東西,有什麼好處,並且套用bootstrap的navbar,加上自己客製的css,來達到component重用的目的! 用React來開發網頁,必須把目標拆解成一個個component,最後組合起來就成為一個網站! 假如我們目標是要
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
你可能也想看
Google News 追蹤
Thumbnail
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
Simple Storage Service (S3) 是 AWS 最常應用到的服務,只要是需要將檔案上傳到雲端的狀況都可以使用S3,本篇文章將介紹如何設定與使用AWS S3。
Thumbnail
在使用laravel中的Queue job的時候 如果希望job中斷還可以重新啟動這個時候就會需要用到Supervisor了 本篇文章為您帶來如何使用Supervisor執行Laravel的queue:work的教學
Thumbnail
有的時候,會希望在物件導向中對原生的Class新增功能的時候,大多我們都會寫一個新的class並繼承。 但是其實Laravel提供了一個不同的方式,讓我們可以在常用的Class上,直接新增想要的function,那就是macro。
Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性,並輕鬆地進行結構變更
Thumbnail
待業中後,發現時間變很多就開始東看看西看看,思考著要如何更深入理解Laravel框架的運用,而在Laravel框架中哪些部分是框架替我們做了哪些處理,推薦一個影片給大家一起學習理解。
有一種緣分, 叫咫尺天涯,螢幕兩端; 有一種網友, 叫素未謀面,真心不減。 有一種友情, 叫翻看臉書,默默思念。 有一種在乎, 叫評論留言,次次按讚。 我不知道妳的真名, 也不清楚妳的年齡, 可是,每天看見妳的頭像, 就不會感到陌生。 Facebook,拉近了妳我的距離, ,分享了彼此的心情。 一直
Thumbnail
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
Simple Storage Service (S3) 是 AWS 最常應用到的服務,只要是需要將檔案上傳到雲端的狀況都可以使用S3,本篇文章將介紹如何設定與使用AWS S3。
Thumbnail
在使用laravel中的Queue job的時候 如果希望job中斷還可以重新啟動這個時候就會需要用到Supervisor了 本篇文章為您帶來如何使用Supervisor執行Laravel的queue:work的教學
Thumbnail
有的時候,會希望在物件導向中對原生的Class新增功能的時候,大多我們都會寫一個新的class並繼承。 但是其實Laravel提供了一個不同的方式,讓我們可以在常用的Class上,直接新增想要的function,那就是macro。
Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性,並輕鬆地進行結構變更
Thumbnail
待業中後,發現時間變很多就開始東看看西看看,思考著要如何更深入理解Laravel框架的運用,而在Laravel框架中哪些部分是框架替我們做了哪些處理,推薦一個影片給大家一起學習理解。
有一種緣分, 叫咫尺天涯,螢幕兩端; 有一種網友, 叫素未謀面,真心不減。 有一種友情, 叫翻看臉書,默默思念。 有一種在乎, 叫評論留言,次次按讚。 我不知道妳的真名, 也不清楚妳的年齡, 可是,每天看見妳的頭像, 就不會感到陌生。 Facebook,拉近了妳我的距離, ,分享了彼此的心情。 一直