开始使用浏览器 - Amazon SDK for JavaScript
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅 中国的 Amazon Web Services 服务入门 (PDF)

Amazon SDK for JavaScript V3 API 参考指南详细描述了 Amazon SDK for JavaScript 版本 3 (V3) 的所有 API 操作。

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

开始使用浏览器

本节将向您介绍一个示例,该示例演示了如何在浏览器中运行 SDK for JavaScript 版本 3 (V3)。

注意

在浏览器中运行 V3 与版本 2 (V2) 略有不同。有关更多信息,请参阅在 V3 中使用浏览器

有关使用 SDK for JavaScript (V3) 的其他示例,请参阅 适用于 JavaScript (v3) 代码示例的 SDK

此 Web 应用程序示例向您展示:

  • 如何使用 Amazon Cognito 进行身份验证以访问 Amazon 服务。

  • 如何使用 Amazon Identity and Access Management (IAM) 角色读取 Amazon Simple Storage Service (Amazon S3) 存储桶中的对象列表。

注意

此示例不使用 Amazon IAM Identity Center 进行身份验证。

情景

Amazon S3 是一项对象存储服务,提供行业领先的可扩展性、数据可用性、安全性和性能。您可以使用 Amazon S3 将数据作为对象存储在名为存储桶的容器中。有关 Amazon S3 的更多信息,请参阅 Amazon S3 用户指南

此示例向您演示了如何设置和运行代入 IAM 角色的 Web 应用程序,以便从 Amazon S3 存储桶中进行读取。该示例使用 React 前端库和 Vite 前端工具来提供 JavaScript 开发环境。该 Web 应用程序使用 Amazon Cognito 身份池来提供访问 Amazon 服务所需的凭证。随附的代码示例演示了在 Web 应用程序中加载和使用 SDK for JavaScript 的基本模式。

步骤 1:创建一个 Amazon Cognito 身份池和 IAM 角色

在本练习中,您将创建并使用一个 Amazon Cognito 身份池,为 Web 应用程序提供对 Amazon S3 服务的无需验证身份的访问权限。创建身份池还会创建一个 Amazon Identity and Access Management (IAM) 角色来支持未经身份验证的来宾用户。在本练习中,我们仅使用未经身份验证的用户角色,将重点放在任务上。您可在以后集成对身份提供商和通过身份验证的用户的支持。有关添加 Amazon Cognito 身份池的更多信息,请参阅《Amazon Cognito 开发人员指南》中的教程:创建身份池

创建一个 Amazon Cognito 身份池和关联的 IAM 角色
  1. 登录 Amazon Web Services Management Console 并打开 Amazon Cognito 控制台,网址为 https://console.aws.amazon.com/cognito/

  2. 在左侧导航窗格中,选择身份池

  3. 选择创建身份池

  4. 配置身份池信任中,选择访客访问权限进行用户身份验证。

  5. 配置权限中,选择创建新的 IAM 角色并在 IAM 角色名称中输入一个名称(例如 getStartedRole)。

  6. 配置属性中,在身份池名称中输入一个名称(例如 getStartedPool)。

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

  8. 记下新创建的 Amazon Cognito 身份池的身份池 ID区域。您需要这些值以便替换 步骤 4:设置浏览器代码 中的IDENTITY_POOL_IDREGION

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

步骤 2:将策略添加到创建的 IAM 角色

要允许访问您的 Web 应用程序中的 Amazon S3 存储桶,请使用为您的 Amazon Cognito 身份池(例如 getStartedPool)创建的未经身份验证的 IAM 角色(例如 getStartedPool)。这需要您将 IAM 策略添加到角色。有关修改 IAM 角色的更多信息,请参阅《IAM 用户指南》中的修改角色权限策略

将 Amazon S3 策略添加到与未经身份验证用户关联的 IAM 角色
  1. 登录 Amazon Web Services Management Console,然后通过以下网址打开 IAM 控制台:https://console.aws.amazon.com/iam/

  2. 在左侧导航窗格中,选择角色

  3. 选择要修改的角色的名称(例如,getStartedRole),然后选择权限选项卡。

  4. 选择添加权限,然后选择附加策略

  5. 在此角色的添加权限页面中,找到并选中 AmazonS3ReadOnlyAccess 的复选框。

    注意

    您可以使用此流程来启用对任何 Amazon 服务的访问权限。

  6. 选择添加权限

在您创建 Amazon Cognito 身份池并将 Amazon S3 的权限添加到未验证身份用户的 IAM 角色之后,您已准备好添加并配置 Amazon S3 存储桶。

步骤 3:添加 Amazon S3 存储桶和对象

在此步骤中,您将为示例添加 Amazon S3 存储桶和对象。您还将启用存储桶的跨源资源共享 (CORS)。有关创建 Amazon S3 存储桶和对象的更多信息,请参阅《Amazon S3 入门指南》中的 Amazon S3 入门

使用 CORS 添加 Amazon S3 存储桶和对象
  1. 登录到 Amazon Web Services Management Console,然后通过以下网址打开 Amazon S3 控制台:https://console.aws.amazon.com/s3/

  2. 在左侧的导航窗格中,选择存储桶,然后选择创建存储桶

  3. 输入符合存储桶命名规则的存储桶名称(例如 getstartedbucket),然后选择创建存储桶

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

  5. 文件和文件夹下,选择添加文件

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

  7. 接下来,选择存储桶的权限选项卡,然后在跨源资源共享 (CORS) 部分选择编辑。输入以下 JSON:

    [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ]
  8. 选择保存更改

添加 Amazon S3 存储桶并添加对象后,您就可以设置浏览器代码了。

步骤 4:设置浏览器代码

示例应用程序包含一个单页的 React 应用程序。此示例的文件可以在 GitHub 上的此处找到。

设置示例应用程序
  1. 安装 Node.js

  2. 从命令行中克隆 Amazon 代码示例存储库

    git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
  3. 导航到示例应用程序:

    cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
  4. 要安装所需的程序包,请运行以下命令:

    npm install
  5. 接下来,在文本编辑器中打开 src/App.tsx 并完成以下操作:

替换完文本后,保存 App.tsx 文件。现在您可以运行该 Web 应用程序了。

步骤 5:运行示例

运行示例应用程序
  1. 从命令行中导航到示例应用程序:

    cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
  2. 在命令行中,运行以下命令:

    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
  3. 在您的 Web 浏览器中,导航到上面显示的 URL(例如 http://localhost:5173)。该示例应用程序将向您显示 Amazon S3 存储桶中的对象文件名列表。

清理

要清除您在本教程中创建的资源,请执行以下操作: