AWS Cognito 托管 UI 并使用授权代码 OAuth 流程放大 Auth

Question

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

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

import { Auth } from "aws-amplify";

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

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

我知道授权码授予不会将令牌放入 URL，但我确实在第一次登录时在本地存储中看到了它们。我尝试切换到使用 [=22] =] 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

AWS Cognito 托管 UI 并使用授权代码 OAuth 流程放大 Auth

AWS Cognito hosted UI and Amplify Auth with authorization code OAuth flow

amazon-web-services

vue.js

amazon-cognito

aws-amplify