[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 AWS SDK untuk JavaScript AWS SDK untuk JavaScript menyediakan akses ke layanan web baik di browser atau lingkungan Node.js. Bagian ini telah memulai latihan yang menunjukkan kepada Anda cara bekerja dengan AWS SDK untuk JavaScript di setiap JavaScript lingkungan ini. **Topics** + [Otentikasi SDK dengan AWS](getting-your-credentials.md) + [Memulai dengan Node.js](getting-started-nodejs.md) + [Memulai di browser](getting-started-browser.md) + [Memulai di React Native](getting-started-react-native.md) # Otentikasi SDK dengan AWS Anda harus menetapkan bagaimana kode Anda mengautentikasi AWS saat mengembangkan dengan Layanan AWS. Anda dapat mengonfigurasi akses terprogram ke AWS sumber daya dengan cara yang berbeda tergantung pada lingkungan dan AWS akses yang tersedia untuk Anda. Untuk memilih metode otentikasi dan mengonfigurasinya untuk SDK, lihat [Autentikasi dan akses](https://docs.aws.amazon.com/sdkref/latest/guide/access.html) di Panduan Referensi *Alat AWS SDKs dan Alat*. Kami merekomendasikan bahwa pengguna baru yang mengembangkan secara lokal dan tidak diberikan metode otentikasi oleh majikan mereka untuk mengatur. AWS IAM Identity Center Metode ini termasuk menginstal AWS CLI untuk kemudahan konfigurasi dan untuk masuk secara teratur ke portal AWS akses. Jika Anda memilih metode ini, lingkungan Anda harus berisi elemen-elemen berikut setelah Anda menyelesaikan prosedur untuk [autentikasi IAM Identity Center](https://docs.aws.amazon.com/sdkref/latest/guide/access-sso.html) di *AWS SDKs dan Panduan Referensi Alat*: + Itu AWS CLI, yang Anda gunakan untuk memulai sesi portal AWS akses sebelum Anda menjalankan aplikasi Anda. + [AWS`config`File bersama](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html) yang memiliki `[default]` profil dengan serangkaian nilai konfigurasi yang dapat direferensikan dari SDK. Untuk menemukan lokasi file ini, lihat [Lokasi file bersama di](https://docs.aws.amazon.com/sdkref/latest/guide/file-location.html) *Panduan Referensi Alat AWS SDKs dan*. + `config`File bersama menetapkan [https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html](https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html)pengaturan. Ini menetapkan default Wilayah AWS yang digunakan SDK untuk AWS permintaan. Wilayah ini digunakan untuk permintaan layanan SDK yang tidak ditentukan dengan Wilayah yang akan digunakan. + SDK menggunakan [konfigurasi penyedia token SSO](https://docs.aws.amazon.com/sdkref/latest/guide/feature-sso-credentials.html#feature-sso-credentials-profile) profil untuk memperoleh kredensil sebelum mengirim permintaan ke. AWS`sso_role_name`Nilai, yang merupakan peran IAM yang terhubung ke set izin Pusat Identitas IAM, memungkinkan akses ke yang Layanan AWS digunakan dalam aplikasi Anda. `config`File contoh berikut menunjukkan profil default yang diatur dengan konfigurasi penyedia token SSO. `sso_session`Pengaturan profil mengacu pada [`sso-session`bagian](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html#section-session) bernama. `sso-session`Bagian ini berisi pengaturan untuk memulai sesi portal AWS akses. ``` [default] sso_session = my-sso sso_account_id = 111122223333 sso_role_name = SampleRole region = us-east-1 output = json [sso-session my-sso] sso_region = us-east-1 sso_start_url = https://provided-domain.awsapps.com/start sso_registration_scopes = sso:account:access ``` AWS SDK untuk JavaScript v3 tidak memerlukan paket tambahan (seperti `SSO` dan`SSOOIDC`) untuk ditambahkan ke aplikasi Anda untuk menggunakan autentikasi IAM Identity Center. Untuk detail tentang penggunaan penyedia kredensi ini secara eksplisit, lihat [https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso](https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso)di situs web npm (Node.js package manager). ## Mulai sesi portal AWS akses Sebelum menjalankan aplikasi yang mengakses Layanan AWS, Anda memerlukan sesi portal AWS akses aktif agar SDK menggunakan autentikasi IAM Identity Center untuk menyelesaikan kredensialnya. Bergantung pada panjang sesi yang dikonfigurasi, akses Anda pada akhirnya akan kedaluwarsa dan SDK akan mengalami kesalahan otentikasi. Untuk masuk ke portal AWS akses, jalankan perintah berikut di AWS CLI. ``` aws sso login ``` Jika Anda mengikuti panduan dan memiliki pengaturan profil default, Anda tidak perlu memanggil perintah dengan `--profile` opsi. Jika konfigurasi penyedia token SSO Anda menggunakan profil bernama, perintahnya adalah`aws sso login --profile named-profile`. Untuk menguji secara opsional apakah Anda sudah memiliki sesi aktif, jalankan AWS CLI perintah berikut. ``` aws sts get-caller-identity ``` Jika sesi Anda aktif, respons terhadap perintah ini melaporkan akun Pusat Identitas IAM dan set izin yang dikonfigurasi dalam `config` file bersama. **catatan** Jika Anda sudah memiliki sesi portal AWS akses aktif dan menjalankannya`aws sso login`, Anda tidak akan diminta untuk memberikan kredensil. Proses masuk mungkin meminta Anda untuk mengizinkan AWS CLI akses ke data Anda. Karena AWS CLI dibangun di atas SDK untuk Python, pesan izin mungkin berisi variasi nama. `botocore` ## Menggunakan kredenal login konsol Anda dapat menggunakan kredenal masuk Konsol AWS Manajemen yang sudah ada untuk akses terprogram ke layanan. AWS Setelah alur otentikasi berbasis browser, buat kredenal AWS sementara yang berfungsi di seluruh alat pengembangan lokal seperti CLI AWS dan SDK for. AWS JavaScript Fitur ini menyederhanakan proses konfigurasi dan pengelolaan kredensional CLI AWS . Untuk mempelajari cara memulai, ikuti petunjuk untuk [Login untuk pengembangan AWS lokal menggunakan kredensi konsol](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html). Ketika Anda menjalankan **aws login** perintah, Anda dapat memilih dari sesi konsol aktif Anda, atau masuk melalui alur otentikasi berbasis browser dan ini akan secara otomatis menghasilkan kredensi sementara. AWS SDK untuk JavaScript secara otomatis menyegarkan kredensil 5 menit sebelum kedaluwarsa, dengan setiap set kredensil berlaku hingga 12 jam. Untuk mengetahui informasi selengkapnya, lihat [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials). ## Informasi otentikasi lebih lanjut Pengguna manusia, juga dikenal sebagai *identitas manusia*, adalah orang, administrator, pengembang, operator, dan konsumen aplikasi Anda. Mereka harus memiliki identitas untuk mengakses AWS lingkungan dan aplikasi Anda. Pengguna manusia yang merupakan anggota organisasi Anda - itu berarti Anda, pengembang - dikenal sebagai *identitas tenaga kerja*. Gunakan kredensi sementara saat mengakses. AWS Anda dapat menggunakan penyedia identitas bagi pengguna manusia Anda untuk menyediakan akses gabungan ke AWS akun dengan mengambil peran, yang menyediakan kredensi sementara. Untuk manajemen akses terpusat, kami sarankan Anda menggunakan AWS IAM Identity Center (IAM Identity Center) untuk mengelola akses ke akun Anda dan izin dalam akun tersebut. Untuk alternatif lainnya, lihat yang berikut ini: + Untuk mempelajari lebih lanjut tentang praktik terbaik, lihat [Praktik terbaik keamanan di IAM](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) di *Panduan Pengguna IAM*. + *Untuk membuat AWS kredensil jangka pendek, lihat [Kredenal Keamanan Sementara](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html) di Panduan Pengguna IAM.* + *Untuk mempelajari tentang AWS SDK lain untuk penyedia kredensi JavaScript V3, lihat Penyedia kredensi [terstandarisasi di Panduan Referensi Alat dan Alat](https://docs.aws.amazon.com/sdkref/latest/guide/standardized-credentials.html).AWS SDKs * # Memulai dengan Node.js Panduan ini menunjukkan cara menginisialisasi paket NPM, menambahkan klien layanan ke paket Anda, dan menggunakan JavaScript SDK untuk memanggil tindakan layanan. ## Skenario **Buat paket NPM baru dengan satu file utama yang melakukan hal berikut:** + Membuat bucket Amazon Simple Storage Service + Menempatkan objek di ember Amazon S3 + Membaca objek di bucket Amazon S3 + Mengonfirmasi jika pengguna ingin menghapus sumber daya ## Prasyarat Sebelum Anda dapat menjalankan contoh, Anda harus melakukan hal berikut: + Konfigurasikan otentikasi SDK Anda. Untuk informasi selengkapnya, lihat [Otentikasi SDK dengan AWS](getting-your-credentials.md). + Instal [Node.js](https://nodejs.org/en/download). AWS merekomendasikan menggunakan versi Active LTS dari Node.js untuk pengembangan. ## Langkah 1: Siapkan struktur paket dan instal paket klien Untuk mengatur struktur paket dan menginstal paket klien: 1. Buat folder baru `nodegetstarted` untuk berisi paket. 1. Dari baris perintah, navigasikan ke folder baru. 1. Jalankan perintah berikut untuk membuat `package.json` file default: ``` npm init -y ``` 1. Jalankan perintah berikut untuk menginstal paket klien Amazon S3: ``` npm i @aws-sdk/client-s3 ``` 1. Tambahkan `"type": "module"` ke `package.json` file. Ini memberitahu Node.js untuk menggunakan sintaks ESM modern. Final `package.json` akan terlihat mirip dengan yang berikut: ``` { "name": "example-javascriptv3-get-started-node", "version": "1.0.0", "description": "This guide shows you how to initialize an NPM package, add a service client to your package, and use the JavaScript SDK to call a service action.", "main": "index.js", "scripts": { "test": "vitest run **/*.unit.test.js" }, "author": "Your Name", "license": "Apache-2.0", "dependencies": { "@aws-sdk/client-s3": "^3.420.0" }, "type": "module" } ``` ## Langkah 2: Tambahkan impor dan kode SDK yang diperlukan Tambahkan kode berikut ke file bernama `index.js` dalam `nodegetstarted` folder. ``` // This is used for getting user input. import { createInterface } from "node:readline/promises"; import { S3Client, PutObjectCommand, CreateBucketCommand, DeleteObjectCommand, DeleteBucketCommand, paginateListObjectsV2, GetObjectCommand, } from "@aws-sdk/client-s3"; export async function main() { // A region and credentials can be declared explicitly. For example // `new S3Client({ region: 'us-east-1', credentials: {...} })` would //initialize the client with those settings. However, the SDK will // use your local configuration and credentials if those properties // are not defined here. const s3Client = new S3Client({}); // Create an Amazon S3 bucket. The epoch timestamp is appended // to the name to make it unique. const bucketName = `test-bucket-${Date.now()}`; await s3Client.send( new CreateBucketCommand({ Bucket: bucketName, }), ); // Put an object into an Amazon S3 bucket. await s3Client.send( new PutObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", Body: "Hello JavaScript SDK!", }), ); // Read the object. const { Body } = await s3Client.send( new GetObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", }), ); console.log(await Body.transformToString()); // Confirm resource deletion. const prompt = createInterface({ input: process.stdin, output: process.stdout, }); const result = await prompt.question("Empty and delete bucket? (y/n) "); prompt.close(); if (result === "y") { // Create an async iterator over lists of objects in a bucket. const paginator = paginateListObjectsV2( { client: s3Client }, { Bucket: bucketName }, ); for await (const page of paginator) { const objects = page.Contents; if (objects) { // For every object in each page, delete it. for (const object of objects) { await s3Client.send( new DeleteObjectCommand({ Bucket: bucketName, Key: object.Key }), ); } } } // Once all the objects are gone, the bucket can be deleted. await s3Client.send(new DeleteBucketCommand({ Bucket: bucketName })); } } // Call a function if this file was run directly. This allows the file // to be runnable without running on import. import { fileURLToPath } from "node:url"; if (process.argv[1] === fileURLToPath(import.meta.url)) { main(); } ``` Kode contoh dapat ditemukan [di sini GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/index.js). ## Langkah 3: Jalankan contoh **catatan** Ingatlah untuk masuk\$1 Jika Anda menggunakan IAM Identity Center untuk mengautentikasi, ingatlah untuk masuk menggunakan perintah. AWS CLI `aws sso login` 1. Jalankan `node index.js`. 1. Pilih apakah akan mengosongkan dan menghapus ember. 1. Jika Anda tidak menghapus ember, pastikan untuk mengosongkan dan menghapusnya secara manual nanti. # 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*). # Memulai di React Native Tutorial ini menunjukkan kepada Anda bagaimana Anda dapat membuat aplikasi React Native menggunakan [React Native CLI](https://reactnative.dev/docs/environment-setup). ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **Tutorial ini menunjukkan kepada Anda:** + Cara menginstal dan menyertakan modul AWS SDK untuk JavaScript versi 3 (V3) yang digunakan proyek Anda. + Cara menulis kode yang terhubung ke Amazon Simple Storage Service (Amazon S3) untuk membuat dan menghapus bucket Amazon S3. ## Skenario Amazon S3 adalah layanan cloud yang memungkinkan Anda menyimpan dan mengambil sejumlah data kapan saja, dari mana saja di web. React Native adalah framework pengembangan yang memungkinkan Anda membuat aplikasi mobile. Tutorial ini menunjukkan kepada Anda bagaimana Anda dapat membuat aplikasi React Native yang terhubung ke Amazon S3 untuk membuat dan menghapus bucket Amazon S3. Aplikasi ini menggunakan AWS SDK berikut untuk JavaScript APIs: + [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/)konstruktor + [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/)konstruktor ## Tugas prasyarat **catatan** Jika Anda telah menyelesaikan salah satu langkah berikut melalui tutorial lain atau konfigurasi yang ada, lewati langkah-langkah tersebut. Bagian ini menyediakan pengaturan minimal yang diperlukan untuk menyelesaikan tutorial ini. Anda seharusnya tidak menganggap ini sebagai pengaturan penuh. Untuk itu, lihat[Siapkan SDK untuk JavaScript](setting-up.md). + Instal alat-alat berikut: + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + [Xcode](https://developer.apple.com/xcode/) jika Anda menguji di iOS + [Android Studio](https://developer.android.com/studio/) jika Anda menguji di Android + Siapkan [lingkungan pengembangan React Native](https://reactnative.dev/docs/environment-setup) + Siapkan lingkungan proyek untuk menjalankan TypeScript contoh Node ini, dan instal AWS SDK yang diperlukan untuk JavaScript dan modul pihak ketiga. Ikuti instruksi pada [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md). + Anda harus menetapkan bagaimana kode Anda mengautentikasi AWS saat mengembangkan dengan AWS layanan. Untuk informasi selengkapnya, lihat [Otentikasi SDK dengan AWS](getting-your-credentials.md). **catatan** Peran IAM untuk contoh ini harus disetel untuk menggunakan izin **FullAccessAmazonS3**. ## Langkah 1: Buat Kolam Identitas Amazon Cognito Dalam latihan ini, Anda membuat dan menggunakan kumpulan Identitas Amazon Cognito untuk menyediakan akses tidak terautentikasi ke aplikasi Anda untuk layanan Amazon S3. Membuat kumpulan identitas juga menciptakan dua peran AWS Identity and Access Management (IAM), satu untuk mendukung pengguna yang diautentikasi oleh penyedia identitas dan yang lainnya untuk mendukung pengguna tamu yang tidak diautentikasi. Dalam latihan 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 membuat kumpulan Identitas Amazon Cognito** 1. Masuk ke Konsol Manajemen AWS dan buka konsol Amazon Cognito di [Amazon Web Services](https://console.aws.amazon.com/cognito/) Console. 1. Pilih **Identity Pools** di halaman pembuka konsol. 1. Pada halaman berikutnya, pilih **Buat kumpulan identitas baru**. **catatan** Jika tidak ada kumpulan identitas lain, konsol Amazon Cognito akan melewati halaman ini dan membuka halaman berikutnya sebagai gantinya. 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, *getStartedReactPeran) dalam nama peran* **IAM**. 1. Di **Konfigurasi properti**, masukkan nama (misalnya, *getStartedReactPool*) di **nama kumpulan Identity**. 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 untuk kumpulan identitas yang baru dibuat ini. Anda memerlukan nilai-nilai ini untuk menggantikan *region* dan *identityPoolId* dalam skrip browser Anda. Setelah membuat kumpulan identitas Amazon Cognito, Anda siap menambahkan izin untuk Amazon S3 yang diperlukan oleh aplikasi React Native Anda. ## Langkah 2: Tambahkan Kebijakan ke Peran IAM yang Dibuat Untuk mengaktifkan akses skrip browser ke Amazon S3 untuk membuat dan menghapus bucket Amazon S3, gunakan peran IAM yang tidak diautentikasi yang dibuat untuk kumpulan identitas Amazon Cognito Anda. Ini mengharuskan Anda untuk menambahkan kebijakan IAM ke peran tersebut. Untuk informasi selengkapnya tentang peran IAM, lihat [Membuat Peran untuk Mendelegasikan Izin ke AWS Layanan di Panduan](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) 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 membuat aplikasi. ## Langkah 3: Buat aplikasi menggunakan create-react-native-app Buat React Native App dengan menjalankan perintah berikut. ``` npx react-native init ReactNativeApp --npm ``` ## Langkah 4: Instal paket Amazon S3 dan dependensi lainnya Di dalam direktori proyek, jalankan perintah berikut untuk menginstal paket Amazon S3. ``` npm install @aws-sdk/client-s3 ``` Perintah ini menginstal paket Amazon S3 di project Anda, dan `package.json` memperbarui untuk mencantumkan Amazon S3 sebagai dependensi proyek. Anda dapat menemukan informasi tentang paket ini dengan mencari "@aws -sdk” di situs web [https://www.npmjs.com/](https://www.npmjs.com/) npm. Paket-paket ini dan kode terkaitnya dipasang di `node_modules` subdirektori proyek Anda. Untuk informasi selengkapnya tentang menginstal paket Node.js, lihat [Mengunduh dan menginstal paket secara lokal](https://docs.npmjs.com/downloading-and-installing-packages-locally) dan [Membuat modul Node.js](https://docs.npmjs.com/creating-node-js-modules) di situs web [npm (Node.js package manager)](https://www.npmjs.com/). Untuk informasi tentang mengunduh dan menginstal AWS SDK untuk JavaScript, lihat[Instal SDK untuk JavaScript](setting-up.md#installing-jssdk). Instal dependensi lain yang diperlukan untuk otentikasi. ``` npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity ``` ## Langkah 5: Tulis kode React Native Tambahkan kode berikut ke file`App.tsx`. Ganti *identityPoolId* dan *region* dengan ID kumpulan identitas dan Wilayah tempat bucket Amazon S3 Anda akan dibuat. ``` import React, { useCallback, useState } from "react"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import "react-native-get-random-values"; import "react-native-url-polyfill/auto"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers"; const client = new S3Client({ // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region. region: "us-east-1", credentials: fromCognitoIdentityPool({ // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region. identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492", // Replace the value of 'region' with your Amazon Cognito Region. clientConfig: { region: "us-east-1" }, }), }); enum MessageType { SUCCESS = 0, FAILURE = 1, EMPTY = 2, } const App = () => { const [bucketName, setBucketName] = useState(""); const [msg, setMsg] = useState<{ message: string; type: MessageType }>({ message: "", type: MessageType.EMPTY, }); const createBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" created.`, type: MessageType.SUCCESS, }); } catch (e) { console.error(e); setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); const deleteBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" deleted.`, type: MessageType.SUCCESS, }); } catch (e) { setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); return ( {msg.type !== MessageType.EMPTY && ( {msg.message} )} setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} />