如何在Amazon Cognito登录成功后带动态查询参数重定向

步骤1：正确构造state参数 #

不要直接把查询参数零散拼到state里，而是把**完整的原始请求路径（包含查询参数）**做URL编码后传给state。比如用户访问https://example.com/?Id=500Dp000001a5TwIAI，提取/?Id=500Dp000001a5TwIAI，用encodeURIComponent()编码得到%2F%3FId%3D500Dp000001a5TwIAI，把这个作为state的值传入Cognito授权端点。

示例前端代码：

// 获取当前页面的完整路径（含查询参数）
const originalPath = window.location.pathname + window.location.search;
// URL编码后作为state参数
const encodedState = encodeURIComponent(originalPath);
// 构造Cognito登录跳转URL
const cognitoLoginUrl = `https://你的用户池域名.auth.区域.amazoncognito.com/login?client_id=你的客户端ID&response_type=code&scope=openid&redirect_uri=https://example.com/callback&state=${encodedState}`;

步骤2：回调页面解码state并完成重定向 #

用户登录成功后，Cognito会将state参数原样带回回调页面，此时执行以下操作：

1. 从回调URL的查询参数中取出state值
2. 用decodeURIComponent()解码state，还原出原始路径+查询参数
3. 重定向到解码后的路径

示例回调页面代码：

// 从URL查询参数中提取state
const urlParams = new URLSearchParams(window.location.search);
const encodedState = urlParams.get('state');
if (encodedState) {
  // 解码得到原始访问路径
  const originalPath = decodeURIComponent(encodedState);
  // 跳转回用户最初访问的页面
  window.location.href = originalPath;
} else {
  // 无state时默认跳转到首页
  window.location.href = '/';
}

关键注意事项 #

• 禁止手动拼接查询参数到state：直接传递编码后的完整路径，可彻底避免符号转义、格式错误的问题，Cognito会自动安全传输state参数。
• 确认回调URL已在Cognito客户端配置中授权：回调页面必须添加到用户池客户端的「回调URLs」列表中，否则Cognito会拒绝重定向。
• 注意state参数长度限制：Cognito允许state最大为2048字符，确保编码后的原始路径不超出此限制。

内容的提问来源于stack exchange，提问作者Matthew Metros