從瀏覽器檢視 Amazon S3 儲存貯體中的相片 - AWS SDK for JavaScript
使用案例先決條件任務定義網頁設定軟體開發套件於儲存貯體中列出相簿檢視相簿

我們宣布了即將推 end-of-support 出的 AWS SDK for JavaScript v2。我們建議您移轉至 AWS SDK for JavaScript v3。有關日期，其他詳細信息以及如何遷移的信息，請參閱鏈接的公告。

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

從瀏覽器檢視 Amazon S3 儲存貯體中的相片

JavaScript code example that applies to browser execution

此瀏覽器程式碼範例顯示：

  • 如何在亞馬遜簡單存儲服務（Amazon S3）存儲桶中創建相冊，並允許未經身份驗證的用戶查看照片。

使用案例

在這個範例中，簡單的 HTML 頁面提供瀏覽器型應用程式，來檢視相簿中的相片。相冊位於 Amazon S3 存儲桶中，照片上傳到其中。

JavaScript 在使用 Amazon S3 存儲桶相冊的瀏覽器腳本中。

瀏覽器指令碼使用開發 JavaScript 套件與 Amazon S3 儲存貯體進行互動。此指令碼使用 Amazon S3 用戶端類別的listObjects方法，讓您能夠檢視相簿。

先決條件任務

若要設定和執行此範例，請先完成這些任務。

注意

在此範例中，您必須對 Amazon S3 儲存貯體和 Amazon Cognito 身分識別集 AWS 區使用相同的區域。

在 Amazon S3 主控台中，建立 Amazon S3 儲存貯體，您可以在其中存放相簿和相片。如需使用主控台建立 S3 儲存貯體的詳細資訊，請參閱 Amazon 簡單儲存服務使用者指南中的建立儲存貯體。

建立 S3 儲存貯體時，請務必執行下列動作：

  • 記下儲存貯體名稱，這會在後續先決條件任務「設定角色許可」中用到。

  • 選擇要在其中建立值 AWS 區的「區域」。這個區域必須與您在後續先決條件任務「建立身分集區」中用來建立 Amazon Cognito 身分集區的區域相同。

  • 按照 Amazon 簡單儲存服務使用者指南中的設定網站存取權限來設定儲存貯體許可。

在 Amazon Cognito 主控台中，建立 Amazon Cognito 身分識別集區，如瀏覽器指令碼入門主題中所述。步驟 1：創建一個 Amazon Cognito 身份池

建立識別集區時，請記下識別集區名稱以及未驗證身分的角色名稱。

若要允許檢視相簿和相片，您必須將權限新增至剛建立之身分集區的 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 主控台。在先前的先決條件任務「建立身分集區」中，尋找 Amazon Cognito 建立的未驗證身分的 IAM 角色。您使用剛建立的政策來新增許可至此身分。

雖然此工作的工作流程通常與瀏覽器指令碼中的入門主題相同，但有幾個不同步驟 2：將政策新增至建立的 IAM 角色之處需要注意：

  • 使用您剛建立的新政策，而不是 Amazon Polly 的政策。

  • 在 Attach Permissions (連接許可) 頁面上，快速找到新政策、開啟 Filter policies (篩選政策) 清單，然後選擇 Customer managed (客戶受管)。

如需有關建立 IAM 角色的其他資訊，請參閱 IAM 使用者指南中的建立角色以將許可委派給 AWS 服務。

在瀏覽器指令碼可以存取 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. 在 Overview (概觀) 標籤中，選擇 Create folder (建立資料夾) 按鈕來建立資料夾。在此範例中，將資料夾命名為「album1」、「album2」和「album3」。

  3. 對於 album1 以及 album2，選取資料夾然後上傳相片到其中，如下所示：

    1. 選擇 Upload (上傳) 按鈕。

    2. 拖曳或選擇您要使用的相片檔案，然後選擇 Next (下一步)。

    3. 在 Manage public permissions (管理公有許可) 中，選擇 Grant public read access to this object(s) (授予對該物件的公有讀取許可)。

    4. 選擇 Upload (上傳) 按鈕 (位於左下角)。

  4. 將 album3 保留為空。

定義網頁

相片檢視應用程式的 HTML 包含 <div> 元素，瀏覽器指令碼在其中建立檢視界面。第一個 <script> 元素會新增軟體開發套件至瀏覽器指令碼。第二個<script>元素會新增保存瀏覽器指令碼的外部 JavaScript 檔案。

在這個範例中，檔案名為 PhotoViewer.js，並位於 HTML 檔案的相同資料夾。若要尋找目前的 SDK_ 版本編號，請參閱 API 參考指南中適用於 SDK 的 API 參考。 JavaScript AWS SDK for JavaScript

<!DOCTYPE html>
<html>
  <head>
    <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./PhotoViewer.js"></script>
    <script>listAlbums();</script>
  </head>
  <body>
    <h1>Photo Album Viewer</h1>
    <div id="viewer" />
  </body>
</html>

設定軟體開發套件

呼叫 CognitoIdentityCredentials 方法，取得設定開發套件所需的登入資料。您需要提供 Amazon Cognito 可身份集區 ID。接著，建立一個 AWS.S3 服務物件。

// **DO THIS**:
//   Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";

// **DO THIS**:
//   Replace this block of code with the sample code located at:
//   Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

// Create a new service object
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

// A utility function to create HTML.
function getHtml(template) {
  return template.join("\n");
}

此範例中的其他程式碼定義以下函數來收集和呈現儲存貯體中相簿和相片的相關資訊。

  • listAlbums

  • viewAlbum

於儲存貯體中列出相簿

為了列出儲存貯體中的所有現有相簿，應用程式的 listAlbums 函數會呼叫 AWS.S3 服務物件的 listObjects 方法。函數使用 CommonPrefixes 屬性，因此呼叫只會傳回做為相簿的物件 (也就是資料夾)。

該函數的其餘部分從 Amazon S3 存儲桶中獲取相冊列表，並生成在網頁上顯示相冊列表所需的 HTML。

// List the photo albums that exist in the bucket.
function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      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 on an album name to view it.</p>"])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
      ];
      document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    }
  });
}

檢視相簿

若要在 Amazon S3 儲存貯體中顯示相簿的內容，應用程式的viewAlbum函數會取一個相簿名稱，並為該相簿建立 Amazon S3 金鑰。然後該函數會呼叫 AWS.S3 服務物件的 listObjects 方法以取得相簿中的所有物件 (相片) 清單。

其餘函數會採用該相簿中的物件清單，並產生在網頁中顯示相片所需的 HTML。

// Show the photos that exist in an album.
function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Request instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    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;");
  });
}