[ASP.NET] 如何串接 Google Api 帳戶登入

串接第三方登入是方便使用者快速建立帳號登入系統,直接使用外部帳號登入到系統內,節省創建帳號時間,降低使用者操作門檻。

在 ASP.NET Core 可透過 OAuth 物件來串接外部用戶驗證,可串接的主流平台有 Google, Facebook, Microsoft, Twitter。

使用 Google 登入可以在網頁上建立 Google 登入圖示,登入後系統取得 Google 個人資訊,例如 Email, 姓名, 頭像圖示等資訊。

Google Api 帳戶登入

接下來我會示範如何申請 Google Api 然後在 ASP.MVC Core MVC 登入 Google 帳號。

建立 Google Api 專案

要使用 Google 登入,需要先在 Google 平台上建立一個專案,開啟 Google Cloud Platform 平台,找到「建立專案」。

建立 Google Api 專案

輸入「專案名稱」即可建立專案。

OAuth 同意畫面

在建立登入授權之前,需要先同意 OAuth 授權,確認上方選擇要授權的專案,點選左邊「OAuth 同意畫面」。

OAuth 同意畫面

授權方式這裡,我們要提供給所有擁有 Google 帳戶的人可以登入,所以選擇「外部」。

選擇「外部」

接著輸入應用程式名稱及郵件等基本資料。

應用程式名稱會顯示在使用者同意登入畫面中,所以建議以產品或網站名稱命名為主。

應用程式標誌可以放產品的 Logo。

應用程式網域就貼上網站的首頁、隱私權政策還有服務條款連結。

在下方的「授權網域」是安全性的設定,Google 只接受已授權的網站發送串接驗證,其他網域發送時則會失敗。
所以在申請 Google 第三方登入之前,記得先註冊網域。

授權網域

如果你尚未擁有自己的網域,可參考我另一篇文章如何購買網域

OAuth 範圍

在「範圍」的設定要增加使用者授權登入後,可以讓系統存取用戶資料的範圍,可以依照需求勾選。

OAuth 範圍

通常我會勾選基本的資訊,例如 Email, 姓名, Openid 等範圍,只要取得登入者基本資訊就好。
在下面有「更新」鈕儲存。

測試使用者

在「測試使用者」這裡可以加入要測試的 Eamil 帳號為測試使用者。
這只有在發佈前的測試階段有效。但我自己實測時發現未登錄的使用者也可以登入取得授權。

測試使用者

接著在確認畫面瀏覽一下剛剛的設定就完成了。
此時剛完成的 OAuth 狀態為「測試中」,可以自己調整是否需要發佈。

OAuth 同意畫面

建立 OAuth 用戶端 ID

在完成同意設定之後,就可以繼續新增 OAuth 用戶。在左邊點「憑證」,然後點「建立憑證」選擇「OAuth 用戶端 ID」。

建立 OAuth 用戶端 ID

如果是 ASP.NET 串接的話,應用程式類型選擇「網頁應用程式」。
輸入用戶端名稱,一個專案可以建立多組用戶端憑證,這個名稱在前端用戶是看不到的。

建立 OAuth 用戶端 ID

在「已授權的 JavaScript 來源」輸入你要執行的網址,測試期間可用 localhost 授權。

已授權的 JavaScript 來源

如果你的專案未建立,還沒有網址,可以先填寫 https://localhost 就好,等有網址時再回來修改。

接著在「已授權的重新導向 URI」指的是當取得用戶授權之後,網頁要重新導向到何頁面,你可以自定轉向網址,可以輸入首頁網址或是指定頁面網址。

已授權的重新導向 URI

OAuth 用戶端建立後會得到 ID 和密碼,這兩組資訊是程式中會用到的資訊,可另存 JSON 下來。
但以我的範例,只會在程式端用到「用戶端 ID」而已。

用戶端 ID

完成後即建立一組用戶端授權。

完成後即建立一組用戶端授權

建立專案

開啟 Visual Studio 2022,在新增專案範本時,要選擇「ASP.NET Core Web 應用程式」或是「ASP.NET Core Web 應用程式 (Model-View-Controller)」都是可以的,而我通常是選擇有 MVC 的專案範本

建立專案

輸入專案名稱、路徑。
架構選擇「.NET 6.0」版本,在「驗證類型」這裡,官方的範例是選擇「個別帳戶」,範本就會自動建立登入的畫面。
而我此範本不使用「個別帳戶」,維持選擇「無」就行了,我將會自己建立登入按鈕,自己驗證授權結果。

建立專案

另外補充一些我的經驗,當我選擇「個別帳戶」建立範本時,可以透過 Program.cs 設定來增加 Google 登入鈕,然後取得授權登入結果,但我卻找不到如何修改登入畫面與授權註冊畫面的實體檔案位置,有種看的到卻改不動的困惑,可能是我還沒搞懂它的修改方式,如果有前輩知道如何修改登入畫面和註冊畫面,也請告知,謝謝。

按下「建立」就會建立此專案。

儲存 Google 用戶 ID

我們剛剛建立的 Google 用戶端 ID,可以先儲存在專案設定檔內,開啟 appsettings.json 增加一組設定。

"GoogleApiClientId": "xxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",

儲存 Google 用戶 ID

用戶端登入按鈕

接著我簡單在首頁建立一組 Google 登入按鈕。
開啟 \Views\Home\Index.cshtml,加入以下語法:

在語法中設定我的用戶端 ID 還有使用者同意登入後導頁網址。

如果你還不知道你的網址,可以先按 <F5> 看一下你測試環境的網域。

此登入語法範例,可從官方範例中參考。

登入後驗證及取得使用者資訊

當使用者點擊登入後,會顯示 Google 授權使用者同意登入,同意後 Google 會導向網頁至回傳頁,同時傳送憑證及令牌,我們需要在伺服器端驗證此憑證及令牌是否正確,可參考官方說明驗證方法

接著建立此接收頁,以範例路徑是 /Home/ValidGoogleLogin,所以我在 HomeController 建立這個 Action。
可以貼上此語法:

語法中的 GoogleJsonWebSignature 要安裝套件。以建議選項選擇「安裝套件 Google.Apis.Auth」。

安裝套件 Google.Apis.Auth

安裝套件後,程式就不會出錯了。

測試專案

可以按 <F5> 測試一下登入功能。

測試專案

點擊登入身份後出現使用者登入同意畫面,點擊「確認」登入。
從驗證頁程式檢查令牌正確後,就可以從 payload 物件取得登入者資訊。

從 payload 物件取得登入者資訊

有了使用者資訊,我們就可以抓取資料,快速建立帳號,降低使用者操作門檻。

在前端我只用到簡單的語法:@Html.Raw(ViewData["Msg"])

範例下載

連接 GitHub 下載教學程式碼

實際專案開發範例

此連結是我實際應用在網頁上呈現的範例: Winvest 雲投資

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG

3 thoughts on “[ASP.NET] 如何串接 Google Api 帳戶登入

    1. 謝謝你的許願,這個以前有做過 JavaScript 版本,但後來覺得安全性不夠,想改成後端驗證版本,我之後有空時,我再來寫後端的驗證版本喔

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

18 + 5 =


The reCAPTCHA verification period has expired. Please reload the page.