AWS Cognito托管的UI和具有授权码OAuth流程的Amplify Auth

问题描述

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

I have a Vue.js webapp that I am trying to add simple authentication to using AWS Cognito and Amplify Auth. I have my user pool set up with "Authorization code grant" enabled for the OAuth flow. I also have the redirect URL set as https://example.auth.us-east-2.amazoncognito.com/login?response_type=code&client_id=XXXXXXXX&redirect_uri=https://example.com/auth/verify for the hosted UI.

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

This is what's within the page the hosted UI redirects to:

import { Auth } from "aws-amplify";

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

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

When I sign in the first time through the hosted UI and am redirected, I get an error and am not recognized by Amplify as being authenticated. However if I sign in a second time, there is no error in the console and I have an authenticated session.

我确实知道授权代码授予不会将令牌放在URL中，但是即使在首次登录时，我也确实将它们存储在localstorage中.我尝试切换为使用令牌" OAuth流，但使用了Amplify文档说没有提供刷新令牌，我不想将会话限制为1小时.这里有什么指导吗?

I do know that authorization code grant doesn't put the tokens in the URL, but I do see them in localstorage even on the first sign in. I have tried switching to using the "token" OAuth flow but the Amplify docs say the refresh token isn't provided that way and I'd like to not have sessions limited to 1 hour. Any guidance here?

推荐答案

对于面临相同问题的任何人，这似乎都是已知问题.

For anyone facing the same problem, this seems to be a known issue.

解决方法是订阅集线器操作并在其中进行处理

The workaround is to subscribe to Hub actions and handle it there like

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流程的Amplify Auth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！