AWS Cognito UI 在调用回调页面时使用哈希来包含参数

Question

我在使用 AWS Cognito 提供的 UI 时遇到问题。

当我尝试使用提供的 UI 时，我使用填充的 URL 调用端点：

https://mydomain.auth.ap-northeast-1.amazoncognito.com/login?response_type=token&client_id=123456789&redirect_uri=http://localhost:3000/callback/

现在的问题是，在身份验证后，Cognito 使用 # 发回所需的参数。结果如下所示：

http://localhost:3000/callback/#id_token=eyJragIsm2PqVpw&access_token=eyJraWQiOiJ&expires_in=3600&token_type=Bearer

我很难在我的回调页面（这是一个 vue 应用程序）中读取 id_token 和 access_token。

如何配置 Cognito 以使用通常的问号 (?) 来传递查询字符串，或者，如何在哈希 (#) 后读取传递的参数。

我很感激你在这方面的建议。

Answer 1

如果您使用 Vue.js 路由器，那么处理哈希部分实际上非常容易。只需将此片段放在组件中的某个位置即可。参考： https: //router.vuejs.org/api/#the-route-object

let cognitoData = {}
if (this.$route.hash !== "") {
    let elementsString = decodeURIComponent(
        this.$route.hash.substr(1, this.$route.hash.length)
    );
    let params = elementsString.split("&");
    for (let param of params) {
        let values = param.split("=");
        cognitoData[values[0]] = values[1];
    }
}

// do your business with cognitoData