在上一篇文章中，我們聊過 Cognito 的基本概念，也提到第三方登入（Google、Facebook、Apple）今天我們就要來實作第一個「用 Google 登入」的範例！*

這篇文章會帶你走過：

1. 建立 Google OAuth Client
2. 在 Cognito User Pool 設定 Google 作為 Identity Provider
3. 啟用 Cognito Hosted UI
4. 使用一個簡單的前端範例，測試整個登入流程

今天的內容會用到這個 GitHub Repo

由於AWS Cognito在撰稿當下尚未在ap-east-2(台北)Region開放，以下內容會在ap-east-1(香港)實作

為什麼要支援「Google 登入」& Hosted UI 是甚麼？

我們都知道看到「註冊帳號」時，如果服務不夠吸引人，大部分人可能會直接離開，因為真的懶得再記一組新的帳密

但如果提供「使用 Google 登入」，使用者只要點一下就能完成註冊，體驗上完全不同。這就是 第三方登入 (Federated Identity) 的價值。

而 AWS Cognito Hosted UI 是一個由 AWS 提供的預建介面，允許開發者快速整合如 Google、Facebook以或一般的帳號密碼登入。Hosted UI 負責顯示登入頁面、處理OAuth 流程，並返回安全的 JWT 令牌給應用程式。它省去了自行設計頁面或處理複雜驗證邏輯的麻煩，讓我們能專注於應用程式的核心功能

於是我接下來就會帶你走過如何透過 Hosted UI 以及 Google Console建立這樣的「使用Google登入」功能

Step 1. 在 Cognito Console 建立 User Pool 與 Hosted UI 網域

1. 打開 AWS Console → Cognito → User Pools(使用者集區)
   

根據我們專案的特性選擇 SPA

在這裡選擇你的使用者必要提供的欄位

2. 在選單身分驗證→社群和外部提供者中啟用 聯合身分提供商(Federated Identity Providers)（等等我們會用到 Google）
   

如畫面所示，我們將會需要來自 Google Client ID 以及 Client Secret 我們將會在稍後在Google OAuth Client取得，待會再回來填入

3. 在 品牌→網域 自訂一個Cognito網域，完成後複製起來：

在Console中手動建立Cognito通常會幫你配置一個隨機的網域，如果遇到這種情況可以刪除網域後再重新自訂

https://your-domain-name.auth.ap-northeast-1.amazoncognito.com

注意：這個網域很重要，因為 Google OAuth 驗證完之後，會先回傳到這個 Cognito Hosted UI，再由 Cognito 幫你導回應用程式的 Callback URL。

Step 2. 建立 Google OAuth Client

1. 脫離一下 AWS 進入 GCP，前往 Google Cloud Console
2. 如果還沒有建過專案，建立一個新專案，名稱隨便取
3. 在左側選單找到 API & Services → OAuth 同意畫面
   • 設定應用程式名稱 (ex: Cognito Demo)
4. 建立 OAuth 2.0 Client ID
   • 選擇「Web 應用程式」
   • 
   • 在「授權的重新導向 URI (Authorized Redirect URI)」這裡填入剛剛建立的 Hosted UI 網域，並加上：
     

/oauth2/idpresponse

• 例如：

https://your-domain-name.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse

5. 完成後，拿到一組 Client ID 和 Client Secret，等等會貼到 Cognito 裡。

Step 3. 在 Cognito 綁定 Google Provider

1. 到 應用程式用戶端 於身分提供商中選擇 Google
   
2. 回到Step1的頁面，貼上剛剛 Google 給你的 Client ID / Client Secret
3. 在授權範圍填入如圖的常用範圍
   
4. 儲存設定

Step 4. 建立 User Pool Client 並設定 Callback URL

1. 在 App Integration → App Clients 新增一個 Client
2. 在設定中填寫：
   • Callback URL：http://localhost:3000/（這是你本機的前端應用程式位址）
   • Sign-out URL：http://localhost:3000/
   • 選擇支援的 OAuth 流程（建議用 Authorization code grant）
   • Scope 可以勾 openid、email、profile

Step 5. GitHub Repo：前端測試專案

我準備了一個簡單的前端範例 專案 GitHub Repo 連結：
可以跟著一起測試看看

這個前端專案很簡單：

• 一個首頁，裡面有「Login with Cognito」按鈕
• 當使用者點擊時，會導向 Cognito Hosted UI
• 成功登入後，Cognito 會把使用者導回到 http://localhost:3000/，並附上 JWT Token
• 頁面會把 Token 顯示出來，確認登入成功

要在本地跑起來，只要

git clone https://github.com/Archong-Liu/30daysAWS-Cognito-demo.git
cd 30daysAWS-Cognito-demo
npm install
npm start

不過為了連接上自己的 Cognito 有一些參數需要設定，詳見 repo 中的 readme(建議使用.env)

Step 6. 單純測試 Google 登入

1. 開啟 Hosted UI URL
2. 你會看到 Cognito 的登入頁面（包含「Sign in with Google」的按鈕）
3. 點擊 Google → 跳轉到 Google OAuth → 同意存取 → 回到 http://localhost:3000/
4. 在頁面上看到 JWT Token，登入成功！

小結

今天我們做了五件事：

• 建立 Google OAuth Client
• 在 Cognito Console 建立 User Pool 並綁定 Google
• 新增 User Pool Client 並設定 Callback URL
• 在 GitHub Repo 準備前端範例，實際跑起來
• 測試並完成「用 Google 登入 Cognito」

下一篇，我們會進一步用 CDK 程式碼 建立這些設定，並介紹 Amplify 讓前端應用程式更方便地跟 Cognito 整合。