適用於 JavaScript 的 AWS SDK v2 已end-of-support。我們建議您遷移至 [適用於 JavaScript 的 AWS SDK v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/)。如需如何遷移的其他詳細資訊和資訊，請參閱此[公告](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/)。

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

# 從瀏覽器檢視 Amazon S3 儲存貯體中的相片
<a name="s3-example-photos-view"></a>

![\[JavaScript code example that applies to browser execution\]](http://docs.aws.amazon.com/zh_tw/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**此瀏覽器程式碼範例顯示：**
+ 如何在 Amazon Simple Storage Service (Amazon S3) 儲存貯體中建立相簿，並允許未經驗證的使用者檢視相片。

## 使用案例
<a name="s3-example-photos-view-scenario"></a>

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

![\[瀏覽器指令碼中的 JavaScript，使用 Amazon S3 儲存貯體做為相簿。\]](http://docs.aws.amazon.com/zh_tw/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


瀏覽器指令碼使用適用於 JavaScript 的 SDK 與 Amazon S3 儲存貯體互動。指令碼使用 Amazon S3 用戶端類別的 [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property)方法，讓您檢視相簿。

## 先決條件任務
<a name="s3-example-photos-view-scenario-prerequisites"></a>

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

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

### 建立儲存貯體
<a name="s3-example-photos-view-prereq-bucket"></a>

在 [Amazon S3 主控台](https://console.aws.amazon.com/s3/)中，建立 Amazon S3 儲存貯體，您可以在其中存放相簿和相片。如需使用主控台建立 S3 儲存貯體的詳細資訊，請參閱《*Amazon Simple Storage Service 使用者指南*》中的[建立儲存貯體](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html)。

建立 S3 儲存貯體時，請務必執行下列動作：
+ 記下儲存貯體名稱，這會在後續先決條件任務「設定角色許可」中用到。
+ 選擇要建立儲存貯體 AWS 的區域。這必須與您在後續先決條件任務建立 Amazon Cognito 身分集區時所使用的區域相同：建立身分集區。
+ 遵循《*Amazon Simple Storage Service 使用者指南*》中的[設定網站存取許可](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html)來設定儲存貯體許可。

### 建立 身分集區
<a name="s3-example-photos-view-prereq-idpool"></a>

在 [Amazon Cognito 主控台](https://console.aws.amazon.com/cognito/)中，建立 Amazon Cognito 身分集區，如瀏覽器指令碼主題[步驟 1：建立 Amazon Cognito 身分集區](getting-started-browser.md#getting-started-browser-create-identity-pool)入門中所述。 **

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

### 設定角色許可
<a name="s3-example-photos-view-prereq-perms"></a>

若要允許檢視相簿和相片，您必須將許可新增至您剛建立之身分集區的 IAM 角色。首先，如下所示建立政策。

1. 開啟 [IAM 主控台](https://console.aws.amazon.com/iam/)。

1. 在左邊的導覽窗格中，選擇 **Policies (政策)**，然後選擇 **Create policy (建立政策)** 按鈕。

1. 在 **JSON** 標籤上，輸入下列 JSON 定義，但將 *BUCKET\$1NAME* 更換為儲存貯體的名稱。

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement": [
         {
            "Effect": "Allow",
            "Action": [
               "s3:ListBucket"
            ],
            "Resource": [
               "arn:aws:s3:::BUCKET_NAME"
            ]
         }
      ]
   }
   ```

------

1. 選擇 **Review Policy (檢閱政策)** 按鈕、命名政策並提供描述 (如果需要)，然後選擇 **Create policy (建立政策)** 按鈕。

   請務必記下名稱，以便您稍後可以找到它並將其連接到 IAM 角色。

建立政策後，導覽回 [IAM 主控台](https://console.aws.amazon.com/iam/)。尋找 Amazon Cognito 在先前先決條件任務中建立**的未驗證**身分的 IAM 角色：建立身分集區。您使用剛建立的政策來新增許可至此身分。

雖然此任務的工作流程通常與瀏覽器指令碼主題中的[步驟 2：將政策新增至已建立的 IAM 角色](getting-started-browser.md#getting-started-browser-iam-role)入門相同，但需要注意一些差異： **
+ 使用您剛建立的新政策，而不是 Amazon Polly 的政策。
+ 在 **Attach Permissions (連接許可)** 頁面上，快速找到新政策、開啟 **Filter policies (篩選政策)** 清單，然後選擇 **Customer managed (客戶受管)**。

如需建立 IAM 角色的詳細資訊，請參閱《*IAM 使用者指南*》中的[建立角色以委派許可給 AWS 服務](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html)。

### 設定 CORS
<a name="s3-example-photos-view-cors-configuration"></a>

在瀏覽器指令碼可以存取 Amazon S3 儲存貯體之前，您必須設定其 [CORS 組態](cors.md#configuring-cors-s3-bucket)，如下所示。

**重要**  
在新的 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>
```

------

### 建立相簿和上傳相片
<a name="s3-example-photos-view-create-albums"></a>

由於這個範例只允許使用者檢視已經在儲存貯體中的相片，因此您需要在儲存貯體中建立相簿並上傳照片至相簿中。

**注意**  
在這個範例中，相片檔案的檔案名稱必須以單一底線 (「\$1」) 做為開頭。此字元在後續篩選程序中很重要。此外，請務必尊重相片擁有者的著作權。

1. 在 [Amazon S3 主控台](https://console.aws.amazon.com/s3/)中，開啟您先前建立的儲存貯體。

1. 在 **Overview (概觀)** 標籤中，選擇 **Create folder (建立資料夾)** 按鈕來建立資料夾。在此範例中，將資料夾命名為「album1」、「album2」和「album3」。

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

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

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

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

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

1. 將 **album3** 保留為空。

## 定義網頁
<a name="s3-example-photos-view-html"></a>

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

在這個範例中，檔案名為 `PhotoViewer.js`，並位於 HTML 檔案的相同資料夾。若要尋找目前的 SDK\$1VERSION\$1NUMBER，請參閱《 API 參考指南》中適用於 JavaScript 的 SDK 的 API 參考。 [適用於 JavaScript 的 AWS SDK](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)

```
<!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>
```



## 設定軟體開發套件
<a name="s3-example-photos-view-config"></a>

呼叫 `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`

## 於儲存貯體中列出相簿
<a name="s3-example-photos-view-list-albums"></a>

為了列出儲存貯體中的所有現有相簿，應用程式的 `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);
    }
  });
}
```

## 檢視相簿
<a name="s3-example-photos-view-viewing-album"></a>

若要在 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;");
  });
}
```