从浏览器查看 Amazon S3 存储桶中的照片 - Amazon SDK for JavaScript
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅中国的 Amazon Web Services 服务入门

帮助我们改进Amazon SDK for JavaScript版本 3 (V3) 文档,方法是使用反馈链接,或者在上创建议题或拉取请求GitHub.

这些区域有:Amazon SDK for JavaScriptV3 API 参考指南详细描述了Amazon SDK for JavaScript版本 3 (V3)。

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

从浏览器查看 Amazon S3 存储桶中的照片


                JavaScript code example that applies to browser execution

此浏览器脚本代码示例演示:

  • 如何在 Amazon Simple Storage Storage Service (Amazon S3) 存储桶中创建相册并允许未经身份验证的用户查看照片。

场景

本示例通过简单的 HTML 页面提供了一个用于查看相册中的照片的基于浏览器的应用程序。相册位于 Amazon S3 存储桶中,照片将上载至该存储桶中。


                JavaScript在浏览器脚本中,它将 Amazon S3 存储桶用于存储相册。

浏览器脚本使用 SDKJavaScript以与 Amazon S3 存储桶交互。该脚本使用ListObjectsCommand使您能够查看相册的 Amazon S3 客户端类的方法。

先决条件任

要设置和运行此示例,请先完成以下任务。

注意

在本示例中,您必须使用相同的AmazonAmazon S3 存储桶和 Amazon Cognito 身份池的区域。

设置项目环境以运行这些节点TypeScript示例,然后安装所需Amazon SDK for JavaScript以及第三方模块。按照上的说明进行操 GitHub.

Amazon S3 控制台中,创建一个可存储相册和照片的 Amazon S3 存储桶。有关使用控制台创建 S3 存储桶的更多信息,请参阅创建存储桶中的Amazon Simple Storage Service 用户指南.

在创建 Amazon S3 存储桶时,请务必执行以下操作:

  • 记下存储桶名称,以便在后续先决条件任务中使用它。配置角色权限.

  • 选择一个要在其中创建存储桶的 Amazon 区域。在后续先决条件任务中,此区域必须与您将用于创建 Amazon Cognito 身份池的区域相同,创建 身份池.

  • 创建存储桶向导,在创建存储桶页面,在阻止公有访问存储桶设置部分中,清除这些框:阻止对通过新访问控制列表 (ACL) 授予的存储桶和对象的公开访问权限阻止对通过任何访问控制列表 (ACL) 授予存储桶和对象的公开访问权限.

    有关如何检查和配置存储桶权限的信息,请参阅设置访问网站的权限中的Amazon Simple Storage Service 用户指南.

在存储库的Amazon Cognito 控制台中,创建 Amazon Cognito 身份池。

创建身份池时:

  • 记下身份池名称和的角色名称未身份验证身份。

  • 在存储库的示例代码页面上,选择”JavaScript“来自的平台列表。然后复制或写下示例代码。

    注意

    你必须选择”JavaScript“来自的平台使您的代码运行的列表。

为允许查看相册和照片,您必须向刚刚创建的身份池的 IAM 角色添加权限。首先按下面所示创建策略。

  1. 打开 IAM 控制台

  2. 在左侧的导航窗格中,选择 Policies (策略),然后选择 Create policy (创建策略)

  3. JSON 选项卡上,输入以下 JSON 定义,但将 BUCKET_NAME 替换为存储桶的名称。

    { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:ListBucket" ], "Resource": [ "arn:aws:s3:::BUCKET_NAME" ] } ] }
  4. 选择 Review policy (查看策略) 按钮,为策略命名并提供描述(如果您需要),然后选择 Create policy (创建策略) 按钮。

    请务必记下该名称,以便稍后可以找到它并附加到 IAM 角色。

创建策略后,导航回IAM 控制台. 查找 IAM 角色未身份验证Amazon Cognito 在之前的先决条件任务中创建的身份。您将使用刚刚创建的策略来向此身份添加权限。

有关创建 IAM 角色的更多信息,请参阅创建向Amazon服务中的IAM 用户指南.

在浏览器脚本可以访问 Amazon S3 存储桶之前,您必须先设置它CORS 配置如下所示。

重要

在新的 S3 控制台中,CORS 配置必须是 JSON。

JSON
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET" ], "AllowedOrigins": [ "*" ] } ]
XML
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

由于本示例仅允许用户查看已在存储桶中的照片,因此您需要在存储桶中创建一些相册并将照片上传到相册。

注意

在本示例中,照片文件的文件名必须以一个下划线(“_”)开头。此字符对于稍后进行筛选很重要。此外,请务必尊重照片所有者的版权。

  1. 在存储库的Amazon S3 控制台中,打开您之前创建的存储桶。

  2. 在存储库的概述选项卡上,选择创建文件夹来创建文件夹。在本示例中,将文件夹命名为“album1”、“album2”和“album3”。

  3. 对于 album1album2,选择相应文件夹,然后将照片上传到其中,如下所示:

    1. 请选择 Upload(上传)。

    2. 拖动或选择要使用的照片文件,然后选择下一步

    3. 管理公共权限下,选择为此对象授予公共读取访问权限

    4. 选择上传(左下角)。

  4. album3 留空。

安装以下 SDK 模块:

  • client-s3

  • client-cognito-identity

  • credential-provider-cognito-identity

注意

有关安装 SDK 模块的信息,请参阅为 JavaScript 安装开发工具包.

要使用的 V3Amazon SDK for JavaScript在浏览器中,你需要webpack来捆绑 Javascript 模块和函数。

安装webpack在命令提示符处运行以下命令。

npm install --save-dev webpack
重要

要查看的示例package.json在本示例中,请参阅Amazon SDK for JavaScript上的代码示例GitHub.

注意

有关安装 Webpack 的信息,请参阅使用 webpack 捆绑应用程序.

定义网页

照片查看应用程序的 HTML 包含一个 <div> 元素,在其中,浏览器脚本将创建查看界面。

这些区域有:<script>元素添加main.js文件,包含所有必需的JavaScript例如。

注意

生成main.js文件,请参阅运行代码.

注意

此示例导入并使用必需的Amazon服务 V3 包客户端、V3 命令,并使用send方法采用异步/等待模式。您可以使用 V2 命令创建此示例,而是通过进行一些小的更改。有关详细信息,请参阅 使用 V3 命令

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="./main.js"></script> </head> <body> <h1>Photo album viewer</h1> <div id="viewer" /> <script> listAlbums(); </script> </body> </html>

配置开发工具包

通过调用 CognitoIdentityCredentials 方法获取配置开发工具包所需的凭证。您需要提供 Amazon Cognito 身份池 ID。然后创建 S3 服务对象。

// Load the required clients and packages const { CognitoIdentityClient } = require("@aws-sdk/client-cognito-identity"); const { fromCognitoIdentityPool, } = require("@aws-sdk/credential-provider-cognito-identity"); const { S3Client, ListObjectsCommand } = require("@aws-sdk/client-s3"); // Initialize the Amazon Cognito credentials provider const REGION = "region"; //e.g., 'us-east-1' const s3 = new S3Client({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: "IDENTITY_POOL_ID", // IDENTITY_POOL_ID e.g., eu-west-1:xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx }), });

本示例中代码的其余部分定义了以下函数,用于收集和展示有关存储桶中的相册和照片的信息。

  • listAlbums

  • viewAlbum

在存储桶中列出相册

如需列出存储桶中的所有现有相册,请参阅应用程序listAlbums函数调用ListObjectsCommand方法的方法S3客户端服务对象。该函数使用 CommonPrefixes 属性,以使调用仅返回用作相册的对象(即文件夹)。

函数的剩余部分从 Amazon S3 存储桶获取相册列表,并生成在网页上显示相册列表所需的 HTML。

注意

此示例导入并使用必需的Amazon服务 V3 包客户端、V3 命令,并使用send方法采用异步/等待模式。您可以使用 V2 命令创建此示例,而是通过进行一些小的更改。有关详细信息,请参阅 使用 V3 命令

// A utility function to create HTML. function getHtml(template) { return template.join("\n"); } // Make the getHTML function available to the browser window.getHTML = getHtml; // List the photo albums that exist in the bucket var albumBucketName = "BUCKET_NAME"; //BUCKET_NAME const listAlbums = async () => { try { const data = await s3.send( new ListObjectsCommand({ Delimiter: "/", Bucket: albumBucketName }) ); var albums = data.CommonPrefixes.map(function (commonPrefix) { var prefix = commonPrefix.Prefix; var albumName = decodeURIComponent(prefix.replace("/", "")); return getHtml([ "<li>", '<button style="margin:5px;" onclick="viewAlbum(\'' + albumName + "')\">", albumName, "</button>", "</li>", ]); }); var message = albums.length ? getHtml(["<p>Click an album name to view it.</p>"]) : "<p>You don't have any albums. You need to create an album."; var htmlTemplate = [ "<h2>Albums</h2>", message, "<ul>", getHtml(albums), "</ul>", ]; document.getElementById("viewer").innerHTML = getHtml(htmlTemplate); } catch (err) { return alert("There was an error listing your albums: " + err.message); } }; // Make the viewAlbum function available to the browser window.listAlbums = listAlbums;

查看相册

要在 Amazon S3 存储桶中显示相册的内容,请执行该应用程序的viewAlbum函数获取相册名称并为该相册创建 Amazon S3 密钥。然后该函数调用ListObjectsCommand方法的方法S3从而获取相册中所有对象(照片)的列表。

函数的剩余部分获取相册中的对象列表并生成在网页上显示照片所需的 HTML。

注意

此示例导入并使用必需的Amazon服务 V3 包客户端、V3 命令,并使用send方法采用异步/等待模式。您可以使用 V2 命令创建此示例,而是通过进行一些小的更改。有关详细信息,请参阅 使用 V3 命令

// Show the photos that exist in an album const viewAlbum = async (albumName) => { try { var albumPhotosKey = encodeURIComponent(albumName) + "/"; const data = await s3.send( new ListObjectsCommand({ Prefix: albumPhotosKey, Bucket: albumBucketName, }) ); var href = "https://s3." + REGION + ".amazonaws.com/"; var bucketUrl = href + albumBucketName + "/"; var photos = data.Contents.map(function (photo) { var photoKey = photo.Key; var photoUrl = bucketUrl + encodeURIComponent(photoKey); return getHtml([ "<span>", "<div>", "<br/>", '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>', "</div>", "<div>", "<span>", photoKey.replace(albumPhotosKey, ""), "</span>", "</div>", "</span>", ]); }); var message = photos.length ? "<p>The following photos are present.</p>" : "<p>There are no photos in this album.</p>"; var htmlTemplate = [ "<div>", '<button onclick="listAlbums()">', "Back To albums", "</button>", "</div>", "<h2>", "Album: " + albumName, "</h2>", message, "<div>", getHtml(photos), "</div>", "<h2>", "End of album: " + albumName, "</h2>", "<div>", '<button onclick="listAlbums()">', "Back To albums", "</button>", "</div>", ]; document.getElementById("viewer").innerHTML = getHtml(htmlTemplate); document .getElementsByTagName("img")[0] .setAttribute("style", "display:none;"); } catch (err) { return alert("There was an error viewing your album: " + err.message); } }; // Make the viewAlbum function available to the browser window.viewAlbum = viewAlbum;

运行代码

运行本示例的代码

  1. 将所有代码保存为s3_PhotoViewer.js.

    注意

    此文件可在GitHub.

  2. Replace“地区”与您的Amazon区域,如us-west-2.

  3. Replace“BUCKET_NAME”使用 Amazon S3 存储桶。

  4. Replace“身份 _POOL_ID”使用IdentityPoolId来自 的示例页面您为本示例创建的 Amazon Cognito 身份池。

  5. 在命令提示符处运行以下命令以捆绑JavaScript对于这个例子到一个名为的文件main.js.

    npx webpack ./src/s3_PhotoViewer.js --mode development --target web --no-devtool -o main.js
    注意

    有关安装的信息webpack,请参阅使用 webpack 捆绑应用程序.

  6. 在命令行中运行以下命令:

    node s3_PhotoViewer.js