如何配置AWS Cognito用户池重定向到自托管UI

Cognito没有提供直接将/authorize端点默认重定向到自定义UI的开关，你不需要修改Cognito侧的OIDC服务配置，只需要调整前端OIDC库的跳转逻辑、配合自托管UI的流程接管即可实现需求，具体步骤如下：

关键提示：不要修改Cognito用户池的OIDC元数据配置，否则会导致angular-auth-oidc-client拉取配置失败、令牌校验不通过。

一、Cognito用户池前置配置 #

• 打开你当前使用的Cognito应用客户端配置，在「认证流程」选项中勾选ALLOW_USER_PASSWORD_AUTH、ALLOW_REFRESH_TOKEN_AUTH两个流，允许自托管UI直接调用Cognito的认证、注册接口。
• 在「托管UI」配置页的允许回调地址、允许登出地址列表中，同时加入你的Angular应用地址、自托管UI地址，避免后续回调被Cognito跨域拦截。
• 进入应用客户端的「属性权限」设置，将注册流程需要收集的自定义属性设置为「可写」「可读」，否则自托管UI提交自定义属性时会被Cognito权限校验拦截。
• 保留原有.wellknown端点、OIDC配置不变，不需要修改Cognito的颁发者、密钥等核心配置，避免破坏现有angular-auth-oidc-client的令牌校验逻辑。

二、angular-auth-oidc-client 适配配置 #

你当前触发跳转时直接走Cognito默认/authorize地址才会进入官方托管UI，只需要覆盖默认的授权跳转逻辑即可：

• 保留原有OIDC基础配置，参考如下：

// Angular OIDC 配置
export const authConfig = {
  authority: 'https://cognito-idp.<你的AWS区域>.amazonaws.com/<你的用户池ID>',
  clientId: '<你的Cognito应用客户端ID>',
  redirectUrl: window.location.origin + '/oidc-callback',
  postLogoutRedirectUri: window.location.origin,
  responseType: 'code',
  scope: 'openid profile email',
  silentRenew: true,
  useRefreshToken: true,
};

• 替换默认的授权触发逻辑：在路由守卫、登录按钮点击事件中，不要直接调用库默认的authorize()方法跳Cognito地址，而是先通过库内置方法生成完整的OIDC授权参数，再跳转到自托管UI地址，参数全部透传：

// 路由守卫中未登录的处理逻辑
canActivate(): Observable<boolean> {
  return this.oidcSecurityService.isAuthenticated$.pipe(
    map(({ isAuthenticated }) => {
      if (isAuthenticated) return true;
      // 通过库内置方法生成标准OIDC授权URL（包含state、nonce、PKCE等校验参数）
      const cognitoAuthorizeUrl = new URL(this.oidcSecurityService.getAuthorizeUrl());
      // 替换跳转目标为自托管UI，透传所有OIDC参数
      const selfHostedLoginUrl = new URL('https://你的自托管UI部署地址/login');
      cognitoAuthorizeUrl.searchParams.forEach((value, key) => {
        selfHostedLoginUrl.searchParams.set(key, value);
      });
      window.location.href = selfHostedLoginUrl.toString();
      return false;
    })
  );
}

三、自托管UI侧流程处理 #

• 自托管UI加载后，从URL参数中取出所有透传的OIDC参数暂存，渲染自定义的注册、登录表单，用户提交注册时直接调用Cognito的SignUp接口，将自定义属性放入UserAttributes字段提交即可，这是Cognito原生支持的能力，只是官方托管UI没有开放对应表单配置。
• 用户完成注册、账号验证、登录流程后，将之前暂存的所有OIDC参数原封不动拼接到Cognito的/authorize地址上发起请求，此时Cognito识别到用户已完成认证，不会再展示官方托管UI，会直接重定向回你Angular应用配置的回调地址，并携带授权码。
• Angular应用的回调页逻辑不需要做任何修改，angular-auth-oidc-client会自动完成授权码换令牌、令牌校验、会话存储的全流程，和你之前使用官方托管UI的体验完全一致。

可选优化：如果你不想经历两次跳转，也可以在自托管UI完成登录后直接调用Cognito的InitiateAuth接口获取令牌，再将令牌传回Angular应用手动调用库的setTokens方法注入会话，但这种方式需要自行处理state、nonce、PKCE的校验逻辑，改造成本更高，优先推荐透传参数走标准OIDC流程的方案。
注意：不要尝试通过修改Cognito托管UI域名解析、配置反向代理的方式强制跳转，这类操作会破坏OIDC流程的域名校验规则，导致令牌校验失败。

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