开始使用浏览器

登录 AWS Management Console 并打开 Amazon Cognito 控制台，网址为。https://console.aws.amazon.com/cognito/

在左侧导航窗格中，选择身份池。

选择创建身份池。

在配置身份池信任中，选择来宾访问权限进行用户身份验证。

在配置权限中，选择创建新IAM角色并在角色名称中输入名称（例如 getStartedRole）。IAM

在配置属性中，在身份池名称中输入名称（例如 getStartedPool）。

在查看并创建中，确认您为新身份池所做的选择。选择编辑以返回向导并更改任何设置。完成后，选择创建身份池。

记下新创建的 Amazon Cognito 身份池的身份池 ID 和区域。你需要用这些值来替换 IDENTITY_POOL_ID 以及 REGION 参阅 步骤 4：设置浏览器代码 中的“如何入门？”

登录 AWS Management Console 并打开IAM控制台，网址为https://console.aws.amazon.com/iam/。

在左侧导航窗格中，选择 Roles（角色）。

选择要修改的角色的名称（例如 getStartedRole），然后选择 “权限” 选项卡。

选择添加权限，然后选择附加策略。

在为该角色添加权限页面中，找到并选中 AmazonS3 ReadOnlyAccess 的复选框。

选择添加权限。

登录 AWS Management Console 并打开 Amazon S3 控制台，网址为https://console.aws.amazon.com/s3/。

在左侧的导航窗格中，选择存储桶，然后选择创建存储桶。

输入符合存储桶命名规则的存储桶名称（例如 getstartedbucket），然后选择创建存储桶。

选择您创建的存储桶，然后选择对象选项卡。然后选择上传。

在文件和文件夹下，选择添加文件。

选择要上传的文件，然后选择打开。然后选择上传以完成将对象上传到您的存储桶。

接下来，选择存储桶的 “权限” 选项卡，然后在 “跨源资源共享” (CORS) 部分中选择 “编辑”。输入以下内容JSON：

[
  {
    "AllowedHeaders": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedOrigins": [
      "*"
    ],
    "ExposeHeaders": []
  }
]

选择 Save changes（保存更改）。

安装 Node.js。

从命令行中克隆 AWS 代码示例存储库：

git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git

导航到示例应用程序：

cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

要安装所需的程序包，请运行以下命令：

npm install

接下来，在文本编辑器中打开 src/App.tsx 并完成以下操作：

从命令行中导航到示例应用程序：

cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

在命令行中，运行以下命令：

npm run dev

Vite 开发环境将运行，并显示以下消息：

VITE v4.3.9  ready in 280 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

在您的网络浏览器中，导航到上面URL显示的内容（例如 http://localhost:5173）。该示例应用程序将向您显示 Amazon S3 存储桶中的对象文件名列表。