iT邦幫忙

2025 iThome 鐵人賽

DAY 9
1
Build on AWS

從一個網站的誕生,看懂 AWS 架構與自動化的全流程!系列 第 9

Day9 會員註冊流程建置:Cognito全託管式身分驗證管理系統

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20250923/20172743QQmfmJtpZC.png

一、前言

在 Serverless 架構中,會員註冊與身份驗證是最核心的功能之一。若要自行開發一套完整的帳號系統(註冊、登入、密碼重設、MFA、多平台整合),不僅需要大量程式碼,也會面臨安全性與合規性的挑戰。

使用 Amazon Cognito User Pool,可以快速建立一個全託管的會員系統,內建密碼雜湊、MFA、多因子驗證、社群登入(Google、Facebook、Apple)、以及 JWT Token 驗證。這大幅降低了開發與維運成本,並避免常見的安全漏洞。

其必要性與痛點:
(1) 傳統自建會員系統需自行處理密碼加密、存放、驗證邏輯,容易出現安全漏洞。
(2) 若需支援社群登入、MFA,多數情況要寫大量額外程式碼,難以維護。
(3) 會員註冊與登入流程若沒有標準化,後續要與 API Gateway、前端、其他 AWS 服務串接會困難重重。

在整體 Serverless 架構中,Cognito 作為 Day 9 的核心服務,提供「全託管身分驗證」,讓 API Gateway 與前端可以無痛整合,專注在業務邏輯開發,而非重複造輪子。

二、需要使用到的服務

  • Amazon Cognito User Pool:會員註冊、登入、驗證的核心服務。
  • Amazon Cognito Identity Pool(可選):若需要存取 AWS 資源(如 S3 上傳檔案),可透過臨時 IAM 權限發放。
  • AWS Lambda(可選):用於註冊流程中的 Trigger(如 PostConfirmation,進行額外初始化動作)。
  • Amazon DynamoDB(可選):若需要額外存放會員擴充資料(例如偏好設定)。
  • Amazon SES(可選):寄送註冊通知或驗證信件。

三、架構/概念圖

https://ithelp.ithome.com.tw/upload/images/20250923/20172743TXbMbDsECe.png

四、技術重點

(1) Cognito User Pool 會自動處理 密碼雜湊、Token 發放、驗證邏輯,不需自行實作。
(2) Cognito Token(ID Token, Access Token, Refresh Token)可直接被 API Gateway Authorizer 驗證,免寫額外驗證程式。
(3) 若需要在註冊後做額外處理,可透過 PostConfirmation Lambda Trigger,例如建立 DynamoDB 預設資料或寄送歡迎信。
(4) Cognito 內建 MFA 與安全策略(密碼強度、帳號鎖定),建議在 Lab 中啟用並測試。
(5) 若需整合社群登入(Google、Facebook、Apple ID),可在 Cognito Federation 設定中加入 Identity Provider,減少 OAuth 實作難度。

五、Lab流程

1️⃣ 前置作業

2️⃣ 主要配置

1. 建立 Cognito User Pool,啟用註冊(Sign-Up Flow)

  1. 進入「Cognito」服務頁面。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743WbVJvaLRjS.png

  2. 創建一個「使用者集區」。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743RuLFVKJiRa.png

  3. 命名,並選擇用戶的登入方式。(推薦使用E-mail為登入方式)
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743vtJxCVmIBv.png
    https://ithelp.ithome.com.tw/upload/images/20250923/201727436O3LtltG2E.png

2. 新增會員登出連結

  1. 進入剛剛創建的「使用者集區」內。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743Z6qbZti6XL.png

  2. 進到「應用程式用戶端」。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743TQ3TQJ6rBE.png

  3. 編輯「登入頁面」。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743hgYwMXpeLv.png

  4. 設定「回呼URL(登入後連結)」、「登出URL(登出後連結)」及登入時會帶有哪些資料。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743MaV59p84bS.png
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743uX1xGjnf3d.png

3. 刪除預設的cognito domain

  1. 先刪除原本的cognito網域。(創建時會自動幫你代入Cognito名稱的網域)
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743bPhq1Imhf7.png

  2. 刪除掉網域前綴。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743xPZOkr3JEf.png

4. 創建自己的Cognito網域

  1. 點選「建立Cognito網域」。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743X96nBtgGDU.png

  2. 輸入自己喜歡的網域前綴。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743Q3pP2zw5Xk.png

  3. 完成後,cognito會幫你建立一個網域:
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743p4MK5BHSN7.png

5. 在CloudFront中配置新的源站(Cognito)

  1. 進入「Cloudfrnot」服務頁面。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743d3BRlDChC8.png

  2. 點選「來源」頁面,建立新的「來源」網頁。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743HISqTrKvBL.png

  3. 選擇剛剛創建的第三個源站(用Cognito做的Login page)。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743gbrIXNyvbA.png
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743DhmoatRWWC.png

    • Cognito網址在哪複製?
      https://ithelp.ithome.com.tw/upload/images/20250923/20172743F7U37EuZRW.png

6. CloudFront指定特定路徑後的源站

  1. 再創建一個新的「行為」。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743FvvEh5eWCM.png

  2. 選擇「訪問特定路徑」會出現指定的源站頁面(Login頁面)。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743qROE366Tkz.png
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743cajsFDxbKv.png
    https://ithelp.ithome.com.tw/upload/images/20250923/201727437vwdc69gHX.png

  3. 創建完成畫面。
    https://ithelp.ithome.com.tw/upload/images/20250923/201727439EnZnUxBak.png

7. GitHub - 首頁增加會員登入按鈕

  1. 去GitHub上修改index.html的內容。

    • 程式碼範本
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>My Website Home Page</title>
          <style>
              body {
                  font-family: Arial, sans-serif;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;
                  margin: 0;
                  background-color: #f0f0f0;
                  text-align: center;
              }
              .container {
                  background-color: white;
                  padding: 40px 60px;
                  border-radius: 10px;
                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
              }
              h1 {
                  color: #333;
              }
              p {
                  color: #666;
                  line-height: 1.6;
              }
              .login-button {
                  padding: 10px 20px;
                  font-size: 16px;
                  color: white;
                  background-color: #007bff;
                  border: none;
                  border-radius: 5px;
                  cursor: pointer;
                  text-decoration: none; /* 移除超連結底線 */
                  margin-top: 20px;
                  display: inline-block;
              }
              .login-button:hover {
                  background-color: #0056b3;
              }
          </style>
      </head>
      <body>
          <div class="container">
              <h1>Welcome to Ducky website - Day9</h1>
              <p>Now hosted on Amazon S3!<br>update the login button.</p>
      
              <a href="<AWS_Cognito_login_URL>/login?client_id=5ug0mo74oh6ma666kd9dkpbqk5&response_type=code&scope=email+openid+profile&redirect_uri=<AWS_Cognito_callback_URL>" class="login-button">
                  登入會員
              </a>
          </div>
      </body>
      </html>
      

    https://ithelp.ithome.com.tw/upload/images/20250923/20172743Z1BPYUgnNH.png

  2. 打上備註(選用),推送版本。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743uFOktBnBUQ.png

8. GitHub - 暫時加入一個登入後的首頁

https://ithelp.ithome.com.tw/upload/images/20250923/20172743E4mjAoLwj3.png

3️⃣ 測試驗證

1. 測試Congnito登入畫面是否正常

  1. 點選剛剛建立的Cognito使用者集區。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743NcdLoqibDS.png

  2. 進入剛剛建立的「應用程式用戶端」內。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743YLUMs8zFU4.png

  3. 進入登入頁面。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743c5x0AH9nsv.png

  4. 成功看見登入頁面。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743Q4J35z8iAV.png

  5. 用URL格式的方式來測試 Hosted UI,依照下面的範本,把URL貼上瀏覽器做測試,照講會得到一樣的頁面。

    • Hosted UI的URL格式

      <AWS_Cognito_login_URL>/login
      ?client_id=你的AppClientId
      &response_type=code
      &scope=email+openid+profile
      &redirect_uri=<AWS_Cognito_callback_URL>
      

      https://ithelp.ithome.com.tw/upload/images/20250923/201727430jxlgWg0rb.png

      第一行的網址:
      https://ithelp.ithome.com.tw/upload/images/20250923/20172743x800g4mbWY.png

      Client_id:
      https://ithelp.ithome.com.tw/upload/images/20250923/201727432FOCVt04SY.png

      redirect_uri:
      https://ithelp.ithome.com.tw/upload/images/20250923/20172743dZqPr9rtdJ.png

    • 本次範例

      https://ducky-unique123.auth.us-east-1.amazoncognito.com/login
      ?client_id=5ug0mo74oh6ma666kd9dkpbqk5
      &response_type=code
      &scope=email+openid+profile
      &redirect_uri=https://www.ducky-test.tw/auth/callback/index.html
      

2. 確認網頁首頁有出現按鈕,點擊後可以連結到登入畫面

https://ithelp.ithome.com.tw/upload/images/20250923/20172743VpZ9sAfpqg.png

3. 在 Cognito 前端完成註冊流程,並可以做登入

  1. 註冊前先確認Cognito上沒有使用者資料。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743BDw1QVeco3.png

  2. 創建帳戶。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743EFgYhwcNig.png

  3. 輸入E-mail及密碼做註冊。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743i22sTejhCk.png

  4. 輸入驗證碼。

    • 驗證信範例:
      https://ithelp.ithome.com.tw/upload/images/20250923/20172743EEE2IEoG8E.png

    https://ithelp.ithome.com.tw/upload/images/20250923/20172743wO6g5iDfJ1.png

  5. 完成註冊。(查看Cognito後台,會發現有一個新的user)
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743r3B4wgGsR5.png

4. 測試登入畫面

  1. 點選登入。
    https://ithelp.ithome.com.tw/upload/images/20250923/201727437NjITI9C6Y.png

  2. 登入後頁面。
    https://ithelp.ithome.com.tw/upload/images/20250923/20172743jjYqYWVT0f.png

六、結語

今天我們完成了 Cognito 全託管式會員註冊與驗證系統 的建置。它解決了自建會員系統的安全與維運痛點,並且可以與 API Gateway、Lambda、DynamoDB 無縫整合,實現完整的 Serverless 身分驗證解決方案。

未來在 Day 10(會員通知信件)Day 11(MFA 安全強化) 中,會進一步擴充註冊體驗,讓系統更安全、更貼近實務需求。


參考資料:

[1] AWS - 使用 Amazon Cognito 字首網域進行受管登入
https://docs.aws.amazon.com/zh_tw/cognito/latest/developerguide/cognito-user-pools-assign-domain-prefix.html


上一篇
Day8 自動化快取清理:Buildspec建置 x CloudFront快取刷新
下一篇
Day 10 會員信件自動寄送:Lambda x SES 打造註冊通知
系列文
從一個網站的誕生,看懂 AWS 架構與自動化的全流程!10
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
雷N
iT邦研究生 1 級 ‧ 2025-09-24 12:51:01

四格漫畫真有趣 XD

bb25379 iT邦新手 5 級 ‧ 2025-09-24 13:00:17 檢舉

雷N這是我私心想放的,哈哈XDD~
總感覺有故事比較好玩對吧,嘿嘿(?

我要留言

立即登入留言