共享Cognito用户池的多应用客户端：JS SDK登录后Hosted UI未识别登录状态

安全阿岳

2026-7-7

解决Cognito JS SDK登录与托管UI状态同步问题

核心原因

React应用通过AWS JS SDK登录后，令牌默认存储在应用本地（如localStorage或sessionStorage），而Cognito托管UI依赖amazoncognito.com域下的会话Cookie识别登录状态，两者存储机制独立，因此无法自动同步。

可行解决方案

方案1：手动触发Cognito Cookie同步

当React应用通过JS SDK完成登录并获取令牌后，需要主动触发Cognito设置会话Cookie：

确保用户池应用客户端已开启授权码流，并将React应用的回调URL加入允许列表。

登录成功后，构造Cognito授权端点URL并跳转，获取授权码：

const authUrl = `https://${你的用户池域名}/oauth2/authorize?response_type=code&client_id=${你的客户端ID}&redirect_uri=${你的回调URL}&scope=openid+profile+email&state=随机状态值`;
window.location.href = authUrl;

在回调页面，用授权码调用oauth2/token端点换取令牌，此时Cognito会自动在amazoncognito.com域下设置会话Cookie，托管UI即可识别登录状态。

方案2：用AWS Amplify简化同步流程

如果React应用使用Amplify（AWS JS SDK的封装库），可通过配置OAuth模式自动处理Cookie同步：

配置Amplify时启用OAuth参数：

import { Amplify } from 'aws-amplify';

Amplify.configure({
  Auth: {
    userPoolId: '你的用户池ID',
    userPoolWebClientId: '你的客户端ID',
    oauth: {
      domain: '你的Cognito托管域名',
      scope: ['openid', 'profile', 'email'],
      redirectSignIn: '你的登录回调URL',
      redirectSignOut: '你的退出回调URL',
      responseType: 'code'
    }
  }
});