如何在我的 React 应用程序中列出我的 Cognito 用户池中的所有用户？

Question

我有一个网站编辑可以登录的 CMS 应用程序。我想为编辑创建一个仪表板，以便能够创建和删除站点用户。站点用户帐户将通过 AWS Cognito 用户池维护，而站点编辑通过他们的帐户登录 CMS。

首先，我希望能够列出给定用户池中的所有用户以供编辑查看，因此我正在关注 SDK 文档 here，但它没有解释如何将任何凭据传递给该方法。这是 SDK 的 v3，我能找到的任何类似的例子都使用 v2.

我走到这一步：

import { CognitoIdentityProviderClient, ListUsersCommand } from "@aws-sdk/client-cognito-identity-provider";

const client = new CognitoIdentityProviderClient({ region: "eu-west-2" });
const params = {};
const command = new ListUsersCommand({ UserPoolId: "My_User_Pool_Id" });

try {
    const data = await client.send(command);
    return this.setState({ users: data });
} catch (error) {
    console.error(error);
    return this.setState({ error: error });
} finally {
    this.setState({ loading: false });
}

但是当我运行上述代码并呈现组件时，这给了我一个错误：

Error: Credential is missing
    at SignatureV4.credentialProvider (runtimeConfig.browser.js:15)
    at SignatureV4.<anonymous> (SignatureV4.js:169)
    at step (tslib.es6.js:100)
    at Object.next (tslib.es6.js:81)
    at tslib.es6.js:74
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:70)
    at SignatureV4.signRequest (SignatureV4.js:165)
    at SignatureV4.<anonymous> (SignatureV4.js:85)
    at step (tslib.es6.js:100)

我假设我需要为我的仪表板创建一些凭据（通过 IAM？）以访问用户池，但我不知道在哪里创建这些凭据或如何将它们传递给 SDK。谷歌搜索这个主题似乎建议我应该创建一个未经身份验证的 Identity 池并为其附加 IAM 权限，然后将该池的凭据传递给 SDK，但这也给了我权限错误：

AccessDeniedException: User: [DashboardAdmin IdentityPool ARN] is not authorized to perform: cognito-idp:ListUsers on resource: [UserPool for Site Users ARN]

Answer 1

我最终找到了有关获取和设置凭据的 v3 文档的正确部分。

您可以通过新的 IAM 用户为您的应用程序创建凭据来获取凭据，如 here 所述。

根据 this guide，您可以通过多种不同的方式将它们添加到您的应用程序中，具体取决于您是在服务器端还是在客户端工作。例如，在服务器端对它们进行硬编码需要进行以下更改：

const client = new CognitoIdentityProviderClient({ region: "eu-west-2" });

改为

const client = new CognitoIdentityProviderClient({
    region: "eu-west-2",
    credentials: {
        accessKeyId: process.env.YOUR_AWS_ACCESS_KEY_ID,
        secretAccessKey: process.env.YOUR_AWS_SECRET_ACCESS_KEY,
    },
});

然后，错误 User is not authorized to perform: cognito-idp:ListUsers on resource 通过向您在上面创建的 IAM 用户添加允许 cognito-idp:ListUsers 的策略来解决。引导我朝着正确的方向前进。

如何在我的 React 应用程序中列出我的 Cognito 用户池中的所有用户？

How do I list all users in my Cognito User Pool in my React application?

amazon-web-services

amazon-cognito

aws-sdk-js