Memulai di browser - AWS SDK for JavaScript
SkenarioLangkah 1: Buat kumpulan identitas Amazon Cognito dan peran IAMLangkah 2: Tambahkan kebijakan ke peran IAM yang dibuatLangkah 3: Tambahkan ember dan objek Amazon S3Langkah 4: Siapkan kode browserLangkah 5: Jalankan ContohPembersihan

Panduan API Referensi AWS SDK for JavaScript V3 menjelaskan secara rinci semua API operasi untuk AWS SDK for 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 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.

Untuk contoh lain penggunaan (V3) SDK for JavaScript, lihat. SDKuntuk JavaScript contoh kode (v3)

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.

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 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 di Panduan Pengembang Amazon Cognito.

Untuk membuat kumpulan identitas Amazon Cognito dan peran IAM terkait

  1. Masuk ke AWS Management Console dan buka konsol Amazon Cognito di https://console.aws.amazon.com/cognito/.

  2. Di panel navigasi kiri, pilih Identity pool.

  3. Pilih Buat kumpulan identitas.

  4. Di Konfigurasikan kepercayaan kumpulan identitas, pilih Akses tamu untuk otentikasi pengguna.

  5. Di Konfigurasi izin, pilih Buat peran IAM baru dan masukkan nama (misalnya, dapatkan StartedRole) di nama peran IAM.

  6. Di Konfigurasi properti, masukkan nama (misalnya, dapatkan StartedPool) di nama kumpulan Identity.

  7. 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.

  8. Perhatikan ID kumpulan Identitas dan Wilayah kumpulan identitas Amazon Cognito yang baru dibuat. Anda memerlukan nilai-nilai ini untuk menggantikan IDENTITY_POOL_ID dan REGION di. Langkah 4: Siapkan kode browser

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, get StartedRole) yang dibuat untuk kumpulan identitas Amazon Cognito Anda (misalnya, get). StartedPool Ini mengharuskan Anda untuk melampirkan kebijakan IAM ke peran tersebut. Untuk informasi selengkapnya tentang memodifikasi peran IAM, lihat Memodifikasi kebijakan izin peran di Panduan Pengguna IAM.

Untuk menambahkan kebijakan Amazon S3 ke peran IAM yang terkait dengan pengguna yang tidak diautentikasi

  1. Masuk ke AWS Management Console dan buka konsol IAM di https://console.aws.amazon.com/iam/.

  2. Di panel navigasi sebelah kiri, pilih Peran.

  3. Pilih nama peran yang ingin Anda ubah (misalnya, dapatkan StartedRole), lalu pilih tab Izin.

  4. Pilih Tambahkan izin, lalu pilih Lampirkan kebijakan.

  5. Di halaman Tambahkan izin untuk peran ini, temukan lalu pilih kotak centang untuk Akses ReadOnlyAmazonS3.

    catatan

    Anda dapat menggunakan proses ini untuk mengaktifkan akses ke AWS layanan apa pun.

  6. 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.

Untuk menambahkan bucket dan objek Amazon S3 dengan CORS

  1. Masuk ke AWS Management Console dan buka konsol Amazon S3 di https://console.aws.amazon.com/s3/.

  2. Di panel navigasi kiri, pilih Bucket dan pilih Buat ember.

  3. Masukkan nama bucket yang sesuai dengan aturan penamaan bucket (misalnya, getstartedbucket) dan pilih Create bucket.

  4. Pilih bucket yang Anda buat, lalu pilih tab Objects. Kemudian pilih Unggah.

  5. Di Bawah File dan folder, pilih Tambahkan file.

  6. Pilih file yang akan diunggah, lalu pilih Buka. Kemudian pilih Unggah untuk menyelesaikan pengunggahan objek ke bucket Anda.

  7. 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": []
  }
]

  8. 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.

Untuk mengatur aplikasi contoh

  1. Instal Node.js.

  2. Dari baris perintah, kloning Repositori Contoh AWS Kode:

    git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git

  3. Arahkan ke aplikasi contoh:

    cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

  4. Jalankan perintah berikut untuk menginstal paket yang diperlukan:

    npm install

  5. Selanjutnya, buka src/App.tsx di editor teks dan lengkapi yang berikut ini:

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/

  2. 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

  3. 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: