如何使用AWS Cognito Hosted UI实现授权码授权流程？

• AWS Amplify Auth v6：你之前用到的Amplify新版Auth模块已经完全适配Hosted UI的授权码流程，不需要使用旧版的withAuthenticationHOC，支持自定义路由级别的页面保护，无需包裹整个应用，也不需要手动处理跳转、code换token、token自动刷新等逻辑，对新手友好度最高。
• react-oidc-context：轻量的React专属OIDC客户端库，和Cognito兼容性极佳，自带PKCE支持，封装了完整的授权流程逻辑，同时支持自定义路由守卫实现部分页面保护，体积比Amplify小很多，适合不想引入全量Amplify的场景。

这是Cognito的正常限制，授权端点和令牌端点都不支持前端直接发起AJAX请求，必须通过window.location跳转的方式访问授权端点，你之前的跳转逻辑是正确的，不需要额外配置CORS。

你可以按优先级检查以下配置项：

• 检查请求头：/token端点要求POST请求的Content-Type必须为application/x-www-form-urlencoded，如果用application/json格式传参会直接返回400。
• 检查必填参数是否完整：请求必须携带grant_type=authorization_code、client_id（用户池应用客户端ID）、code（回调地址拿到的授权码）、redirect_uri，其中redirect_uri必须和跳转到Hosted UI时传入的redirect_uri完全一致，包括大小写、末尾斜杠，差一个字符都会校验失败。如果你的应用客户端配置了密钥，还要额外携带client_secret参数。
• 检查PKCE参数：如果你跳转授权端点时传入了code_challenge参数，换token时必须携带对应的code_verifier参数，否则会返回400。
• 检查授权码有效性：授权码是一次性的，有效期只有5分钟，重复使用、或者超时使用都会返回400，拿到code后需要立即发起换token请求。
• 检查Cognito控制台配置：确认应用客户端已开启Authorization code grant授权流程，回调地址已添加到「允许的回调URL」列表中，登出回调地址也按需配置。

你可以把整个流程类比成去场馆看演唱会：

1. 你（React应用）带着身份证（client_id）去场馆入口（Cognito Hosted UI），告诉工作人员你预约过的进场后返回地址（redirect_uri），工作人员核对你是在预约名单里的用户，就指引你去验票闸机（登录/注册页面）。
2. 你完成身份核验（登录成功），工作人员给你一张兑换券（授权码code），同时按照你之前留的地址把你送回指定位置（跳转到回调页面，code放在地址栏参数里）。
3. 你拿着兑换券去票务中心（/token端点）兑换正式门票（access_token、id_token、refresh_token），之后你拿正式门票就能进对应看台（访问受保护的页面、调用后端接口）。

• 初期优先使用成熟SDK处理授权流程，不要手动实现调用授权、换token、刷新token的逻辑，等完整跑通一次登录流程后再按需自定义细节。
• 不需要一开始就背所有OAuth/OIDC的概念，先搞清楚核心几个参数的作用，跑通流程后再逐步深入了解安全相关的规则即可。

内容的提问来源于stack exchange，提问作者Matt Frei