跳到正文 Lab 12: Authentication and Authorisation in AWS (Cognito, Federated Authentication, UI Development) · Jimmy Huang's Blog
← Week 12 Industry Talk and Unit Revision 学习 › C6001 › 2026 S1 › FIT5225 Cloud computing and security › Week 12 Industry Talk and Unit Revision Lab 12: Authentication and Authorisation in AWS (Cognito, Federated Authentication, UI Development) Lab 12: Authentication and Authorisation in AWS (Cognito, Federated Authentication, UI Development) 本页目录· 97 条 Overview 本周 Lab 的主题是 Authentication and Authorisation in AWS ，核心是用 Amazon Cognito 来保护应用和 API。
前面几周我们已经做过 VPC、Security Group、API Gateway、Lambda 等内容，这一周重点不是网络层的访问控制，而是应用层的身份验证与权限控制。也就是说，不只是让请求能不能从网络上进来，还要判断：
本次 Lab 会先创建一个简单的 API Gateway PetStore API，然后创建 Cognito User Pool 作为用户目录，再把 API Gateway 的某些 endpoint 绑定到 Cognito Authorizer。最后会运行一个本地 React Web App，用 Cognito 实现登录、注册和跳转。
整体主线可以理解为：
Goal 完成本周 Lab 后，需要掌握：
什么是 AWS Cognito
User Pool 和 Identity Pool 的区别
如何创建 Cognito User Pool
如何使用 Hosted UI 进行登录和注册
如何创建 API Gateway REST API
如何用 Cognito Authorizer 保护 API Gateway endpoint
如何用 ID Token 调用受保护的 API
如何运行一个本地 React App，并接入 Cognito 登录
本页目录 为什么前端 SPA 需要单独的 App Client
为什么 callback URL、sign-out URL、token source 这些配置不能写错
Task 0: 实验前准备 这个 Task 主要是先确认环境、工具和需要记录的变量。后面步骤会不断用到这些值，所以建议先准备一个记录区，不然后面很容易混乱。
Step 0.1：确认 AWS 环境 进入 AWS Cloud Academy 或 AWS Learner Lab，然后打开 AWS Console。
如果你用的是 AWS Learner Lab，某些 IAM 或 Identity Pool 功能可能会受限制。
Task 5 的 Identity Pool 是 optional，而且 Lab 文档也提醒 Learner Lab 里可能因为 IAM 权限限制无法完成。
只要 Task 1 到 Task 4 完成，主线内容基本已经覆盖。
Step 0.2：确认本地 Node.js 和 npm Task 4 需要在本地运行一个 React Web App，所以需要 Node.js 和 npm。
如果你还需要从 GitHub clone 示例代码，也可以确认 git 是否可用：
如果 node 或 npm 找不到，需要先安装 Node.js
Step 0.3：准备变量记录区
Task 1: Deploying a Simple API 这个 Task 要先创建一个简单的 API Gateway REST API。这个 API 一开始是不受保护的，任何人都可以访问。后面 Task 3 会把 Cognito Authorizer 加到这个 API 上，用来对比“未保护”和“已保护”的区别。
创建一个 API Gateway REST API
使用 AWS 提供的 Example API 模板
得到一个 PetStore API
测试 / 和 /pets 的 GET 方法
创建一个新的 /sign-out resource
给 /sign-out 创建 POST method
使用 Mock integration
部署 API 并记录 invoke URL
Step 1.1：创建 REST API
Step 1.2：查看 PetStore API 的资源结构 创建完成后，进入 PetStore API 的 Resources 页面。
Step 1.3：测试未保护的 GET method 先测试 / 和 /pets 的 GET method。
可以在 API Gateway 控制台里点某个 GET method，然后使用 Test 功能。
Step 1.4：创建 /sign-out resource 在 PetStore API 的 Resources 页面中，选择根路径 /，然后创建新 resource。
Step 1.5：给 /sign-out 创建 POST method 选中 /sign-out resource，然后创建一个新的 method：
Mock integration 不需要真实后端。
它只是为了让 API Gateway 有一个可调用的 POST endpoint。
本 Lab 的重点不是后端逻辑，而是 API 是否能被 Cognito 保护。
Step 1.6：部署 API 创建或修改 API Gateway 配置后，需要部署 API。
Step 1.7：记录 Task 1 的结果
Task 2: Creating a User Pool 这个 Task 要创建 Cognito User Pool。User Pool 可以理解为一个 AWS 托管的用户目录，用来保存用户账号、密码、邮箱、用户属性，并负责登录认证。
创建 Cognito User Pool
设置 email 作为 sign-in identifier
设置 name 为 required attribute
修改 password policy
设置 MFA 为 optional
配置 Cognito Hosted UI
配置 App Client login settings
创建测试用户
用 Hosted UI 登录并测试 callback URL
用 Hosted UI 注册新用户
Step 2.1：进入 Amazon Cognito
Step 2.2：使用Cognito 向导创建 User Pool 进入 Amazon Cognito 后，如果看到新版首页，不再是旧版的 “Create user pool” 页面，而是两个主要入口：
本 Lab 要创建的是 Cognito User Pool ，所以应该选择左侧：
这说明你已经进入新版 Cognito User Pool 创建向导。
Step 2.3：Define your application 在 Define your application 区域，选择应用类型：
这里是 Lab 的 Task 2，用来创建默认 Web App / Hosted UI 测试用的 App Client。
后面 Task 4 才会为本地 React App 单独创建一个 SPA App Client。
如果现在直接选 SPA，后面 callback URL、authentication flow 和 Lab 文档会更容易混乱。
然后在 Name your application 中填写一个容易识别的名字，例如：
这个名字是 Cognito 创建应用配置时使用的显示名称，不是 User Pool ID，也不是 App Client ID。
Step 2.4：Configure options - Sign-in identifiers 在 Configure options 区域，找到：
不要勾选 phone number 或 username，除非 Lab 明确要求。
Step 2.5：Required attributes 选择 name 因为本 Lab 要求 name 是 required attribute。也就是说，无论用户通过 Hosted UI 注册，还是后面通过 React App 注册，都必须向 Cognito 提交 name 字段。
如果后面 Task 4 的 React App 注册失败，一个常见原因就是：
所以这里选择 name 后，后面的 optional bug 分析就能和 Lab 要求对应起来。
Step 2.6：配置 Return URL / Callback URL 这里填入 Task 1 中 API Gateway 的 Invoke URL。
用户在 Cognito Hosted UI 登录成功后，会被重定向回这个 URL。
本 Lab 用 API Gateway 的 PetStore API 页面作为 callback 测试页面。
如果 callback URL 填错，登录后会出现 redirect mismatch 或 invalid redirect 相关错误。
Step 2.7：确认并创建 Cognito resources 这里的 Quick setup guide 暂时不用管。我们当前 Lab 不是要根据这个页面写后端代码，而是要继续进入 User Pool 页面，记录 User Pool ID、App Client ID，并测试登录注册。
Step 2.8：进入 User Pool 并记录关键信息 创建成功后，不要继续操作 Quick setup guide 里的 Golang / Java / NodeJS / Python 示例代码。
User Pool name 不是 User Pool ID。
后面 Task 3 创建 API Gateway Authorizer 时，需要选择这个 User Pool。
后面 Task 4 配置 React App 时，需要填写 User Pool ID，而不是 User Pool name。
Step 2.9：记录 Default App Client ID 找到新版向导自动创建的 App Client。它通常和刚才的 application name 有关，例如：
App Client ID 是一串较长的随机字符串，例如：
App Client ID 不是 User Pool ID。
Task 2 的 Hosted UI / Managed Login 可以先使用这个 default app client。
Task 4 的 React App 后面建议单独创建一个 SPA App Client，不要直接混用这个 default app client。
Step 2.10：检查 Password policy 和 MFA 设置 如果前面新版创建向导没有让你配置 Password policy 和 MFA，就在创建完成后进入 User Pool 设置中检查。
Password policy 这一步主要是为了降低实验中创建测试用户的复杂度。真实生产环境不一定建议降低密码强度，但本 Lab 这样设置可以减少测试登录时的干扰。
MFA 继续在 User Pool 的 Authentication 设置中找到：
找到 Multi-factor authentication
Step 2.11：创建测试用户 通过 Cognito Console 手动创建的用户，第一次登录时通常需要修改密码。用户状态可能会显示为：
Step 2.12：使用 Managed Login / Hosted UI 测试登录 使用刚才创建的 email 和 temporary password 登录。
第一次登录时，Cognito 会要求你设置新密码。
设置完成后，如果 Return URL 配置正确，登录成功后应该会跳转到：
Step 2.13：使用 Managed Login / Hosted UI 注册新用户 选择 Sign in as a different user? Create an account
因为前面把 name 设置成了 required attribute，所以注册时必须提供 name。
提交后，Cognito 通常会向邮箱发送 verification code。打开邮箱，复制验证码，回到页面完成验证。
确认新注册的用户已经出现在 User Pool 中。
Step 2.14：Task 2 小结 这一步完成后，就可以进入 Task 3，把 API Gateway 的 /pets GET endpoint 绑定到 Cognito Authorizer 上。
Task 3: Securing Your API with Cognito 这个 Task 是本周 Lab 的核心：把 API Gateway 的 endpoint 用 Cognito Authorizer 保护起来。
在 API Gateway 中创建 Cognito Authorizer
把 Authorizer 绑定到 /pets 的 GET method
重新部署 API
用 incognito window 测试未登录访问失败
用 Postman 或 curl 带 ID Token 调用受保护 API
尝试 decode JWT token
Step 3.1：创建 Cognito Authorizer
Step 3.2：把 Authorizer 加到 /pets 的 GET method 从下拉菜单中选择刚刚创建的 Cognito Authorizer，例如：
Step 3.3：重新部署 API 修改 method 的 authorization 配置后，必须重新 deploy API。
Step 3.4：测试未登录访问受保护 API 打开一个新的 incognito window，或者使用 curl 不带 token 访问 /pets：
Step 3.5：使用 Managed Login / Hosted UI 获取 ID Token 这个步骤的目标是获取 Cognito 登录后生成的 ID Token 。后面 Step 3.6 会把这个 ID Token 放到 HTTP request 的 Authorization header 里，用来访问已经被 Cognito Authorizer 保护的 /pets API。
这说明当前使用的是 Authorization code grant ，这个 code 不是 ID Token，不能直接拿来调用 API。
本 Lab 为了方便手动复制 token，建议使用 Implicit grant ，让 Cognito 登录成功后直接在 URL 中返回：
Step 3.5.1：检查 App Client 的 Login settings 进入 lab11-web-app 这个 App Client 后
如果没有开启 Implicit grant，登录后通常只会返回：
所以如果页面里还没有勾选 Implicit grant，需要点击 Edit，勾选后保存。
Step 3.5.2：找到 Cognito Managed Login / Hosted UI domain 进入 Cognito User Pool 后，可以从以下位置找到登录页面：
点击 View login page 后，浏览器会打开 Cognito 的登录页面。
这时先观察浏览器地址栏，复制登录页面 URL 中的 domain 部分。
Step 3.5.3：手动构造获取 ID Token 的登录 URL 例如，如果你的 Cognito domain 是：
注意： redirect_uri 这里使用的是 URL encoded 形式：
Step 3.5.4：使用无痕窗口登录 建议打开 Chrome Incognito Window / 无痕窗口，然后访问刚刚构造好的登录 URL。
这样可以避免之前已经登录过的 Cognito session 影响测试。
Step 3.5.5：登录成功后复制 ID Token 如果配置正确，登录成功后会跳转到 API Gateway 页面：
不要复制 id_token= 这几个字。
不要复制后面的 &access_token=...。
不要复制 ?code=...，那不是 ID Token。
Token 很长是正常的。
Token 有过期时间，如果后面调用 API 失败，可以重新登录获取新的 ID Token。
截图时建议遮挡 token 中间部分，不要把完整 token 暴露在报告或公开文件里。
Step 3.5 小结 下一步 Step 3.6 会使用这个 ID Token 调用受保护的 API：
请求时需要把 ID Token 放入 HTTP header：
Step 3.6：用 ID Token 调用受保护 API 使用 curl 时，把 ID Token 放到 Authorization header。
API 返回 /pets 的结果
不再是 401 Unauthorized
API Gateway 从 Authorization header 读取 token。
Cognito Authorizer 验证 token 是否来自指定 User Pool。
验证通过后，请求才会转发到 API method。
Step 3.7：Decode JWT Token 可以使用 JWT decode 工具查看 token 内容。
Lab 里为了学习可以 decode token。
真实项目中不要随便把生产环境 token 粘贴到第三方网站。
JWT decode 不等于验证签名，decode 只是把内容展开来看。
Step 3.8：Task 3 小结 这就是 Cognito User Pool + API Gateway Authorizer 的基本认证保护流程。
Task 4: Creating a Simple Web Application Using AWS JavaScript SDK and Cognito 这个 Task 要在本地运行一个简单的 React Web App，并让它连接到 Cognito User Pool。
Clone 示例 React 项目
安装 npm dependencies
在 Cognito 中创建一个新的 SPA App Client
开启 ALLOW_USER_PASSWORD_AUTH
配置 callback URL 为 http://localhost:5173/home
修改项目中的 src/config.json
启动本地开发服务器
测试登录和注册
分析 optional sign-up bug
Step 4.1：Clone 示例项目
Step 4.2：安装依赖
Step 4.3：创建新的 SPA App Client 回到 AWS Cognito User Pool。
SPA App Client 不应该使用 client secret。
因为浏览器前端代码是公开的，不能安全保存 secret。
ALLOW_USER_PASSWORD_AUTH 允许前端用用户名和密码直接进行认证流程。
http://localhost:5173/home 是 Vite 本地开发服务器的 home 页面地址。
Step 4.3.1：开启 ALLOW_USER_PASSWORD_AUTH创建新的 SPA App Client 后，还需要检查它是否开启了用户名/密码登录 flow。新版 Cognito UI 创建 SPA App Client 时，可能不会在创建页面直接显示这个选项，所以需要创建完成后进入 App Client 里手动检查。
这一步很重要。因为本地 React App 是通过 email/password 直接调用 Cognito 登录。如果没有开启 ALLOW_USER_PASSWORD_AUTH，登录时会报错：
1. 进入新创建的 SPA App Client 这里要进入的是 Task 4 新建的 SPA App Client，不是前面 Task 2 创建的 lab11-web-app。
2. 编辑 App Client information
3. 找到 Authentication flows 这里会显示这个 App Client 支持的登录方式。
4. 勾选 ALLOW_USER_PASSWORD_AUTH
5. 保存设置
Step 4.4：记录 SPA App Client ID Task 4 的 React App 应该使用新创建的 SPA App Client ID。
Step 4.5：修改 src/config.json不要把 User Pool name 填到 userPoolId。
User Pool ID 通常长得像 us-east-1_xxxxxxxx。
Client ID 是一串较长的随机字符串。
如果项目原本的 key 名不是 userPoolId，以原文件字段名为准，不要随便改 key 名。
Step 4.6：启动本地开发服务器 你应该能看到 welcome screen 和 login dialog。
Step 4.7：测试登录 使用前面 Cognito User Pool 中已有的用户登录。
Step 4.8：测试注册
Step 4.9：Optional Lab Task：为什么 sign-up process 不能完成？ 可以检查浏览器 console 或 terminal 报错，常见错误类似：
在 sign-up 页面增加 name 输入框
在 state 中保存 name
调用 Cognito signUp 时把 name 加入 UserAttributes
确认 email 也作为 attribute 一起传入
如果项目使用 AWS SDK v3，核心逻辑可以类似这样：
如果项目使用 Amplify Auth，核心逻辑可以类似这样：
实验问题回答
Q1: Cognito User Pool 是什么？ Cognito User Pool 是 AWS 提供的用户目录服务，用来管理应用用户的注册、登录、密码、邮箱验证、用户属性和 token 生成。用户登录成功后，Cognito 会返回 ID Token、Access Token 等 token，应用可以用这些 token 证明用户已经登录。
Q2: API Gateway Authorizer 在本 Lab 中做什么？ API Gateway Authorizer 用来保护 API endpoint。它会检查 HTTP request header 里的 token，例如 Authorization header 中的 ID Token。如果 token 是由指定 Cognito User Pool 签发并且仍然有效，API Gateway 就允许请求访问受保护的 API；否则返回 Unauthorized。
Q3: 为什么修改 API Gateway method 后要 redeploy？ API Gateway 的配置修改不会自动影响已经发布的 stage。把 Authorizer 加到 /pets GET method 后，需要重新 deploy 到 prod stage，否则外部访问的还是旧版本 API 配置。
Q4: ID Token 和 Access Token 有什么区别？ ID Token 主要用于 authentication，表示用户是谁，里面通常包含 email、name、sub 等用户身份信息。
Access Token 主要用于 authorization，表示用户被允许访问哪些资源或 scope。
本 Lab 因为没有定义复杂的 authorization scope，所以使用 ID Token 来访问受保护的 API endpoint。
Q5: 为什么 SPA App Client 不应该使用 client secret？ SPA 是运行在浏览器里的前端应用，代码可以被用户看到。如果把 client secret 放到前端代码里，它就不再是 secret。因此浏览器前端应用通常应该使用不带 client secret 的 App Client。
Q6: Identity Pool 和 User Pool 有什么区别？ Identity Pool 负责把已经登录的用户映射到 AWS IAM Role，并发放临时 AWS credentials，让用户可以访问其他 AWS 服务。
本周必须理解的知识点
1. Authentication vs Authorisation
2. User Pool vs Identity Pool
3. Callback URL 为什么容易出错？ Callback URL 必须和 Cognito App Client 中配置的 Allowed callback URLs 完全一致。
如果你实际前端跳转到这个地址，但 Cognito 没有允许这个 URL，就会报 redirect mismatch。
4. Token source 为什么是 Authorization？ API Gateway 需要知道从请求哪里读取 token。
API Gateway 会从这里取出 token 并交给 Cognito Authorizer 验证。
常见报错与排查
1. 访问 /pets 仍然不需要登录
2. 不带 token 访问 /pets 没有返回 401 如果访问的是根路径 /，可能没有被保护。Lab 主要是保护 /pets GET。
3. 带 token 仍然返回 401 Unauthorized
4. Hosted UI 登录后 redirect mismatch
5. React App 登录失败
6. React App 注册失败
7. npm install 失败
8. Identity Pool 创建失败
关键概念对比
User Pool vs Identity Pool
ID Token vs Access Token
Hosted UI vs React App
API Gateway Authorizer vs Security Group
老师可能会问什么
1. 这个 Lab 为什么需要先创建 PetStore API？ 因为要有一个 API endpoint 用来演示 Cognito Authorizer 的效果。先创建一个公开 API，然后再加 Authorizer，这样可以清楚对比未保护和已保护的访问差异。
2. Cognito User Pool 在这个架构里负责什么？ User Pool 负责用户注册、登录、邮箱验证、密码管理和 token 生成。它相当于应用的用户目录和认证服务。
3. API Gateway 怎么知道请求是否来自已登录用户？ 请求需要在 Authorization header 中带上 Cognito 生成的 token。API Gateway 的 Cognito Authorizer 会验证这个 token 是否有效、是否来自指定 User Pool。
4. 为什么要重新 deploy API？ 因为 API Gateway 的 method 配置修改后，不会自动更新到已经发布的 stage。必须 redeploy 到 prod，外部请求才会使用新的 Authorizer 配置。
5. 为什么 Task 4 需要新建 SPA App Client？ 因为本地 React App 是 Single Page Application，需要使用适合前端浏览器的 App Client。SPA 不应该使用 client secret，并且需要配置本地 callback URL，例如 http://localhost:5173/home。
6. Sign-up 为什么可能失败？ 因为 Lab 创建 User Pool 时要求 name 是 required attribute，但示例 React App 可能只提交 email 和 password，没有提交 name，所以 Cognito 会拒绝注册。修复方式是在表单和 sign-up 请求中加入 name attribute。
7. Identity Pool 和 User Pool 最大区别是什么？ User Pool 用来登录和管理用户；Identity Pool 用来给已经认证的用户发放临时 AWS credentials，让他们能访问其他 AWS 服务。
Summary 本周 Lab 的主线是把 AWS Cognito 加到 API 和 Web App 的认证流程里。
先用 API Gateway 创建了一个简单的 PetStore API，并确认它一开始是公开可访问的。然后创建 Cognito User Pool，用 email 作为登录方式，配置 Hosted UI、App Client、callback URL 和测试用户。接着在 API Gateway 中创建 Cognito Authorizer，并把它加到 /pets GET method 上。重新部署后，不带 token 的请求会被拒绝，带合法 ID Token 的请求才能访问 API。
最后，本地运行 React App，把它连接到自己的 Cognito User Pool。React App 通过 Cognito SDK 完成登录和注册。Optional sign-up bug 的关键在于：如果 User Pool 要求 name 是 required attribute，前端注册请求也必须提交 name，否则 Cognito 会拒绝注册。
只要能解释清楚下面这条链路，就说明本周重点掌握了：
User
↓
Cognito Hosted UI / React App 登录
↓
Cognito User Pool 验证用户身份
↓
返回 ID Token / Access Token
↓
API Gateway Cognito Authorizer 验证 Token
↓
允许或拒绝访问 APIAmazon API Gateway
Amazon Cognito
IAMAWS Region:
API Gateway API name:
API Gateway stage name:
API Gateway invoke URL:
Cognito User Pool name:
Cognito User Pool ID:
Cognito Hosted UI domain:
Default App Client ID:
SPA App Client ID:
API Gateway Authorizer name:
Protected endpoint URL:AWS Region: us-east-1
API Gateway API name: PetStore
API Gateway stage name: prod
API Gateway invoke URL: https://xxxx.execute-api.us-east-1.amazonaws.com/prod
Cognito User Pool name: lab11-user-pool
Cognito User Pool ID: us-east-1_xxxxxxxxx
Cognito Hosted UI domain: https://xxxx.auth.us-east-1.amazoncognito.com
Default App Client ID: xxxxxxxxxxxxxxxxxxxxxxxxxx
SPA App Client ID: xxxxxxxxxxxxxxxxxxxxxxxxxx
API Gateway Authorizer name: lab11-authorizer
Protected endpoint URL: https://xxxx.execute-api.us-east-1.amazonaws.com/prod/petsAPI Gateway → APIs → Create API/
├── GET
└── /pets
├── GET
└── POSThttps://xxxx.execute-api.us-east-1.amazonaws.com/prodAPI Gateway API name:
Stage name:
Invoke URL:
Pets endpoint:
Sign-out endpoint:API Gateway API name: PetStore
Stage name: prod
Invoke URL: https://xxxx.execute-api.us-east-1.amazonaws.com/prod
Pets endpoint: https://xxxx.execute-api.us-east-1.amazonaws.com/prod/pets
Sign-out endpoint: https://xxxx.execute-api.us-east-1.amazonaws.com/prod/sign-outAdd sign-in and sign-up experiences to your app
→ Get started for free in less than five minutesGrant app access to AWS servicesSet up resources for your applicationApplication type: Traditional web applicationSingle-page application (SPA)Options for sign-in identifiersUser Pool 要求 name 是 required attribute，
但是 React 示例项目的 sign-up 请求只提交了 email 和 password，
没有提交 name。https://hqib2gebxi.execute-api.us-east-1.amazonaws.com/prodApplication type: Traditional web application
Application name: lab11-web-app
Sign-in identifier: Email
Required attribute: name
Return URL: <https://hqib2gebxi.execute-api.us-east-1.amazonaws.com/prod>Your application "lab11-web-app" and user pool "User pool - ewpkgw" have been created successfully.Check out your sign-in page
View login page
Quick setup guide
Golang / Java / NodeJS / PythonCognito User Pool name: User pool - ewpkgw
Cognito User Pool ID:
AWS Region: us-east-1Applications
→ App clientsxxxxxxxxxxxxxxxxxxxxxxxxxxUser Pool
→ Authentication methods
→ Password policyUncheck Require special characterMFA: Optional
MFA method: Authenticator appsEmail:
Temporary password:
User status:<https://hqib2gebxi.execute-api.us-east-1.amazonaws.com/prod>1. User Pool 可以认证用户
2. Cognito Managed Login / Hosted UI 可以正常登录
3. Return URL / Callback URL 配置正确Managed Login / Hosted UI 的 sign-up 流程正常
email verification 正常
新用户可以被保存到 Cognito User Pool已创建 Cognito User Pool
已配置 email 作为 sign-in identifier
已配置 name 作为 required attribute
已创建 default App Client
已配置 Managed Login / Hosted UI
已配置 Return URL / Callback URL
已记录 User Pool ID
已记录 Default App Client ID
已检查 Password policy
已检查 MFA 设置
已创建至少一个测试用户
已成功通过 Managed Login / Hosted UI 登录
已测试 Managed Login / Hosted UI 注册流程Cognito User Pool name: User pool - ewpkgw
Cognito User Pool ID:
Cognito Hosted UI domain:
Default App Client ID:
Callback / Return URL: <https://hqib2gebxi.execute-api.us-east-1.amazonaws.com/prod>
Sign-out URL:API Gateway → APIs → PetStore API → AuthorizersAuthorizer name: lab11-authorizer
Authorizer type: Cognito
Cognito user pool: 选择你在 Task 2 创建的 User Pool
Token source: Authorization
Token validation: 留空API Gateway → PetStore API → Resources → /pets → GETAmazon Cognito
→ User pools
→ User pool - ewpkgw
→ Applications
→ App clients
→ lab11-web-appAllowed callback URL:
<https://hqib2gebxi.execute-api.us-east-1.amazonaws.com/prod>
OAuth grant types:
Implicit grant
OpenID Connect scopes:
openid
profileUser Pool Overview
→ Apply branding to your managed login pages
→ View login page<https://xxxx.auth.us-east-1.amazoncognito.com><https://xxxx.auth.us-east-1.amazoncognito.com>Cognito Hosted UI domain:<YOUR_COGNITO_DOMAIN>/login?client_id=31qi83s489c7bcpk68g4b3kjmp&response_type=token&scope=openid+profile&redirect_uri=https%3A%2F%2Fhqib2gebxi.execute-api.us-east-1.amazonaws.com%2Fprod<https://xxxx.auth.us-east-1.amazoncognito.com><https://xxxx.auth.us-east-1.amazoncognito.com/login?client_id=31qi83s489c7bcpk68g4b3kjmp&response_type=token&scope=openid+profile&redirect_uri=https%3A%2F%2Fhqib2gebxi.execute-api.us-east-1.amazonaws.com%2Fprod>client_id:
使用 Task 2 记录的 Default App Client ID
response_type=token:
要求 Cognito 使用 Implicit grant，直接返回 token
scope=openid+profile:
请求 OIDC token 和 profile scope
redirect_uri:
登录成功后跳转回 API Gateway Invoke URLhttps%3A%2F%2Fhqib2gebxi.execute-api.us-east-1.amazonaws.com%2Fprod<https://hqib2gebxi.execute-api.us-east-1.amazonaws.com/prod>Sign in as a different user<https://hqib2gebxi.execute-api.us-east-1.amazonaws.com/prod>#id_token=eyJraWQiOiJ...&access_token=eyJraWQiOiJ...&expires_in=3600&token_type=Bearerid_token= 后面
到 &access_token= 前面<https://hqib2gebxi.execute-api.us-east-1.amazonaws.com/prod/pets>Authorization: <YOUR_ID_TOKEN>sub
email
name
iss
aud
exp
iat
token_use不带 token → 无法访问 /pets
带合法 ID Token → 可以访问 /petsUser Pool → Applications → App clientsSingle Page Application (SPA)Authentication flows: ALLOW_USER_PASSWORD_AUTH
Allowed callback URLs: http://localhost:5173/homeSign in failed: InvalidParameterException:
USER_PASSWORD_AUTH flow not enabled for this clientAmazon Cognito
→ User pools
→ User pool - ewpkgw
→ Applications
→ App clients
→ lab11-spa-appSPA App Client name: lab11-spa-app
SPA App Client ID: 77cndo7oam9tu9rg96u8f7qe7hEdit app client informationSign in with username and password: ALLOW_USER_PASSWORD_AUTHChoice-based sign-in: ALLOW_USER_AUTH
Sign in with secure remote password (SRP): ALLOW_USER_SRP_AUTH
Get new user tokens from existing authenticated sessions: ALLOW_REFRESH_TOKEN_AUTH☑ Choice-based sign-in: ALLOW_USER_AUTH
☑ Sign in with username and password: ALLOW_USER_PASSWORD_AUTH
☑ Sign in with secure remote password (SRP): ALLOW_USER_SRP_AUTH
☑ Get new user tokens from existing authenticated sessions: ALLOW_REFRESH_TOKEN_AUTHDefault App Client ID
SPA App Client IDregion: 你的 AWS region
userPoolId: 你的 Cognito User Pool ID
clientId: 你的 SPA App Client IDhttp://localhost:5173/homeThe sign up process cannot be completed, can you figure out why?
Modify the source code to fix it.User Pool 创建时把 name 设置成了 required attribute，
但是 React 示例项目的 sign-up 表单或 sign-up 请求只提交了 email 和 password，
没有把 name 作为 Cognito UserAttribute 一起提交。Missing required parameter USER_ATTRIBUTE: nameInvalidParameterException用户输入 email 和 password 登录 Cognito
Cognito 验证身份
Cognito 返回 ID TokenAPI Gateway 检查 token
判断用户是否能访问 /pets
Identity Pool 给用户分配 IAM Rolehttp 和 https 不一致
localhost 端口不一致
多了或少了 /home
URL 最后多了 /
使用了没有配置过的 callback URLhttp://localhost:5173/homeToken source: AuthorizationAuthorization: <ID_TOKEN>Authorization: Bearer <ID_TOKEN>没有把 Authorizer 加到 /pets GET method
加错了 method
加完后没有 redeploy API
访问的是旧 stage
访问的 URL 不是 /prod/pets1. 检查 /pets GET Method Request 的 Authorization 是否是 Cognito Authorizer
2. 检查是否 deploy 到 prod stage
3. 检查浏览器或 curl 访问的 URL 是否是最新 invoke URL
4. 用 incognito window 测试，避免浏览器缓存或登录状态影响Method Request → Authorization
Deploy API
Stage 是否正确
URL 是否正确Token 已过期
使用了 Access Token，但当前配置期待 ID Token
Authorization header 写错
Token 前面多了不被接受的 Bearer
选错 User Pool
App Client 和 User Pool 不匹配
API 没有 redeploy
复制 token 时少了一部分1. 重新登录获取新的 ID Token
2. 确认 token_use 是 id
3. 确认 Authorizer 绑定的是正确 User Pool
4. 尝试 Authorization: <ID_TOKEN>
5. 如果用 Postman OAuth 自动加 Bearer，再尝试 Bearer 形式
6. 重新 deploy APICallback URL 没有添加到 App Client
URL 和实际请求不完全一致
http/https 不一致
localhost 端口不一致
路径不一致回到 Cognito App Client login settings
把实际使用的 callback URL 加入 Allowed callback URLs
保存后重新测试src/config.json 中 region 错误
userPoolId 错误
clientId 错误
使用了 default app client，而不是 SPA app client
SPA app client 没有开启 ALLOW_USER_PASSWORD_AUTH
用户还没有确认
密码错误1. 检查 config.json
2. 检查 App Client ID 是否来自新建的 SPA App Client
3. 检查 App Client 是否开启 ALLOW_USER_PASSWORD_AUTH
4. 检查浏览器 console 报错
5. 检查 Cognito Users and groups 中用户状态User Pool 要求 name 是 required attribute
但是代码只传了 email 和 password1. 给 sign-up form 加 name 输入框
2. sign-up 请求中加入 UserAttributes: name
3. 再次注册测试AWS Learner Lab 没有足够 IAM 权限
无法创建 Auth_Role / Unauth_Role
无法修改 role trust policy如果是权限限制，可以截图说明 Learner Lab 限制
Task 5 是 optional，不影响前面 Cognito User Pool + API Gateway Authorizer 主线Cognito User Pool 负责认证用户
API Gateway Authorizer 负责保护 API
Token 是前端、Cognito 和 API Gateway 之间传递身份信息的核心
Identity Pool 则进一步把登录用户映射到 AWS IAM 权限用户登录 Cognito
→ Cognito 返回 token
→ 用户请求 API 时带上 token
→ API Gateway Authorizer 验证 token
→ 验证通过后访问 APIcurl -i < YOUR_API_INVOKE_UR L> /pets curl -i https://xxxx.execute-api.us-east-1.amazonaws.com/prod/pets curl -i \ -H " Authorization: <YOUR_ID_TOKEN> " \ < YOUR_API_INVOKE_UR L> /pets curl -i \ -H " Authorization: eyJraWQiOiJ... " \ https://xxxx.execute-api.us-east-1.amazonaws.com/prod/pets FULL_URL= " $(pbpaste) " ID_TOKEN= " $FULL_URL " if [[ " $FULL_URL " == * " #id_token= " * ]]; then ID_TOKEN= " ${FULL_URL#*#id_token=} " ID_TOKEN= " ${ID_TOKEN%%&access_token=*} " fi python3 - " $ID_TOKEN " << ' PY ' import sys, json, base64, datetime token = sys.argv[1].strip() parts = token.split( " . " ) if len(parts) != 3: raise SystemExit( " This does not look like a valid JWT. Make sure you copied the full callback URL or the ID token. " ) def decode_part(part): part += " = " * (-len(part) % 4) return json.loads(base64.urlsafe_b64decode(part)) header = decode_part(parts[0]) payload = decode_part(parts[1]) print( " === JWT Header === " ) print(json.dumps(header, indent=2)) print( " \n=== JWT Payload === " ) print(json.dumps(payload, indent=2)) print( " \n=== Key fields for Lab === " ) print( " token_use: " , payload.get( " token_use " )) print( " email: " , payload.get( " email " )) print( " name: " , payload.get( " name " )) print( " issuer: " , payload.get( " iss " )) print( " audience/client_id: " , payload.get( " aud " )) if payload.get( " exp " ): print( " expires: " , datetime.datetime.fromtimestamp(payload[ " exp " ]).astimezone()) PY git clone https://github.com/jay-monash/cognito-react-js-v3.git cd cognito-react-js-v3 { " region " : " us-east-1 " , " userPoolId " : " us-east-1_xxxxxxxxx " , " clientId " : " xxxxxxxxxxxxxxxxxxxxxxxxxx " } import { SignUpCommand } from " @aws-sdk/client-cognito-identity-provider " ; const command = new SignUpCommand({ ClientId: config.clientId, Username: email, Password: password, UserAttributes: [ { Name: " email " , Value: email }, { Name: " name " , Value: name } ] }); await cognitoClient.send(command); await signUp({ username: email, password: password, options: { userAttributes: { email: email, name: name } } }); rm -rf node_modules package-lock.json npm cache verify npm install