Laravel Socialite - Google 第三方登入

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

GCP:
API和服務 -> 資訊主頁 -> +啟用API和服務

raw-image

搜尋google+ 啟用:

raw-image
raw-image

設定 OAuth 同意畫面:

raw-image
raw-image

選擇外部後,開始填寫資料:

raw-image
raw-image
raw-image


raw-image


建立憑證:

raw-image

假如有多個應用程式平台,如網頁、app,都要各自建立OAuth用戶。

已授權的重新導向URI:
使用者透過 Google 完成驗證程序之後,系統就會將他們重新導向這個路徑,這邊是callback,稍後看程式碼就知道了。

ex: http://yourdomain/google/auth/callback

raw-image
raw-image



程式的部分:


1. 安裝Socialite
$ composer require laravel/socialite

2. 設定

config/services.php加入

'google' => [
  'client_id' => env('GOOGLE_CLIENT_ID'),  'client_secret' => env('GOOGLE_CLIENT_SECRET'),  'redirect' => 'http://yourdomain/google/auth/callback',
],

redirect: 使用者透過 Google 完成驗證程序之後,系統就會將他們重新導向這個路徑,跟上述的一樣。

.env中記得設定 GOOGLE_CLIENT_ID=xxx GOOGLE_CLIENT_SECRET=xxx

3. Route(web.php)

因為會用到session,要走web middleware。


4. Controller



如果要帶入額外參數,可以這樣:

Route::get('/google/auth/{my_param}', ...);

public function redirectToProvider($my_param){
  return Socialite::driver('google')
->with(['state' => 'my_param='. $my_param])->redirect();
}

然後在callback接:

public function handleProviderCallback(){
  $state = request()->input('state');
parse_str($state, $result);
$my_param = $result['my_param'];
}


Demo:

首先url輸入: http://yourdomain/google/auth

之後就會導向google認證頁面:

raw-image


登入google之後,會自動redirect to callback:
http://yourdomain/google/auth/callback

raw-image

這邊只能拿到基本資訊,比較有用的就是姓名、大頭貼、email。


可啟用Google People API取得更多資料,如性別、生日、地址等等! 在OAuth同意畫面的範圍,就可以勾選透過People API想存取的user data。

raw-image



Note:

如果看到accounts.google.com redirected you too many times這個瀏覽器錯誤,主要是因為要多帶額外的參數到callback,才會發生這個錯誤,本範例的code沒有帶參數所以不會發生,解法是要改callback的route path:

原本是這樣:
Route::get('/google/auth', ...);
Route::get('/google/auth/callback', ...);

改為:
Route::get('/google/authCallback', ...);

別忘了在GCP -> API和服務 -> 憑證 ->已授權的重新導向URI,這邊也要改!



本筆記參考:
1. https://blog.scottchayaa.com/post/2018/11/14/google-oauth-tutorial/
2. https://github.com/laravel/socialite/issues/373
3. https://stackoverflow.com/questions/64908477/accounts-google-com-redirected-you-too-many-times-in-laravel-socialite



留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
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
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
最近剛好分配一個需求,要批次更新一些基礎設定資料,而新系統基礎設定資料都統一由別的團隊維護在Google Sheet 上,一開始是要我寫 Laravel Seeder 塞資料表,後來發現也太多數據要批次更新了,數據要對到何時何年,乾脆來研究串 Google Sheet API 整批塞入在對總行數就好
Thumbnail
最近剛好分配一個需求,要批次更新一些基礎設定資料,而新系統基礎設定資料都統一由別的團隊維護在Google Sheet 上,一開始是要我寫 Laravel Seeder 塞資料表,後來發現也太多數據要批次更新了,數據要對到何時何年,乾脆來研究串 Google Sheet API 整批塞入在對總行數就好
Thumbnail
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
一個APP在規劃的時候可能覺得主要功能就只有這一兩個,實作起來應該不難,卻忘了現代人的胃口已經越養越大,很多不在你預期內但對於使用者來說卻是很基本的功能;另一種是商店上架或是第三方要求的必要功能。今天我們來探討第三種必要功能:OAuth登入。
Thumbnail
1. 使用composer安裝 2. publish the configuration 在config資料夾中會多出一個google-calendar.php 3. 取得Google API credentials (1) 到Google Cloud Platform頁面,選擇專案。 後記:
Thumbnail
1. 使用composer安裝 2. publish the configuration 在config資料夾中會多出一個google-calendar.php 3. 取得Google API credentials (1) 到Google Cloud Platform頁面,選擇專案。 後記:
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
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
如上篇,只能拿到基本的資料,如姓名、email、大頭貼等等。 想取得更詳細的資料,如年齡、性別、電話等等,則需透過Google People API來取得,PHP的話有Google APIs Client Library for PHP可以使用。 以Laravel為例: 先安裝google api
Thumbnail
如上篇,只能拿到基本的資料,如姓名、email、大頭貼等等。 想取得更詳細的資料,如年齡、性別、電話等等,則需透過Google People API來取得,PHP的話有Google APIs Client Library for PHP可以使用。 以Laravel為例: 先安裝google api
Thumbnail
GCP: API和服務 -> 資訊主頁 -> +啟用API和服務 搜尋google+ 啟用: 設定 OAuth 同意畫面: 選擇外部後,開始填寫資料: 建立憑證: 假如有多個應用程式平台,如網頁、app,都要各自建立OAuth用戶。 已授權的重新導向URI: 使用者透過 G
Thumbnail
GCP: API和服務 -> 資訊主頁 -> +啟用API和服務 搜尋google+ 啟用: 設定 OAuth 同意畫面: 選擇外部後,開始填寫資料: 建立憑證: 假如有多個應用程式平台,如網頁、app,都要各自建立OAuth用戶。 已授權的重新導向URI: 使用者透過 G
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News