[Panduan Referensi API AWS SDK untuk JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) menjelaskan secara rinci semua operasi API untuk AWS SDK untuk JavaScript versi 3 (V3).
Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Memulai di browser
Bagian ini memandu Anda melalui contoh yang menunjukkan cara menjalankan AWS SDK versi 3 (V3) untuk JavaScript di browser.
**catatan**
Menjalankan V3 di browser sedikit berbeda dari versi 2 (V2). Untuk informasi selengkapnya, lihat [Menggunakan browser di V3](welcome.md#v3_browsers).
Untuk contoh lain penggunaan (V3) AWS SDK for JavaScript, lihat. [SDK untuk contoh JavaScript kode (v3)](javascript_code_examples.md)
**Contoh aplikasi web ini menunjukkan kepada Anda:**
+ Cara mengakses AWS layanan menggunakan Amazon Cognito untuk otentikasi.
+ Cara membaca daftar objek di bucket Amazon Simple Storage Service (Amazon S3) Simple Storage S3) menggunakan AWS Identity and Access Management peran (IAM).
**catatan**
Contoh ini tidak digunakan AWS IAM Identity Center untuk otentikasi.
## Skenario
Amazon S3 adalah layanan penyimpanan objek yang menawarkan skalabilitas, ketersediaan data, keamanan, dan kinerja terdepan di industri. Anda dapat menggunakan Amazon S3 untuk menyimpan data sebagai objek dalam wadah yang disebut bucket. Untuk informasi selengkapnya tentang Amazon S3, lihat Panduan Pengguna [Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/).
Contoh ini menunjukkan cara menyiapkan dan menjalankan aplikasi web yang mengasumsikan peran IAM untuk dibaca dari bucket Amazon S3. Contoh ini menggunakan pustaka front-end React dan perkakas front-end Vite untuk menyediakan lingkungan pengembangan. JavaScript Aplikasi web menggunakan kumpulan identitas Amazon Cognito untuk memberikan kredensil yang diperlukan untuk mengakses layanan. AWS Contoh kode yang disertakan menunjukkan pola dasar untuk memuat dan menggunakan AWS SDK untuk JavaScript aplikasi web.
## Langkah 1: Buat kumpulan identitas Amazon Cognito dan peran IAM
Dalam latihan ini, Anda membuat dan menggunakan kumpulan identitas Amazon Cognito untuk menyediakan akses tidak terautentikasi ke aplikasi web Anda untuk layanan Amazon S3. Membuat kumpulan identitas juga menciptakan peran AWS Identity and Access Management (IAM) untuk mendukung pengguna tamu yang tidak diautentikasi. Untuk contoh ini, kami hanya akan bekerja dengan peran pengguna yang tidak diautentikasi untuk menjaga tugas tetap fokus. Anda dapat mengintegrasikan dukungan untuk penyedia identitas dan pengguna yang diautentikasi nanti. Untuk informasi selengkapnya tentang menambahkan kumpulan identitas Amazon Cognito, lihat [Tutorial: Membuat kumpulan identitas](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) di Panduan Pengembang *Amazon Cognito*.
**Untuk membuat kumpulan identitas Amazon Cognito dan peran IAM terkait**
1. Masuk ke Konsol Manajemen AWS dan buka konsol Amazon Cognito di. [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)
1. Di panel navigasi kiri, pilih **Identity pool**.
1. Pilih **Buat kumpulan identitas**.
1. Di **Konfigurasikan kepercayaan kumpulan identitas**, pilih **Akses tamu** untuk otentikasi pengguna.
1. Di **Konfigurasi izin**, pilih **Buat peran IAM baru** dan masukkan nama (misalnya, *getStartedRole*) di nama peran **IAM**.
1. Di **Konfigurasi properti**, masukkan nama (misalnya, *getStartedPool*) di **nama kumpulan Identitas**.
1. Di **Tinjau dan buat**, konfirmasikan pilihan yang Anda buat untuk kumpulan identitas baru Anda. Pilih **Edit** untuk kembali ke wizard dan mengubah pengaturan apa pun. Setelah selesai, pilih **Buat kumpulan identitas**.
1. Perhatikan **ID kumpulan Identitas** dan **Wilayah** kumpulan identitas Amazon Cognito yang baru dibuat. Anda membutuhkan nilai-nilai ini untuk menggantikan *IDENTITY\$1POOL\$1ID* dan *REGION* masuk[Langkah 4: Siapkan kode browser](#getting-started-browser-create-html).
Setelah membuat kumpulan identitas Amazon Cognito, Anda siap menambahkan izin untuk Amazon S3 yang diperlukan oleh aplikasi web Anda.
## Langkah 2: Tambahkan kebijakan ke peran IAM yang dibuat
Untuk mengaktifkan akses ke bucket Amazon S3 di aplikasi web Anda, gunakan peran IAM yang tidak diautentikasi (misalnya, *getStartedRole*) yang dibuat untuk kumpulan identitas Amazon Cognito Anda (misalnya,). *getStartedPool* Ini mengharuskan Anda untuk melampirkan kebijakan IAM ke peran tersebut. *Untuk informasi selengkapnya tentang memodifikasi peran IAM, lihat [Memodifikasi kebijakan izin peran](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) di Panduan Pengguna IAM.*
**Untuk menambahkan kebijakan Amazon S3 ke peran IAM yang terkait dengan pengguna yang tidak diautentikasi**
1. Masuk ke Konsol Manajemen AWS dan buka konsol IAM di [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/).
1. Di panel navigasi sebelah kiri, pilih **Peran**.
1. Pilih nama peran yang ingin Anda ubah (misalnya, *getStartedRole*), lalu pilih tab **Izin**.
1. Pilih **Tambahkan izin**, lalu pilih **Lampirkan kebijakan**.
1. Di halaman **Tambahkan izin** untuk peran ini, temukan lalu pilih kotak centang untuk **ReadOnlyAccessAmazonS3**.
**catatan**
Anda dapat menggunakan proses ini untuk mengaktifkan akses ke AWS layanan apa pun.
1. Pilih **Tambahkan izin**.
Setelah membuat kumpulan identitas Amazon Cognito dan menambahkan izin untuk Amazon S3 ke peran IAM Anda untuk pengguna yang tidak diautentikasi, Anda siap untuk menambahkan dan mengonfigurasi bucket Amazon S3.
## Langkah 3: Tambahkan ember dan objek Amazon S3
Pada langkah ini, Anda akan menambahkan bucket dan objek Amazon S3 untuk contoh. Anda juga akan mengaktifkan cross-origin resource sharing (CORS) untuk bucket. *Untuk informasi selengkapnya tentang membuat bucket dan objek Amazon S3, lihat [Memulai Amazon S3 di Panduan Pengguna Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html).*
**Untuk menambahkan bucket dan objek Amazon S3 dengan CORS**
1. Masuk ke Konsol Manajemen AWS dan buka konsol Amazon S3 di. [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)
1. Di panel navigasi kiri, pilih **Bucket dan pilih **Buat** ember**.
1. **Masukkan nama bucket yang sesuai dengan [aturan penamaan bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) (misalnya, *getstartedbucket) dan pilih Create bucket*.**
1. Pilih bucket yang Anda buat, lalu pilih tab **Objects**. Kemudian pilih **Unggah**.
1. Di Bawah **File dan folder**, pilih **Tambahkan file**.
1. Pilih file yang akan diunggah, lalu pilih **Buka.** Kemudian pilih **Unggah** untuk menyelesaikan pengunggahan objek ke bucket Anda.
1. Selanjutnya, pilih tab **Izin** di bucket Anda, lalu pilih **Edit** di bagian **Cross-origin resource sharing (CORS**). Masukkan JSON berikut:
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
```
1. Pilih **Simpan perubahan**.
Setelah Anda menambahkan bucket Amazon S3 dan menambahkan objek, Anda siap untuk mengatur kode browser.
## Langkah 4: Siapkan kode browser
Contoh aplikasi terdiri dari aplikasi React satu halaman. File untuk contoh ini dapat ditemukan [di sini GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects).
**Untuk mengatur aplikasi contoh**
1. Instal [Node.js](https://nodejs.org/en/download).
1. Dari baris perintah, kloning [Repositori Contoh AWS Kode](https://github.com/awsdocs/aws-doc-sdk-examples/):
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. Arahkan ke aplikasi contoh:
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. Jalankan perintah berikut untuk menginstal paket yang diperlukan:
```
npm install
```
1. Selanjutnya, buka `src/App.tsx` di editor teks dan lengkapi yang berikut ini:
+ Ganti *YOUR\$1IDENTITY\$1POOL\$1ID* dengan ID kumpulan identitas Amazon Cognito yang Anda catat. [Langkah 1: Buat kumpulan identitas Amazon Cognito dan peran IAM](#getting-started-browser-create-identity-pool)
+ Ganti nilai untuk wilayah ke wilayah yang ditetapkan untuk bucket Amazon S3 dan kumpulan identitas Amazon Cognito. Perhatikan bahwa wilayah untuk kedua layanan harus sama (misalnya, *us-east-2*).
+ Ganti *bucket-name* dengan nama bucket yang Anda buat[Langkah 3: Tambahkan ember dan objek Amazon S3](#getting-started-browser-create-s3-bucket).
Setelah Anda mengganti teks, simpan `App.tsx` file. Anda sekarang siap untuk menjalankan aplikasi web.
## Langkah 5: Jalankan Contoh
**Untuk menjalankan aplikasi contoh**
1. Dari baris perintah, arahkan ke aplikasi contoh:
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. Dari baris perintah, jalankan perintah berikut:
```
npm run dev
```
Lingkungan pengembangan Vite akan berjalan dengan pesan berikut:
```
VITE v4.3.9 ready in 280 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
```
1. Di browser web Anda, navigasikan ke URL yang ditunjukkan di atas (misalnya, http://localhost:5173). Aplikasi contoh akan menampilkan daftar nama file objek di bucket Amazon S3 Anda.
## Pembersihan
Untuk membersihkan sumber daya yang Anda buat selama tutorial ini, lakukan hal berikut:
+ [Di konsol Amazon S3](https://console.aws.amazon.com/s3/)*, hapus objek dan bucket apa pun yang dibuat (misalnya, getstartedbucket).*
+ [Di konsol IAM](https://console.aws.amazon.com/iam/home#/roles), hapus nama peran (misalnya, *getStartedRole*).
+ [Di konsol Amazon Cognito](https://console.aws.amazon.com/cognito/home#/identity), hapus nama kumpulan identitas (misalnya, *getStartedPool*).