开始使用浏览器 - 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操作。

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

开始使用浏览器

本节将引导您完成一个示例,该示例演示了如何在浏览器 JavaScript 中运行 for SDK 的版本 3 (V3)。

注意

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

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

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

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

  • 如何使用 Amazon Identity and Access Management () 角色读取亚马逊简单存储服务 (Amazon S3) 存储桶中的对象列表。IAM

注意

此示例不 Amazon IAM Identity Center 用于身份验证。

情景

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

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

第 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角色并在角色名称中输入名称(例如 getStartedRole)。IAM

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

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

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

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

步骤 2:向已创建的IAM角色添加策略

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

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

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

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

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

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

    注意

    您可以使用此过程来允许访问任何 Amazon 服务。

  6. 选择添加权限

在您创建 Amazon Cognito 身份池并将未经身份验证的用户的 Amazon S3 权限添加到您的IAM角色之后,您就可以添加和配置 Amazon S3 存储桶了。

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

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

使用添加 Amazon S3 存储桶和对象 CORS
  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. 选择 Save changes(保存更改)

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

清理

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