Memulai di browser - AWS SDK for JavaScript
SkenarioLangkah 1: Buat kumpulan dan peran identitas Amazon Cognito IAMLangkah 2: Tambahkan kebijakan ke IAM peran 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 versi 3 (V3) dari SDK for 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) dari SDK for JavaScript, lihatSDKuntuk 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 IAM peran 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 for JavaScript dalam aplikasi web.

Langkah 1: Buat kumpulan dan peran identitas Amazon Cognito 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 membuat 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 terkait IAM

  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 IAM peran baru dan masukkan nama (misalnya, getStartedRole) di nama IAM peran.

  6. Di Konfigurasi properti, masukkan nama (misalnya, getStartedPool) di nama kumpulan Identitas.

  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 membutuhkan nilai-nilai ini untuk menggantikan IDENTITY_POOL_ID and 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 IAM peran yang dibuat

Untuk mengaktifkan akses ke bucket Amazon S3 di aplikasi web Anda, gunakan IAM peran yang tidak diautentikasi (misalnya, getStartedRole) yang dibuat untuk kumpulan identitas Amazon Cognito Anda (misalnya,). getStartedPool Ini mengharuskan Anda untuk melampirkan IAM kebijakan ke peran tersebut. Untuk informasi selengkapnya tentang memodifikasi IAM peran, lihat Memodifikasi kebijakan izin peran di Panduan Pengguna. IAM

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

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

  2. Di panel navigasi sebelah kiri, pilih Peran.

  3. Pilih nama peran yang ingin Anda ubah (misalnya, getStartedRole), 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 ReadOnlyAccessAmazonS3.

    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 IAM peran 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 berbagi sumber daya lintas asal (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 Berbagi sumber lintas asal (CORS). Masukkan yang berikut iniJSON:

    [
  {
    "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, arahkan ke yang URL 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: