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
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Overview 1. Request Wallet Connection from Metamask get account function get account function 2. Set your smart contract address injected provide
Thumbnail
眾多網路工具下,部落格和FB粉專是常見的兩個選擇。本文釐清部落格與FB粉專的差異,以及它們的使用方式和特點,讓讀者可以更好地選擇適合自己的數位平台,進行個人或品牌推廣,以達到更好的獲利變現。
Thumbnail
Facebook直播是一個強大的工具,可以讓您與您的觀眾即時互動和分享內容。如果您想在您的網站上舉辦一個直播活動,將Facebook直播嵌入到您的網站中是一個很好的選擇。在本文中,我們將向您介紹如何在Facebook上開啟直播並將其嵌入到您的網站中。
Thumbnail
以下轉貼自我臉書 3/30 晚上貼文,剛好有些也發生在方格子
Thumbnail
你有在臉書開設粉絲專頁嗎?有設好用戶名稱嗎 如果沒設的粉專,會像以下網址是一串的數字 profile.php?id=61555629173460 如:https://www.facebook.com/profile.php?id=61555629173460 若有設用戶名稱,會像以下的網址是英
Thumbnail
臉書包括Facebook、Instagram、Threads和Messenger,在3月5日深夜11時20分左右突然發生故障,導致用戶被強制登出,即使輸入正確密碼也無法登入。
Thumbnail
有的時候,會希望在物件導向中對原生的Class新增功能的時候,大多我們都會寫一個新的class並繼承。 但是其實Laravel提供了一個不同的方式,讓我們可以在常用的Class上,直接新增想要的function,那就是macro。
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Overview 1. Request Wallet Connection from Metamask get account function get account function 2. Set your smart contract address injected provide
Thumbnail
眾多網路工具下,部落格和FB粉專是常見的兩個選擇。本文釐清部落格與FB粉專的差異,以及它們的使用方式和特點,讓讀者可以更好地選擇適合自己的數位平台,進行個人或品牌推廣,以達到更好的獲利變現。
Thumbnail
Facebook直播是一個強大的工具,可以讓您與您的觀眾即時互動和分享內容。如果您想在您的網站上舉辦一個直播活動,將Facebook直播嵌入到您的網站中是一個很好的選擇。在本文中,我們將向您介紹如何在Facebook上開啟直播並將其嵌入到您的網站中。
Thumbnail
以下轉貼自我臉書 3/30 晚上貼文,剛好有些也發生在方格子
Thumbnail
你有在臉書開設粉絲專頁嗎?有設好用戶名稱嗎 如果沒設的粉專,會像以下網址是一串的數字 profile.php?id=61555629173460 如:https://www.facebook.com/profile.php?id=61555629173460 若有設用戶名稱,會像以下的網址是英
Thumbnail
臉書包括Facebook、Instagram、Threads和Messenger,在3月5日深夜11時20分左右突然發生故障,導致用戶被強制登出,即使輸入正確密碼也無法登入。
Thumbnail
有的時候,會希望在物件導向中對原生的Class新增功能的時候,大多我們都會寫一個新的class並繼承。 但是其實Laravel提供了一個不同的方式,讓我們可以在常用的Class上,直接新增想要的function,那就是macro。
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊