javascript - 如何从前端从 Cognito 获取新 token ？

Question

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

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

有人可以帮忙吗？

Answer 1

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

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

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

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

这是一个例子:

在服务器端，您可以制作一个像 /api/aws/tokens/refresh 或类似的路由，它需要在请求正文中有一个 refreshToken。然后该路由的 Controller 可以调用此方法:

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
}

在这个问题上，还有其他方法可以将服务器和客户端的工作分开，并且可以配置很多东西来使这一切正常工作，但希望这对入门有所帮助。