[適用於 JavaScript 的 AWS SDK V3 API 參考指南](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/)詳細說明 第 3 版 適用於 JavaScript 的 AWS SDK (V3) 的所有 API 操作。
本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 在瀏覽器中開始使用
本節會逐步解說範例，示範如何在瀏覽器中執行適用於 JavaScript 的 AWS SDK 第 3 版 (V3)。
**注意**
在瀏覽器中執行 V3 與第 2 版 (V2) 略有不同。如需詳細資訊，請參閱[在 V3 中使用瀏覽器](welcome.md#v3_browsers)。
如需使用適用於 JavaScript 的 AWS SDK (V3) 的其他範例，請參閱 [適用於 JavaScript (v3) 的 SDK 程式碼範例](javascript_code_examples.md)。
**此 Web 應用程式範例顯示：**
+ 如何使用 Amazon Cognito 存取 AWS 服務以進行身分驗證。
+ 如何使用 a(IAM) 角色讀取 Amazon Simple Storage Service AWS Identity and Access Management (Amazon S3) 儲存貯體中的物件清單。
**注意**
此範例不會使用 AWS IAM Identity Center 進行身分驗證。
## 使用案例
Amazon S3 是一項物件儲存服務，提供領先業界的可擴展性、資料可用性、安全性和效能。您可以使用 Amazon S3 將資料作為物件存放在稱為儲存貯體的容器中。如需 Amazon S3 的詳細資訊，請參閱《[Amazon S3 使用者指南](https://docs.aws.amazon.com/AmazonS3/latest/userguide/)》。
此範例說明如何設定和執行 Web 應用程式，以擔任要從 Amazon S3 儲存貯體讀取的 IAM 角色。此範例使用 React 前端程式庫和 Vite 前端工具來提供 JavaScript 開發環境。Web 應用程式使用 Amazon Cognito 身分集區來提供存取 AWS 服務所需的登入資料。隨附的程式碼範例示範在 Web 應用程式中載入和使用適用於 JavaScript 的 AWS SDK 的基本模式。
## 步驟 1：建立 Amazon Cognito 身分集區和 IAM 角色
在本練習中，您會建立並使用 Amazon Cognito 身分集區，為 Amazon S3 服務提供未經驗證的 Web 應用程式存取權。建立身分集區也會建立 AWS Identity and Access Management (IAM) 角色，以支援未經驗證的訪客使用者。在此範例中，我們只會使用未經驗證的使用者角色來保持任務重點。您之後可以整合對身分提供者和已驗證使用者的支援。如需新增 Amazon Cognito 身分集區的詳細資訊，請參閱《*Amazon Cognito 開發人員指南*》中的[教學課程：建立身分集](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html)區。
**建立 Amazon Cognito 身分集區和相關聯的 IAM 角色**
1. 登入 AWS 管理主控台 並開啟位於 https：//[https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/) 的 Amazon Cognito 主控台。
1. 在左側導覽窗格中，選擇**身分集區**。
1. 選擇 **建立身分池**。
1. 在**設定身分集區信任**中，選擇**訪客存取權**以進行使用者身分驗證。
1. 在**設定許可**中，選擇**建立新的 IAM 角色**，然後在 **IAM 角色**名稱中輸入名稱 （例如 *getStartedRole*)。
1. 在**設定屬性**中，在**身分集**區名稱中輸入名稱 （例如 *getStartedPool*)。
1. 在 **檢閱和建立** 中，確認您為新身分池所做的選擇。選取 **編輯** 以返回精靈並變更任何設定。當您完成時，請選取 **建立身分池**。
1. 請注意**身分集區 ID** 和新建立的 Amazon Cognito 身分集區的**區域**。您需要這些值來取代 中的 *IDENTITY\$1POOL\$1ID* 和 *REGION*[步驟 4：設定瀏覽器程式碼](#getting-started-browser-create-html)。
建立 Amazon Cognito 身分集區後，您就可以新增 Web 應用程式所需的 Amazon S3 許可。
## 步驟 2：將政策新增至建立的 IAM 角色
若要在 Web 應用程式中啟用對 Amazon S3 儲存貯體的存取，請使用為 Amazon Cognito 身分集區 （例如 getStartedPool) 建立的未驗證 IAM 角色 （例如 *getStartedRole*)。 *getStartedPool* 這需要您將 IAM 政策連接至角色。如需修改 IAM 角色的詳細資訊，請參閱《*IAM 使用者指南*》中的[修改角色許可政策](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy)。
**將 Amazon S3 政策新增至與未驗證使用者相關聯的 IAM 角色**
1. 登入 AWS 管理主控台 ，並在 https：//[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/) 開啟 IAM 主控台。
1. 在左側導覽窗格中，選擇 **Roles** (角色)。
1. 選擇您要修改的角色名稱 （例如 *getStartedRole*)，然後選擇**許可**索引標籤。
1. 選擇**新增許可**，然後選擇**連接政策**。
1. 在**新增此角色的許可**頁面中，尋找並選取 **AmazonS3ReadOnlyAccess** 的核取方塊。
**注意**
您可以使用此程序來啟用對任何 AWS 服務的存取。
1. 選擇**新增許可**。
建立 Amazon Cognito 身分集區並將 Amazon S3 的許可新增至未經驗證使用者的 IAM 角色之後，您就可以新增和設定 Amazon S3 儲存貯體。
## 步驟 3：新增 Amazon S3 儲存貯體和物件
在此步驟中，您將為範例新增 Amazon S3 儲存貯體和物件。您也將啟用儲存貯體的跨來源資源共用 (CORS)。如需建立 Amazon S3 儲存貯體和物件的詳細資訊，請參閱《[Amazon S3 使用者指南](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html)*》中的 Amazon S3 *入門。
**使用 CORS 新增 Amazon S3 儲存貯體和物件**
1. 登入 AWS 管理主控台 ，並在 [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)：// 開啟 Amazon S3 主控台。
1. 在左側導覽窗格中，選擇**儲存貯體**，然後選擇**建立儲存貯體**。
1. 輸入符合儲存貯體[命名規則的儲存貯體名稱 ](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html)（例如 *getstartedbucket*)，然後選擇**建立儲存貯體**。
1. 選擇您建立的儲存貯體，然後選擇**物件**索引標籤。然後選擇 **Upload (上傳)**。
1. 在**檔案和資料夾**下，選擇**新增檔案**。
1. 選擇要上傳的檔案，然後選擇 **Open (開啟)**。然後選擇**上傳**以完成將物件上傳至儲存貯體。
1. 接著，選擇儲存貯體的**許可**索引標籤，然後在**跨來源資源共用 (CORS)** 區段中選擇**編輯**。輸入下列 JSON：
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
```
1. 選擇**儲存變更**。
新增 Amazon S3 儲存貯體並新增物件之後，您就可以設定瀏覽器程式碼。
## 步驟 4：設定瀏覽器程式碼
範例應用程式由單頁 React 應用程式組成。您可以在 [ GitHub 上找到](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects)此範例的檔案。
**設定範例應用程式**
1. 安裝 [Node.js](https://nodejs.org/en/download)。
1. 從命令列複製[AWS 程式碼範例儲存庫](https://github.com/awsdocs/aws-doc-sdk-examples/)：
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. 導覽至範例應用程式：
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. 執行下列命令來安裝必要的套件：
```
npm install
```
1. 接著，在文字編輯器`src/App.tsx`中開啟 ，並完成下列操作：
+ 以您在 中記下的 Amazon Cognito 身分集區 ID 取代 *YOUR\$1IDENTITY\$1POOL\$1ID*[步驟 1：建立 Amazon Cognito 身分集區和 IAM 角色](#getting-started-browser-create-identity-pool)。
+ 將區域 的值取代為您的 Amazon S3 儲存貯體和 Amazon Cognito 身分集區指派的區域。請注意，這兩個服務的區域必須相同 （例如 *us-east-2*)。
+ 將 *bucket-name* 取代為您在 中建立的儲存貯體名稱[步驟 3：新增 Amazon S3 儲存貯體和物件](#getting-started-browser-create-s3-bucket)。
取代文字之後，請儲存`App.tsx`檔案。您現在已準備好執行 Web 應用程式。
## 步驟 5：執行範例
**執行範例應用程式**
1. 從命令列導覽至範例應用程式：
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. 從命令列執行下列命令：
```
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
```
1. 在網頁瀏覽器中，導覽至上面顯示的 URL （例如 http://localhost:5173)。範例應用程式會顯示 Amazon S3 儲存貯體中的物件檔案名稱清單。
## 清除
若要清除您在本教學課程中建立的資源，請執行下列動作：
+ [在 Amazon S3 主控台](https://console.aws.amazon.com/s3/)中，刪除任何物件和建立的任何儲存貯體 （例如 *getstartedbucket*)。
+ [在 IAM 主控台](https://console.aws.amazon.com/iam/home#/roles)中，刪除角色名稱 （例如 *getStartedRole*)。
+ [在 Amazon Cognito 主控台](https://console.aws.amazon.com/cognito/home#/identity)中，刪除身分集區名稱 （例如 *getStartedPool*)。