[适用于 JavaScript 的 AWS SDK V3 API 参考指南](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)详细描述了 适用于 JavaScript 的 AWS SDK 版本 3 (V3) 的所有 API 操作。
本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
# 开始使用浏览器
本节将引导您完成一个示例，该示例演示了如何在浏览器 JavaScript 中运行 AWS SDK 的版本 3 (V3)。
**注意**
在浏览器中运行 V3 与版本 2（V2）略有不同。有关更多信息，请参阅 [在 V3 中使用浏览器](welcome.md#v3_browsers)。
有关使用 (V3) 的 AWS SDK 的其他示例 JavaScript，请参阅[适用于 JavaScript (v3) 代码示例的 SDK](javascript_code_examples.md)。
**此 Web 应用程序示例向您展示：**
+ 如何使用 Amazon Cognito 访问 AWS 服务进行身份验证。
+ 如何使用 AWS Identity and Access Management (IAM) 角色读取亚马逊简单存储服务 (Amazon S3) 存储桶中的对象列表。
**注意**
此示例不 AWS IAM Identity Center 用于身份验证。
## 情景
Amazon S3 是一项对象存储服务，提供行业领先的可扩展性、数据可用性、安全性和性能。您可以使用 Amazon S3 将数据作为对象存储在名为存储桶的容器中。有关 Amazon S3 的更多信息，请参阅 [Amazon S3 用户指南](https://docs.aws.amazon.com/AmazonS3/latest/userguide/)。
此示例向您展示如何设置和运行代入 IAM 角色的 Web 应用程序，以便从 Amazon S3 存储桶中进行读取。该示例使用 React 前端库和 Vite 前端工具来提供开发环境。 JavaScript 该网络应用程序使用 Amazon Cognito 身份池来提供访问 AWS 服务所需的凭证。随附的代码示例演示了 JavaScript 在 Web 应用程序中加载和使用 S AWS DK 的基本模式。
## 步骤 1：创建一个 Amazon Cognito 身份池和 IAM 角色
在本练习中，您将创建并使用一个 Amazon Cognito 身份池，为 Web 应用程序提供对 Amazon S3 服务的无需验证身份的访问权限。创建身份池还会创建一个 AWS Identity and Access Management (IAM) 角色来支持未经身份验证的访客用户。在本练习中，我们仅使用未经身份验证的用户角色，将重点放在任务上。您可在以后集成对身份提供商和通过身份验证的用户的支持。有关添加 Amazon Cognito 身份池的更多信息，请参阅《Amazon Cognito 开发人员指南**》中的[教程：创建身份池](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html)。
**创建一个 Amazon Cognito 身份池和关联的 IAM 角色**
1. 登录 AWS 管理控制台 并打开 Amazon Cognito 控制台，网址为。[https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)
1. 在左侧导航窗格中，选择**身份池**。
1. 选择**创建身份池**。
1. 在**配置身份池信任**中，选择**来宾访问权限**进行用户身份验证。
1. 在**配置权限**中，选择**创建新的 IAM 角色**并在 I **AM 角色名称中输入名称**（例如 *getStartedRole*）。
1. 在**配置属性**中，在**身份池名称中输入名称**（例如 *getStartedPool*）。
1. 在**查看并创建**中，确认您为新身份池所做的选择。选择**编辑**以返回向导并更改任何设置。完成后，选择**创建身份池**。
1. 记下新创建的 Amazon Cognito 身份池的**身份池 ID** 和**区域**。您需要用这些值来替换*IDENTITY\$1POOL\$1ID*和输*REGION*入[步骤 4：设置浏览器代码](#getting-started-browser-create-html)。
在创建 Amazon Cognito 身份池之后，您已准备好添加 Web 应用程序所需的 Amazon S3 的权限。
## 步骤 2：将策略添加到创建的 IAM 角色
要允许访问您的 Web 应用程序中的 Amazon S3 存储桶，请使用为您的 Amazon Cognito 身份池（例如 *getStartedRole*）创建的未经身份验证的 IAM 角色（例如 *getStartedPool*）。这需要您将 IAM 策略添加到角色。有关修改 IAM 角色的更多信息，请参阅《IAM 用户指南》**中的[修改角色权限策略](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy)。
**将 Amazon S3 策略添加到与未经身份验证用户关联的 IAM 角色**
1. 登录 AWS 管理控制台 并打开 IAM 控制台，网址为[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)。
1. 在左侧导航窗格中，选择 **角色**。
1. 选择要修改的角色的名称（例如 *getStartedRole*），然后选择 “**权限**” 选项卡。
1. 选择**添加权限**，然后选择**附加策略**。
1. 在为该角色**添加权限**页面中，找到并选中 **AmazonS3 ReadOnlyAccess** 的复选框。
**注意**
您可以使用此过程来启用对任何 AWS 服务的访问权限。
1. 选择**添加权限**。
在您创建 Amazon Cognito 身份池并将 Amazon S3 的权限添加到未验证身份用户的 IAM 角色之后，您已准备好添加并配置 Amazon S3 存储桶。
## 步骤 3：添加 Amazon S3 存储桶和对象
在此步骤中，您将为示例添加 Amazon S3 存储桶和对象。您还将启用存储桶的跨源资源共享 (CORS)。有关创建 Amazon S3 存储桶和对象的更多信息，请参阅《Amazon S3 入门指南》**中的 [Amazon S3 入门](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html)。
**使用 CORS 添加 Amazon S3 存储桶和对象**
1. 登录 AWS 管理控制台 并打开 Amazon S3 控制台，网址为[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)。
1. 在左侧的导航窗格中，选择**存储桶**，然后选择**创建存储桶**。
1. 输入符合[存储桶命名规则](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html)的存储桶名称（例如 *getstartedbucket*），然后选择**创建存储桶**。
1. 选择您创建的存储桶，然后选择**对象**选项卡。然后选择**上传**。
1. 在**文件和文件夹**下，选择**添加文件**。
1. 选择要上传的文件，然后选择**打开**。然后选择**上传**以完成将对象上传到您的存储桶。
1. 接下来，选择存储桶的**权限**选项卡，然后在**跨源资源共享（CORS）**部分选择**编辑**。输入以下 JSON：
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
```
1. 选择**保存更改**。
添加 Amazon S3 存储桶并添加对象后，您就可以设置浏览器代码了。
## 步骤 4：设置浏览器代码
示例应用程序包含一个单页的 React 应用程序。可以在此[处找到此示例的](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects)文件 GitHub。
**设置示例应用程序**
1. 安装 [Node.js](https://nodejs.org/en/download)。
1. 从命令行中克隆 [AWS 代码示例存储库](https://github.com/awsdocs/aws-doc-sdk-examples/)：
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. 导航到示例应用程序：
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. 要安装所需的程序包，请运行以下命令：
```
npm install
```
1. 接下来，在文本编辑器中打开 `src/App.tsx` 并完成以下操作：
+ *YOUR\$1IDENTITY\$1POOL\$1ID*替换为您在中记下的 Amazon Cognito 身份池 ID。[步骤 1：创建一个 Amazon Cognito 身份池和 IAM 角色](#getting-started-browser-create-identity-pool)
+ 将区域值替换为为您的 Amazon S3 存储桶和 Amazon Cognito 身份池分配的区域。请注意，两种服务的区域必须相同（例如 *us-east-2*）。
+ *bucket-name*替换为您在中创建的存储桶名称[步骤 3：添加 Amazon S3 存储桶和对象](#getting-started-browser-create-s3-bucket)。
替换完文本后，保存 `App.tsx` 文件。现在您可以运行该 Web 应用程序了。
## 步骤 5：运行示例
**运行示例应用程序**
1. 从命令行中导航到示例应用程序：
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. 在命令行中，运行以下命令：
```
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
```
1. 在您的 Web 浏览器中，导航到上面显示的 URL（例如 http://localhost:5173）。该示例应用程序将向您显示 Amazon S3 存储桶中的对象文件名列表。
## 清理
要清除您在本教程中创建的资源，请执行以下操作：
+ 在 [Amazon S3 控制台](https://console.aws.amazon.com/s3/)中，删除创建的所有对象和所有存储桶（例如 *getstartedbucket*）。
+ [在 IAM 控制台](https://console.aws.amazon.com/iam/home#/roles)中，删除角色名称（例如 *getStartedRole*）。
+ [在 Amazon Cognito 控制台](https://console.aws.amazon.com/cognito/home#/identity)中，删除身份池名称（例如）。*getStartedPool*