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

Posted 2023-03-27

【中文标题】AWS Cognito UI 在调用回调页面时使用哈希来包含参数

【英文标题】：AWS Cognito UI uses a hash to include parameters when it calls the callback page

【发布时间】：2019-01-23 12:55:44

【问题描述】：

我在使用 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 以使用通常的问号 (?) 来传递查询字符串，或者，如何读取哈希 (#) 后传递的参数。

感谢您对此提出的建议。

【问题讨论】：

这个问题解决了吗？对我来说同样的问题。

我也有同样的问题。

@FakeFootball 我更改了我的代码以搜索？ # 然后处理每个案例。只是一种解决方法。

【参考方案1】：

如果您使用的是 Vue.js 路由器，实际上处理哈希部分非常容易。只需将此 sn-p 放在组件中的某个位置即可。 参考：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

【讨论】：

这不是解决方案。只是一个 Vue.js 拼凑。