如何从前端从 Cognito 获取新令牌？

Question

我有一个反应应用程序，我正在使用 Cognito 来处理用户的身份验证。我需要知道如何使用刷新令牌调用 Cognito，以便它返回一个新令牌？

我查看了 Cognito 中的所有示例，但它们都不起作用。他们正在使用我没有的依赖项，并且没有明确列出如何获取它们。

有人可以帮忙吗？

Answer 1

根据文档，要将刷新令牌交换为访问令牌，您需要向令牌端点 oauth2/token 发出 POST 请求。请参阅此处的“用刷新令牌交换令牌”部分：https://docs.aws.amazon.com/cognito/latest/developerguide/token-endpoint.html

您可以使用 Fetch API 简单地发出请求。这是上面的文档：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API。

由于令牌请求涉及将您的客户端 ID 和客户端密码发送到 AWS cognito，因此我建议不要直接在 React 中发出此请求。如果您确实在 React 中这样做了，那么有人可能会找到您的客户端 ID 和客户端密码，并发出看起来像是来自您的应用程序的请求。

相反，您应该让 React 要求您的服务器发出请求并返回它收到的响应。

这是一个例子：

在服务器端，您可以创建类似/api/aws/tokens/refresh 或类似的路由，它要求请求正文中包含refreshToken。然后该路由的控制器可以调用此方法：

async getAccessToken(refreshToken) {
    const endpoint = 'https://mydomain.auth.us-east-1.amazoncognito.com/oauth2/token';
    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': `Basic ${btoa(CLIENT_ID:CLIENT_SECRET)}`
        },
        body: JSON.stringify({
            grant_type: 'refresh_token',
            client_id: CLIENT_ID,
            refresh_token: refreshToken
        })
    }
    const response = await fetch(endpoint, options);
    return response;
}

请注意，授权使用方法btoa，该方法对其输入进行base64编码。

在客户端，你的 React 应用可以像这样调用你的服务器：

async getAccessToken(refreshToken) {
    const endpoint = '/api/aws/tokens/refresh';
    const options = {
        method: 'POST',
        body: JSON.stringify({
            refreshToken: refreshToken
        })
    }
    const response = await fetch(endpoint, options);
    // store the tokens or return them
}

还有其他方法可以将您的服务器的工作与客户端的工作分开来解决这个问题，并且需要配置许多东西才能让这一切正常工作，但希望这对开始有所帮助。

Answer 2

您可以按照 Henry 的建议从头开始编写客户端，也可以使用库，一切顺利。

我们一直在使用这个包：https://www.npmjs.com/package/amazon-cognito-identity-js

它工作得很好。如果由于某些神秘的依赖问题而对您不起作用，请详细说明一下。也许我们会弄清楚的。