AWS Cognito w React.js 本地主机 CORS 错误

Question

我在搜索时也看到过类似的问题 - 但假设我正在使用 AWS 示例代码在 React 中设置 Cognito。 将回调/注销 URI 设置为 http://localhost:3000，AWS 字面意思是需要 https 的一个例外。现在我不在我的工作站上 - 但我很确定我已经尝试过不使用该端口，但看不到我错过了什么，因为我没有看到 CORS 问题的原因，因为我没有做任何事情但测试登录。 我不认为 Cognito 控制台中没有针对 CORS 的其他设置 - 但我在 Cognito 中托管的 UI 链接可以工作 - 正是这段代码如何调用它。 感谢您的指导，我只是不想仅仅为了测试和开发而投入生产。 是我的浏览器吗？ 我将使用 Amplify，我见过它可以管理 CORS，但这个感觉很奇怪。 感谢您的支持！

// index.js
import { AuthProvider } from "react-oidc-context";

const cognitoAuthConfig = {
  authority: "https://cognito-idp.us-east-1.amazonaws.com/us-secretStuff(user pool)",
  client_id: "secretStuff client id",
  redirect_uri: "http://localhost:3000",
  response_type: "code",
  scope: "email openid phone",
};

const root = ReactDOM.createRoot(document.getElementById("root"));

// wrap the application with AuthProvider
root.render(
  <React.StrictMode>
    <AuthProvider {...cognitoAuthConfig}>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

用secretStuff编辑了帐户内容，但这些内容已经过验证..但请注意权限，它只是以用户池ID结尾。 接下来是app.js

// App.js

import { useAuth } from "react-oidc-context";

function App() {
  const auth = useAuth();

  const signOutRedirect = () => {
    const clientId = "secretStuff client ID";
    const logoutUri = "http://localhost:3000";
    const cognitoDomain = "https://us-east-secretStuff.auth.us-east-1.amazoncognito.com";
    window.location.href = `${cognitoDomain}/logout?client_id=${clientId}&logout_uri=${encodeURIComponent(logoutUri)}`;
  };

  if (auth.isLoading) {
    return <div>Loading...</div>;
  }

  if (auth.error) {
    return <div>Encountering error... {auth.error.message}</div>;
  }

  if (auth.isAuthenticated) {
    return (
      <div>
        <pre> Hello: {auth.user?.profile.email} </pre>
        <pre> ID Token: {auth.user?.id_token} </pre>
        <pre> Access Token: {auth.user?.access_token} </pre>
        <pre> Refresh Token: {auth.user?.refresh_token} </pre>

        <button onClick={() => auth.removeUser()}>Sign out</button>
      </div>
    );
  }

  return (
    <div>
      <button onClick={() => auth.signinRedirect()}>Sign in</button>
      <button onClick={() => signOutRedirect()}>Sign out</button>
    </div>
  );
}
  
export default App;

Answer 1

找到解决方案 -

请密切注意这一点：

const oidcConfig = {
authority: "https://us-east-*********.auth.us-east-1.amazoncognito.com",
client_id: "secretStuff",
redirect_uri: "http://localhost:3000",
response_type: "code",
scope: "openid email phone",};

无论出于何种原因，我的权力都在使用我的 Cognito 域。 我不确定是否有人可以在不查看我的帐户信息的情况下解决此问题。

对于后代 - oidc / 权限 url 看起来有点不同，用户组 ID 位于末尾：

"https://cognito-idp.us-east-1.amazonaws.com/us-east-1_exAMpLe"

希望这可以帮助任何随机搜索同一问题的人。