Laravel Socialite - Google 第三方登入

閱讀時間約 5 分鐘
GCP:
API和服務 -> 資訊主頁 -> +啟用API和服務
搜尋google+ 啟用:
設定 OAuth 同意畫面:
選擇外部後,開始填寫資料:
建立憑證:
假如有多個應用程式平台,如網頁、app,都要各自建立OAuth用戶。

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

程式的部分:


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認證頁面:
登入google之後,會自動redirect to callback:
http://yourdomain/google/auth/callback
這邊只能拿到基本資訊,比較有用的就是姓名、大頭貼、email。
可啟用Google People API取得更多資料,如性別、生日、地址等等! 在OAuth同意畫面的範圍,就可以勾選透過People API想存取的user data。

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,這邊也要改!
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
avatar-img
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
紀錄一下Laravel好用的validator。 E 本筆記參考: 1. https://stackoverflow.com/questions/31539727/laravel-password-validation-rule
在app\Mail下建立SendMail class: $php artisan make:mail SendEmail E 使用方式: E xxx.blade.php: E .env中記得mail config (以gmail為例): MAIL_MAILER=smtp MAIL_HOS
如上篇,Laravel JWT預設只能認證一種user,但實務上我們可能有不同的role需要各自做Authentication,例如我們有管理員、客戶、員工,等等。 Note: 小弟一開始是參考了網路上各種教學,但都是Laravel較舊版本的教學,經測試在Laravel 8無法work(也有可能是我
最近發現MySQL用timestamp自動設定的現在時間CURRENT_TIMESTAMP,會慢八個小時,紀錄一下怎麼解的: 解決MySQL用timestamp自動設定的現在時間,會慢八個小時的問題: mysql > set global time_zone='+8:00';   // UTC+8為
GitLab有分為CE(社區版)與EE(企業收費版)兩個版本,差別在EE有多出一些額外功能需要收費,EE的免費功能其實跟GitLab CE一樣,因此可以直接架設 GitLab EE,也許以後會想用收費功能也說不定。 1. 抓取gitlab image: $ docker pull gitlab/gi
Environment: GCP Linux version: CentOS 7 Laradock的初衷原是為了將Laravel環境容器化,但隨著時間的演進,慢慢包含了各種常用的工具了,如php-fpm, apache, nginx, mysql, phpmyadmin, redis等等這些常用的東
紀錄一下Laravel好用的validator。 E 本筆記參考: 1. https://stackoverflow.com/questions/31539727/laravel-password-validation-rule
在app\Mail下建立SendMail class: $php artisan make:mail SendEmail E 使用方式: E xxx.blade.php: E .env中記得mail config (以gmail為例): MAIL_MAILER=smtp MAIL_HOS
如上篇,Laravel JWT預設只能認證一種user,但實務上我們可能有不同的role需要各自做Authentication,例如我們有管理員、客戶、員工,等等。 Note: 小弟一開始是參考了網路上各種教學,但都是Laravel較舊版本的教學,經測試在Laravel 8無法work(也有可能是我
最近發現MySQL用timestamp自動設定的現在時間CURRENT_TIMESTAMP,會慢八個小時,紀錄一下怎麼解的: 解決MySQL用timestamp自動設定的現在時間,會慢八個小時的問題: mysql > set global time_zone='+8:00';   // UTC+8為
GitLab有分為CE(社區版)與EE(企業收費版)兩個版本,差別在EE有多出一些額外功能需要收費,EE的免費功能其實跟GitLab CE一樣,因此可以直接架設 GitLab EE,也許以後會想用收費功能也說不定。 1. 抓取gitlab image: $ docker pull gitlab/gi
Environment: GCP Linux version: CentOS 7 Laradock的初衷原是為了將Laravel環境容器化,但隨著時間的演進,慢慢包含了各種常用的工具了,如php-fpm, apache, nginx, mysql, phpmyadmin, redis等等這些常用的東
你可能也想看
Google News 追蹤
Thumbnail
你有幾個 Google 帳號?Google 提供許多免費的應用程式,包括大家最常使用的地圖、YouTube、 email、日曆、Meet、Gemini、雲端硬碟、翻譯、文件、Google表單…等,如果你還沒有申請過 Google 帳號,請 抽空到此申請,免費體驗各種功能豐富的應用程式。 下圖右邊都
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
這是一篇介紹如何使用Google Maps API在網頁上呈現地圖,並進行店家名稱的搜尋的文章。內容包含如何申請Google Cloud Platform的API金鑰、初始化地圖、設定搜尋功能等步驟。文章中提供了部分程式碼範例,並附上圖片說明操作過程。
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
Thumbnail
本篇文章將描述如何產生GCP的服務帳戶金鑰,並利用該金鑰在DBeaver或是其他透過支援JDBC的軟體連接到BigQuery服務。
Thumbnail
在Google Analytics中,您可以授予其他使用者對您的資源(例如網站或應用程式)的存取權限。這樣他們就可以查看和分析資源的數據。下面是在Google Analytics中新增資源存取權限的步驟:
Thumbnail
在Google Analytics中新增資源存取權限非常重要,這樣您可以控制誰可以訪問和管理您的分析資源。以下是在Google Analytics中新增資源存取權限的步驟
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
你有幾個 Google 帳號?Google 提供許多免費的應用程式,包括大家最常使用的地圖、YouTube、 email、日曆、Meet、Gemini、雲端硬碟、翻譯、文件、Google表單…等,如果你還沒有申請過 Google 帳號,請 抽空到此申請,免費體驗各種功能豐富的應用程式。 下圖右邊都
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
這是一篇介紹如何使用Google Maps API在網頁上呈現地圖,並進行店家名稱的搜尋的文章。內容包含如何申請Google Cloud Platform的API金鑰、初始化地圖、設定搜尋功能等步驟。文章中提供了部分程式碼範例,並附上圖片說明操作過程。
Thumbnail
需求情境: 為了讓多人使用 App,必須有驗證程序,以識別特定使用者,存取各自擁有的資源。 解決方案: 引用 google 所提供的雲端服務平台 Firebase,其中有多種驗證功能可選用。基於個人對 google 的偏愛,決定先採用 google signin 的方法,實作 login lo
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
Thumbnail
本篇文章將描述如何產生GCP的服務帳戶金鑰,並利用該金鑰在DBeaver或是其他透過支援JDBC的軟體連接到BigQuery服務。
Thumbnail
在Google Analytics中,您可以授予其他使用者對您的資源(例如網站或應用程式)的存取權限。這樣他們就可以查看和分析資源的數據。下面是在Google Analytics中新增資源存取權限的步驟:
Thumbnail
在Google Analytics中新增資源存取權限非常重要,這樣您可以控制誰可以訪問和管理您的分析資源。以下是在Google Analytics中新增資源存取權限的步驟
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊