AWS Cognito 托管 UI 和 Amplify Auth 与授权代码 OAuth 流

Question

我有一个 Vue.js Web 应用程序，我正在尝试使用 AWS Cognito 和 Amplify Auth 添加简单的身份验证。我的用户池设置了为 OAuth 流程启用的“授权代码授予”。我还https://example.auth.us-east-2.amazoncognito.com/login?response_type=code&client_id=XXXXXXXX&redirect_uri=https://example.com/auth/verify为托管 UI设置了重定向 URL 。

这是托管 UI 重定向到的页面中的内容：

import { Auth } from "aws-amplify";

export default {
    async created() {
        try {
            await Auth.currentSession();
        } catch {
            console.error("Not authorized");
        }
    }
}

当我第一次通过托管 UI 登录并被重定向时，出现错误并且 Amplify 未将其识别为已通过身份验证。但是，如果我第二次登录，控制台中没有错误并且我有一个经过身份验证的会话。

我确实知道授权代码授权不会将令牌放在 URL 中，但即使在第一次登录时，我也确实在 localstorage 中看到了它们。我曾尝试切换到使用“令牌”OAuth 流，但 Amplify 文档说刷新令牌不是这样提供的，我不希望会话限制为 1 小时。这里有什么指导吗？

Answer 1

对于任何面临同样问题的人来说，这似乎是一个已知问题。

解决方法是订阅集线器操作并在那里处理它

Hub.listen("auth", ({ payload: { event, data } }) => {
  switch (event) {
  case "signIn":
    // signin actions
    Auth.currentSession()
      .then(user => console.log(user)) // redirect to default page
      .error(err => console.log(err))
  case "signOut":
    // signout actions, redirect to '/' etc
  case "customOAuthState":
    // other changes
  }
}

参考https://github.com/aws-amplify/amplify-js/issues/5133#issuecomment-600759135