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
十一月底正好要去斯里蘭卡,之前趁雙十一時就把旅行必備東西陸續買齊。 現在我依然在斯里蘭卡的旅行路上,邊當旅人邊推薦旅行好物給你們!(這篇記得收藏起來喔!)
Thumbnail
十一月底正好要去斯里蘭卡,之前趁雙十一時就把旅行必備東西陸續買齊。 現在我依然在斯里蘭卡的旅行路上,邊當旅人邊推薦旅行好物給你們!(這篇記得收藏起來喔!)
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 第三方登入的需求,只好把之前隨便看看的東西撿回來研究並實作。不過我找到多數現存的中文文章
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News