

 [适用于 JavaScript 的 AWS SDK V3 API 参考指南](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)详细描述了 适用于 JavaScript 的 AWS SDK 版本 3 (V3) 的所有 API 操作。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 开始使用 AWS 适用的 SDK JavaScript
<a name="getting-started"></a>

的 AWS SDK JavaScript 提供在浏览器或 Node.js 环境中对 Web 服务的访问。本节包含入门练习，向您展示如何在每种 JavaScript 环境 JavaScript 中使用 AWS SDK。

**Topics**
+ [使用 SDK 进行身份验证 AWS](getting-your-credentials.md)
+ [开始使用 Node.js](getting-started-nodejs.md)
+ [开始使用浏览器](getting-started-browser.md)
+ [React Native 入门](getting-started-react-native.md)

# 使用 SDK 进行身份验证 AWS
<a name="getting-your-credentials"></a>

使用开发 AWS 时，您必须确定您的代码是如何进行身份验证的。 AWS 服务您可以根据环境和可用的访问权限以不同的方式配置对 AWS 资源的编程 AWS 访问权限。

要选择您的身份验证方法并针对 SDK 进行配置，请参阅[和*工具参考指南中的身份验证AWS SDKs 和*访问](https://docs.aws.amazon.com/sdkref/latest/guide/access.html)。

我们建议在本地开发且雇主未向其提供身份验证方法的新用户进行设置 AWS IAM Identity Center。此方法包括安装 AWS CLI 以便于配置和定期登录 AWS 访问门户。如果您选择此方法，则在完成*AWS SDKs 和工具参考指南*[中的 IAM Identity Center 身份验证](https://docs.aws.amazon.com/sdkref/latest/guide/access-sso.html)程序后，您的环境应包含以下元素：
+  AWS CLI，用于在运行应用程序之前启动 AWS 访问门户会话。
+ [共享 AWS`config` 文件](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html)，其 `[default]` 配置文件包含一组可从 SDK 中引用的配置值。要查找此文件的位置，请参阅*AWS SDKs 和工具参考指南*中的[共享文件的位置](https://docs.aws.amazon.com/sdkref/latest/guide/file-location.html)。
+  共享 `config` 文件设置了 [https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html](https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html) 设置。这将设置 SDK 用于 AWS 请求的默认值 AWS 区域 。此区域用于未指定使用区域的 SDK 服务请求。
+  在向 AWS发送请求之前，SDK 使用配置文件的 [SSO 令牌提供程序配置](https://docs.aws.amazon.com/sdkref/latest/guide/feature-sso-credentials.html#feature-sso-credentials-profile)来获取凭证。该`sso_role_name`值是与 IAM 身份中心权限集关联的 IAM 角色，允许访问您的应用程序中的用户。 AWS 服务 

  以下示例 `config` 文件展示了使用 SSO 令牌提供程序配置来设置的默认配置文件。配置文件的 `sso_session` 设置是指所指定的 [`sso-session` 节](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html#section-session)。该`sso-session`部分包含启动 AWS 访问门户会话的设置。

  ```
  [default]
  sso_session = my-sso
  sso_account_id = 111122223333
  sso_role_name = SampleRole
  region = us-east-1
  output = json
  
  [sso-session my-sso]
  sso_region = us-east-1
  sso_start_url = https://provided-domain.awsapps.com/start
  sso_registration_scopes = sso:account:access
  ```

 JavaScript v3 版 S AWS DK 无需向您的应用程序添加其他软件包（例如`SSO`和`SSOOIDC`）即可使用 IAM 身份中心身份验证。

有关明确使用此凭证提供程序的详细信息，请参阅 npm（Node.js 程序包管理器）网站上的 [https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso](https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso)。

## 启动 AWS 访问门户会话
<a name="accessportal"></a>

在运行可访问的应用程序之前 AWS 服务，您需要为软件开发工具包进行有效的 AWS 访问门户会话，才能使用 IAM Identity Center 身份验证来解析证书。根据配置的会话时长，访问权限最终将过期，并且开发工具包将遇到身份验证错误。要登录 AWS 访问门户，请在中运行以下命令 AWS CLI。

```
aws sso login
```

如果遵循引导并具有默认的配置文件设置，则无需使用 `--profile` 选项来调用该命令。如果您的 SSO 令牌提供程序配置在使用指定的配置文件，则命令为 `aws sso login --profile named-profile`。

要选择性地测试是否已有活动会话，请运行以下 AWS CLI 命令。

```
aws sts get-caller-identity
```

如果会话是活动的，则对此命令的响应会报告共享 `config` 文件中配置的 IAM Identity Center 账户和权限集。

**注意**  
如果您已经有一个有效的 AWS 访问门户会话并且`aws sso login`正在运行，则无需提供凭据。  
登录过程可能会提示您允许 AWS CLI 访问您的数据。由于 AWS CLI 是在适用于 Python 的 SDK 之上构建的，因此权限消息可能包含`botocore`名称的变体。

## 使用控制台登录凭证
<a name="use-con-login-creds"></a>

您可以使用现有的 AWS 管理控制台登录凭据以编程方式访问 AWS 服务。在基于浏览器的身份验证流程之后， AWS 生成可在本地开发工具（如 CL AWS I 和 AWS SDK）上使用的临时证书。 JavaScript此功能简化了配置和管理 AWS CLI 凭证的过程。要了解如何开始使用，请按照[使用控制台凭据登录进行 AWS 本地开发](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html)的说明进行操作。

运行 **aws login** 命令时，您可以从活动控制台会话中进行选择，也可以通过基于浏览器的身份验证流程登录，这将自动生成临时凭证。的 AWS SDK 会在证书到期前 5 分钟 JavaScript 自动刷新证书，每组凭证的有效期最长 12 小时。有关更多信息，请参阅 [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials)。

## 更多身份验证信息
<a name="credother"></a>

人类用户，也称为*人类身份*，是应用程序的人员、管理员、开发人员、操作员和使用者。他们必须具有身份才能访问您的 AWS 环境和应用程序。作为组织成员的人类用户（即您、开发人员）也称为*工作人员身份*。

访问时使用临时证书 AWS。您可以为人类用户使用身份提供商，通过扮演提供临时证书的角色来提供对 AWS 账户的联合访问权限。对于集中式访问权限管理，我们建议使用 AWS IAM Identity Center (IAM Identity Center) 来管理对您账户的访问权限以及这些账户中的其他权限。有关更多替代方案，请参阅以下内容：
+ 有关最佳实践的更多信息，请参阅《IAM 用户指南》**中的 [IAM 中的安全最佳实践](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html)。
+ 要创建短期 AWS 证书，请参阅 *IAM 用户指南*中的[临时安全证书](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html)。
+ 要了解其他 AWS SDK fo JavaScript r V3 凭据提供商，请参阅*工具参考*指南中的[标准化凭证提供商](https://docs.aws.amazon.com/sdkref/latest/guide/standardized-credentials.html)。AWS SDKs 

# 开始使用 Node.js
<a name="getting-started-nodejs"></a>

本指南介绍如何初始化 NPM 包、向包中添加服务客户端以及如何使用 JavaScript SDK 调用服务操作。

## 情景
<a name="getting-started-nodejs-scenario"></a>

**使用一个执行以下操作的主文件创建一个新的 NPM 软件包：**
+ 创建 Amazon Simple Storage Service 存储桶
+ 将对象放入 Amazon S3 存储桶
+ 读取 Amazon S3 存储桶中的对象
+ 确认用户是否要删除资源

## 先决条件
<a name="getting-started-nodejs-prerequisites"></a>

在运行示例之前，您必须先执行以下操作：
+ 配置 SDK 身份验证。有关更多信息，请参阅 [使用 SDK 进行身份验证 AWS](getting-your-credentials.md)。
+ 安装 [Node.js](https://nodejs.org/en/download)。 AWS 建议使用 Active LTS 版本的 Node.js 进行开发。

## 步骤 1：设置软件包结构并安装客户端程序包
<a name="getting-started-nodejs-setup-structure"></a>

设置程序包结构并安装客户端程序包：

1. 创建一个新文件夹 `nodegetstarted` 用于包含程序包。

1. 从命令行导航到新文件夹。

1. 运行以下命令以创建默认的 `package.json` 文件：

   ```
   npm init -y
   ```

1. 要安装 Amazon S3 客户端程序包，请运行以下命令：

   ```
   npm i @aws-sdk/client-s3
   ```

1. 将 `"type": "module"` 添加到 `package.json` 文件。这会告诉 Node.js 使用现代 ESM 语法。最终的 `package.json` 应类似于以下内容：

   ```
   {
     "name": "example-javascriptv3-get-started-node",
     "version": "1.0.0",
     "description": "This guide shows you how to initialize an NPM package, add a service client to your package, and use the JavaScript SDK to call a service action.",
     "main": "index.js",
     "scripts": {
   "test": "vitest run **/*.unit.test.js"
     },
     "author": "Your Name",
     "license": "Apache-2.0",
     "dependencies": {
    "@aws-sdk/client-s3": "^3.420.0"
     },
     "type": "module"
   }
   ```

## 步骤 2：添加必要的导入和 SDK 代码
<a name="getting-started-with-node-js-add-code"></a>

将以下代码添加到 `nodegetstarted` 文件夹中名为 `index.js` 的文件中。

```
// This is used for getting user input.
import { createInterface } from "node:readline/promises";

import {
  S3Client,
  PutObjectCommand,
  CreateBucketCommand,
  DeleteObjectCommand,
  DeleteBucketCommand,
  paginateListObjectsV2,
  GetObjectCommand,
} from "@aws-sdk/client-s3";

export async function main() {
  // A region and credentials can be declared explicitly. For example
  // `new S3Client({ region: 'us-east-1', credentials: {...} })` would
  //initialize the client with those settings. However, the SDK will
  // use your local configuration and credentials if those properties
  // are not defined here.
  const s3Client = new S3Client({});

  // Create an Amazon S3 bucket. The epoch timestamp is appended
  // to the name to make it unique.
  const bucketName = `test-bucket-${Date.now()}`;
  await s3Client.send(
    new CreateBucketCommand({
      Bucket: bucketName,
    }),
  );

  // Put an object into an Amazon S3 bucket.
  await s3Client.send(
    new PutObjectCommand({
      Bucket: bucketName,
      Key: "my-first-object.txt",
      Body: "Hello JavaScript SDK!",
    }),
  );

  // Read the object.
  const { Body } = await s3Client.send(
    new GetObjectCommand({
      Bucket: bucketName,
      Key: "my-first-object.txt",
    }),
  );

  console.log(await Body.transformToString());

  // Confirm resource deletion.
  const prompt = createInterface({
    input: process.stdin,
    output: process.stdout,
  });

  const result = await prompt.question("Empty and delete bucket? (y/n) ");
  prompt.close();

  if (result === "y") {
    // Create an async iterator over lists of objects in a bucket.
    const paginator = paginateListObjectsV2(
      { client: s3Client },
      { Bucket: bucketName },
    );
    for await (const page of paginator) {
      const objects = page.Contents;
      if (objects) {
        // For every object in each page, delete it.
        for (const object of objects) {
          await s3Client.send(
            new DeleteObjectCommand({ Bucket: bucketName, Key: object.Key }),
          );
        }
      }
    }

    // Once all the objects are gone, the bucket can be deleted.
    await s3Client.send(new DeleteBucketCommand({ Bucket: bucketName }));
  }
}

// Call a function if this file was run directly. This allows the file
// to be runnable without running on import.
import { fileURLToPath } from "node:url";
if (process.argv[1] === fileURLToPath(import.meta.url)) {
  main();
}
```

示例代码可以在[此处找到 GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/index.js)。

## 步骤 3：运行示例
<a name="getting-started-with-node-js-run"></a>

**注意**  
请记得登录！如果您使用 IAM Identity Center 进行身份验证，请记住使用 AWS CLI `aws sso login`命令登录。

1. 运行 `node index.js`。

1. 选择是否清空并删除存储桶。

1. 如果您不删除存储桶，请务必手动清空并稍后将其删除。

# 开始使用浏览器
<a name="getting-started-browser"></a>

本节将引导您完成一个示例，该示例演示了如何在浏览器 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 用于身份验证。

## 情景
<a name="getting-started-browser-scenario"></a>

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 角色
<a name="getting-started-browser-create-identity-pool"></a>

在本练习中，您将创建并使用一个 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 角色
<a name="getting-started-browser-iam-role"></a>

要允许访问您的 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 存储桶和对象
<a name="getting-started-browser-create-s3-bucket"></a>

在此步骤中，您将为示例添加 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：设置浏览器代码
<a name="getting-started-browser-create-html"></a>

示例应用程序包含一个单页的 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：运行示例
<a name="getting-started-browser-run-sample"></a>

**运行示例应用程序**

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 存储桶中的对象文件名列表。

## 清理
<a name="getting-started-browser-cleanup"></a>

要清除您在本教程中创建的资源，请执行以下操作：
+ 在 [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*

# React Native 入门
<a name="getting-started-react-native"></a>

本教程将向您展示如何使用 [React Native CLI](https://reactnative.dev/docs/environment-setup) 创建 React Native 应用程序。

![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/zh_cn/sdk-for-javascript/v3/developer-guide/images/browsericon.png)

**本教程将向您展示：**
+ 如何安装和包含项目使用的 JavaScript 版本 3 (V3) 模块的 AWS SDK。
+ 如何编写代码连接到 Amazon Simple Storage Service（Amazon S3），以创建和删除 Amazon S3 存储桶。

## 情景
<a name="getting-started-react-scenario"></a>

Amazon S3 是一项云服务，让您可以随时在 Web 上的任何位置存储和检索任意数量的数据。React Native 是一个开发框架，可用于创建移动应用程序。本教程展示了如何创建一个 React Native 应用程序，以连接到 Amazon S3 来创建和删除 Amazon S3 存储桶。

该应用程序使用以下 AWS SDK 用于 JavaScript APIs：
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) 构造函数
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) 构造函数

## 完成先决条件任务
<a name="getting-started-react-setup"></a>

**注意**  
如果已通过其他教程或现有配置完成以下任意步骤，请跳过这些步骤。

本节介绍完成本教程所需的最低设置。您不应将此视为完整设置。为此，请参阅[将 SDK 设置为 JavaScript](setting-up.md)。
+ 安装以下工具：
  + [npm](https://docs.npmjs.com/getting-started/)
  + [Node.js](https://nodejs.org/en/download/)
  + [Xcode](https://developer.apple.com/xcode/)（如果您在 iOS 上测试）
  + [Android Studio](https://developer.android.com/studio/)（如果您在 Android 上测试）
+ 设置 [React Native 开发环境](https://reactnative.dev/docs/environment-setup)
+ 设置项目环境以运行这些 Node TypeScript 示例， JavaScript 并为第三方模块安装所需的 AWS SDK。按照上的说明进行操作[ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md)。
+ 在使用 AWS 服务进行开发 AWS 时，您必须确定您的代码是如何进行身份验证的。有关更多信息，请参阅 [使用 SDK 进行身份验证 AWS](getting-your-credentials.md)。
**注意**  
本示例的 IAM 角色应设置为使用 **AmazonS3 FullAccess** 权限。

## 步骤 1：创建一个 Amazon Cognito 身份池
<a name="getting-started-react-create-identity-pool"></a>

在本练习中，您将创建并使用一个 Amazon Cognito 身份池，为应用程序提供对 Amazon S3 服务的无需验证身份的访问权限。创建身份池还会创建两个 AWS Identity and Access Management (IAM) 角色，一个用于支持由身份提供商进行身份验证的用户，另一个用于支持未经身份验证的访客用户。

在本练习中，我们仅使用未经身份验证的用户角色，将重点放在任务上。您可在以后集成对身份提供商和通过身份验证的用户的支持。

**创建 Amazon Cognito 身份池**

1. 登录 AWS 管理控制台 并在亚马逊 [Web Services](https://console.aws.amazon.com/cognito/) 控制台上打开 Amazon Cognito 控制台。

1. 在控制台打开页面上，选择**身份池**。

1. 在下一页上，选择**创建新的身份池**。
**注意**  
如果没有其他身份池，则 Amazon Cognito 控制台会跳过此页面并打开下一页。

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

1. 在**配置权限**中，选择**创建新的 IAM 角色**并在 IA **M *getStartedReact角色*名称中输入名称（例如角色**）。

1. 在**配置属性**中，在**身份*getStartedReact池*名称中输入名称（例如池**）。

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

1. 记下新创建的身份池的身份池 ID 和区域。您需要在浏览器脚本*identityPoolId*中替换*region*和这些值。

在创建 Amazon Cognito 身份池之后，您已准备好添加 React Native 应用程序所需的 Amazon S3 的权限。

## 步骤 2：将策略添加到创建的 IAM 角色
<a name="getting-started-react-iam-role"></a>

要使浏览器脚本能够访问 Amazon S3 以创建和删除 Amazon S3 存储桶，请使用为您的 Amazon Cognito 身份池创建的未经身份验证的 IAM 角色。这需要您将 IAM policy 添加到角色。有关 IAM 角色的更多信息，请参阅 I [A *M 用户指南*中的创建角色以向 AWS 服务委派权限](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html)。

**将 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 角色之后，您已准备好构建应用程序。

## 第 3 步：使用创建应用程序 create-react-native-app
<a name="react-prerequisites"></a>

通过运行以下命令创建 React Native 应用程序。

```
npx react-native init ReactNativeApp --npm
```

## 步骤 4：安装 Amazon S3 程序包和其他依赖项
<a name="getting-started-react-install-dependencies"></a>

在项目目录中，运行以下命令来安装 Amazon S3 程序包。

```
npm install @aws-sdk/client-s3
```

此命令在项目中安装 Amazon S3 程序包，并更新 `package.json`，将 Amazon S3 列为项目依赖项。您可以在 [https://www.npmjs.com/](https://www.npmjs.com/)npm 网站上搜索“@aws-sdk”找到有关此程序包的信息。

这些程序包及其关联的代码将安装在项目的 `node_modules` 子目录中。

有关安装 Node.js 程序包的更多信息，请参阅 [npm（Node.js 程序包管理器）网站](https://www.npmjs.com/)上的 [Downloading and installing packages locally](https://docs.npmjs.com/downloading-and-installing-packages-locally) 和 [Creating Node.js Modules](https://docs.npmjs.com/creating-node-js-modules)。有关下载和安装适用的 AWS SDK 的信息 JavaScript，请参阅[安装适用于 JavaScript](setting-up.md#installing-jssdk)。

安装身份验证所需的其他依赖项。

```
npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity
```

## 步骤 5：编写 React Native 代码
<a name="getting-started-react-write-native-code"></a>

将以下代码添加到 `App.tsx`。将*identityPoolId*和*region*替换为身份池 ID 和将在其中创建 Amazon S3 存储桶的区域。

```
import React, { useCallback, useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
import "react-native-get-random-values";
import "react-native-url-polyfill/auto";

import {
  S3Client,
  CreateBucketCommand,
  DeleteBucketCommand,
} from "@aws-sdk/client-s3";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";

const client = new S3Client({
  // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region.
  region: "us-east-1",
  credentials: fromCognitoIdentityPool({
    // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region.
    identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492",
    // Replace the value of 'region' with your Amazon Cognito Region.
    clientConfig: { region: "us-east-1" },
  }),
});

enum MessageType {
  SUCCESS = 0,
  FAILURE = 1,
  EMPTY = 2,
}

const App = () => {
  const [bucketName, setBucketName] = useState("");
  const [msg, setMsg] = useState<{ message: string; type: MessageType }>({
    message: "",
    type: MessageType.EMPTY,
  });

  const createBucket = useCallback(async () => {
    setMsg({ message: "", type: MessageType.EMPTY });

    try {
      await client.send(new CreateBucketCommand({ Bucket: bucketName }));
      setMsg({
        message: `Bucket "${bucketName}" created.`,
        type: MessageType.SUCCESS,
      });
    } catch (e) {
      console.error(e);
      setMsg({
        message: e instanceof Error ? e.message : "Unknown error",
        type: MessageType.FAILURE,
      });
    }
  }, [bucketName]);

  const deleteBucket = useCallback(async () => {
    setMsg({ message: "", type: MessageType.EMPTY });

    try {
      await client.send(new DeleteBucketCommand({ Bucket: bucketName }));
      setMsg({
        message: `Bucket "${bucketName}" deleted.`,
        type: MessageType.SUCCESS,
      });
    } catch (e) {
      setMsg({
        message: e instanceof Error ? e.message : "Unknown error",
        type: MessageType.FAILURE,
      });
    }
  }, [bucketName]);

  return (
    <View style={styles.container}>
      {msg.type !== MessageType.EMPTY && (
        <Text
          style={
            msg.type === MessageType.SUCCESS
              ? styles.successText
              : styles.failureText
          }
        >
          {msg.message}
        </Text>
      )}
      <View>
        <TextInput
          onChangeText={(text) => setBucketName(text)}
          autoCapitalize={"none"}
          value={bucketName}
          placeholder={"Enter Bucket Name"}
        />
        <Button color="#68a0cf" title="Create Bucket" onPress={createBucket} />
        <Button color="#68a0cf" title="Delete Bucket" onPress={deleteBucket} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  successText: {
    color: "green",
  },
  failureText: {
    color: "red",
  },
});

export default App;
```

首先导入的代码需要依赖 AWS 于 React、React Native 和 SDK。

在函数 APP 中：
+ S3Client 对象已创建，使用先前创建的 Amazon Cognito 身份池指定凭证。
+ `createBucket` 和 `deleteBucket` 方法分别用于创建和删除指定存储桶。
+ React Native View 显示文本输入字段，供用户输入 Amazon S3 存储桶名称，并提供用于创建和删除指定 Amazon S3 存储桶的按钮。

完整 JavaScript 页面可[在此处获](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/reactnative/ReactNativeApp/App.tsx)得 GitHub。

## 步骤 6：运行示例
<a name="getting-started-react-native-run-sample"></a>

**注意**  
请记得登录！如果您使用 IAM Identity Center 进行身份验证，请记住使用 AWS CLI `aws sso login`命令登录。

要运行示例，请使用 npm 执行 `web`、`ios` 或 `android` 命令。

以下是在 macOS 上运行 `ios` 命令的示例输出。

```
$ npm run ios

> ReactNativeApp@0.0.1 ios /Users/trivikr/workspace/ReactNativeApp
> react-native run-ios

info Found Xcode workspace "ReactNativeApp.xcworkspace"
info Launching iPhone 11 (iOS 14.2)
info Building (using "xcodebuild -workspace ReactNativeApp.xcworkspace -configuration Debug -scheme ReactNativeApp -destination id=706C1A97-FA38-407D-AD77-CB4FCA9134E9")
success Successfully built the app
info Installing "/Users/trivikr/Library/Developer/Xcode/DerivedData/ReactNativeApp-cfhmsyhptwflqqejyspdqgjestra/Build/Products/Debug-iphonesimulator/ReactNativeApp.app"
info Launching "org.reactjs.native.example.ReactNativeApp"

success Successfully launched the app on the simulator
```

以下是在 macOS 上运行 `android` 命令的示例输出。

```
$ npm run android

> ReactNativeApp@0.0.1 android
> react-native run-android

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 970 file(s) to forward-jetify. Using 12 workers...
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...

> Task :app:stripDebugDebugSymbols UP-TO-DATE
Compatible side by side NDK version was not found.

> Task :app:installDebug
02:18:38 V/ddms: execute: running am get-config
02:18:38 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
02:18:38 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'Pixel_3a_API_30_x86(AVD) - 11' for app:debug
02:18:38 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
02:18:38 D/Device: Uploading file onto device 'emulator-5554'
02:18:38 D/ddms: Reading file permission of /Users/trivikr/workspace/ReactNativeApp/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r--
02:18:40 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
02:18:41 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
02:18:41 V/ddms: execute: returning
02:18:41 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
02:18:41 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
02:18:41 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 6s
27 actionable tasks: 2 executed, 25 up-to-date
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.reactnativeapp/.MainActivity }
```

输入您要创建或删除的存储桶名称，然后点击**创建存储桶**或**删除存储桶**。相应命令将发送至 Amazon S3，并显示成功或错误信息。

![\[Bucket creation success message with options to create or delete a bucket.\]](http://docs.aws.amazon.com/zh_cn/sdk-for-javascript/v3/developer-guide/images/react-app-running.png)


## 可能的增强功能
<a name="getting-started-react-native-variations"></a>

以下是此应用程序的变体，您可以使用该应用程序在 React Native 应用程序 JavaScript 中使用 AWS SDK 进一步探索。
+ 添加一个按钮以列出 Amazon S3 存储桶，并在每个列出的存储桶旁提供删除按钮。
+ 添加一个按钮，用于将文本对象放入存储桶。
+ 集成 Facebook 或 Amazon 等外部身份提供商，以使用经过身份验证的 IAM 角色。