昨天我們簡單梳理了第三方登入背後的兩大協議：OAuth 2.0 與 OIDC。
今天，我們主要想詳細拆解使用 Google 帳號登入時，前後端各自扮演的角色與互動流程。並在最後，完成必要的前置作業（向 Google 申請 OAuth 2.0 所需的憑證）

使用 Google 進行第三方登入流程

延伸昨天我們介紹的授權碼流程。今天要從一個前、後端分離的角度，來走過一次完整的流程：

1. 使用者：在我們的網站上，點擊「使用 Google 登入」按鈕。
2. 前端：建構一個包含 client_id、redirect_uri、scope 等參數的 Google 授權 URL，並將使用者導向到 Google 的登入頁面。
3. 使用者：在 Google 的頁面上，輸入帳號密碼，或選擇已登入的帳號，並同意授權。
4. Google：驗證使用者身份，並確認使用者同意將基本資料（根據 scope 的設定）授權給我們的應用程式。
5. Google：驗證成功後，將頁面重新導向回我們在步驟 2 中指定的 redirect_uri，並在 URL 的 Query String 中附上一次性的授權碼。
6. 前端：在 callback 頁面，從 URL 中解析出這個授權碼，然後立刻將它發送到我們自己的後端 API。
7. 後端：收到授權碼後，附上自己的 client_id 和 client_secret，向 Google 的 Token 端點發起請求，交換憑證。Google 會回傳 id_token, access_token, refresh_token 等內容。
8. 後端：使用 Google 提供的公鑰，驗證 id_token 的簽章是否有效。驗證通過後，從 id_token 的 Payload 中解析出使用者資訊（如 Google ID, email, 姓名等）。
9. 後端：根據取得的 Google 使用者 Email，在我們自己的 users 資料表中查找。如果使用者不存在，就為他建立一筆新帳號資料（等同於註冊一個新用戶）。
10. 後端：無論是既有使用者還是新使用者，都要根據這個本地使用者帳號，簽發我們自己的 Access Token 和 Refresh Token。
11. 前端：接收到後端回傳的 Token 與使用者資訊，將其儲存起來，並將使用者導向登入成功的首頁。

以上是以本專案實作的角度來拆分的步驟，這樣就很清楚前後端各自的職責了。可以看到第三方登入請求是由前端發起，因此明天最主要會先建置前端頁面，接著實作後端端點，最後回到前端頁面測試功能是否正常。

在開始前，我們要先到 Google Cloud 新增 OAuth2.0 ClientID，以下間單說明操作步驟：

申請Google OAuth2.0 Client ID

1. 前置作業：

   • 登入您的 Google 帳號，前往 Google Cloud Console。
   • 建立一個新的專案，或選取一個現有專案。

2. 設定同意畫面：新增 OAuth Client ID 前須要先設定同意畫面，因此於左側欄選擇「 OAuth 同意畫面」。
   
   依序完成以下設定，設定內容可參考此文件說明：

   • 填寫應用程式資訊
   • 目標對象選擇外部
   • 填寫聯絡資訊
   • 勾選同意服務
   • 點選建立

3. 建立OAuth客戶端：同意畫面設定完成後會導向 OAuth 總覽畫面，點選「建立 OAuth 用戶端」。
   

4. 設定用戶端內容：

   • 應用程式類型：網頁應用程式
   • 名稱：自行命名，僅會在 console 作為辨識用。
   • 已授權的 JavaScript 來源：輸入前端開發伺服器的網址（即發出驗證請求的站點），如：http://localhost:4200
   • 已授權的重新導向 URI：主要有兩個用途：(1) 驗證完成後，系統會將使用者重新導向這個路徑，並附帶授權碼。(2) 這個路徑也會用於前端與後端對 Google 的請求，屆時請求需附上與此設定相同的URI，否則請求會失敗。這邊我輸入前端屆時會建立的過渡頁 http://localhost:4200/callback 。

   

5. 取得憑證：完成建立後，會看到一個彈出視窗，顯示 Client ID 和 Client Secret，紀錄下來或下載 JSON。secret 務必妥善保管避免外洩。

6. 新增測試使用者：點擊左側欄位的「目標對象」，並在測試使用者下點選 「Add users」新增用來測試的Google帳號。如果發布狀態設為「測試中」，只有測試使用者可以存取應用程式。
   

今天，我們拆解了前後端分離架構下的 Google 第三方登入流程，也完成了向 Google 申請憑證的前置作業。

明天，我們就來動手實作前端的登入畫面並試著發出驗證請求：）！