Siapkan contoh aplikasi satu halaman React - Amazon Cognito
Membuat aplikasiBuat lingkungan pengembang Lightsail

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Siapkan contoh aplikasi satu halaman React

Dalam tutorial ini, Anda akan membuat aplikasi satu halaman React di mana Anda dapat menguji sign-up, konfirmasi, dan login pengguna. React adalah perpustakaan JavaScript berbasis untuk aplikasi web dan seluler, dengan fokus pada antarmuka pengguna (UI). Aplikasi contoh ini menunjukkan beberapa fungsi dasar kumpulan pengguna Amazon Cognito. Jika Anda sudah berpengalaman dalam pengembangan aplikasi web dengan React, unduh contoh aplikasi dari GitHub.

Screenshot berikut adalah halaman otentikasi awal dalam aplikasi yang akan Anda buat.

Screenshot dari halaman pendaftaran untuk aplikasi web contoh berbasis React.

Prosedur Create a user pool menyiapkan Anda dengan kumpulan pengguna yang bekerja dengan aplikasi contoh. Anda dapat melewati langkah ini jika Anda memiliki kumpulan pengguna yang memenuhi persyaratan berikut:

  • Pengguna dapat masuk dengan alamat email mereka. Opsi masuk kumpulan pengguna Cognito: Email.

  • Nama pengguna tidak peka huruf besar/kecil. Persyaratan nama pengguna: Membuat nama pengguna sensitif huruf besar/kecil tidak dipilih.

  • Autentikasi multi-faktor (MFA) tidak diperlukan. MFApenegakan: Opsional MFA.

  • Kumpulan pengguna Anda memverifikasi atribut untuk konfirmasi profil pengguna dengan pesan email. Atribut untuk memverifikasi: Kirim pesan email, verifikasi alamat email.

  • Email adalah satu-satunya atribut yang diperlukan. Atribut yang diperlukan: email.

  • Pengguna dapat mendaftar sendiri di kumpulan pengguna Anda. Registrasi mandiri: Aktifkan pendaftaran mandiri dipilih.

  • Klien aplikasi awal Anda adalah klien publik yang mengizinkan login dengan nama pengguna dan kata sandi. Jenis aplikasi: Klien publik, Alur otentikasi:ALLOW_USER_PASSWORD_AUTH.

Buat kumpulan pengguna baru

  1. Masuk ke Konsol Amazon Cognito. Jika diminta, masukkan AWS kredensialnya.

  2. Pilih tombol Buat kumpulan pengguna. Anda mungkin diminta untuk memilih Kumpulan Pengguna dari panel navigasi kiri untuk menampilkan opsi ini.

  3. Di sudut kanan atas halaman, pilih Buat kumpulan pengguna untuk memulai panduan pembuatan kumpulan pengguna.

  4. Di Mengonfigurasi pengalaman masuk, Anda dapat memilih penyedia identitas (IdPs) yang akan Anda gunakan dengan kumpulan pengguna ini. Untuk informasi selengkapnya, lihat Menambahkan login kumpulan pengguna melalui pihak ketiga.

    1. Di bawah Penyedia otentikasi, untuk jenis Penyedia, pastikan bahwa hanya kumpulan pengguna Cognito yang dipilih.

    2. Untuk opsi masuk kumpulan pengguna Cognito, pilih Nama pengguna. Jangan memilih persyaratan nama pengguna tambahan.

    3. Simpan semua opsi lain sebagai default dan pilih Berikutnya.

  5. Di Konfigurasi persyaratan keamanan, Anda dapat memilih kebijakan kata sandi, persyaratan otentikasi multi-faktor (MFA), dan opsi pemulihan akun pengguna. Untuk informasi selengkapnya, lihat Menggunakan fitur keamanan kumpulan pengguna Amazon Cognito.

    1. Untuk kebijakan Kata Sandi, konfirmasikan bahwa mode kebijakan Kata Sandi disetel ke default Cognito.

    2. Di bawah Autentikasi multi-faktor, untuk MFApenegakan hukum, pilih Opsional. MFA

    3. Untuk MFAmetode, pilih Aplikasi dan SMSpesan Authenticator.

    4. Untuk pemulihan akun Pengguna, konfirmasikan bahwa Aktifkan pemulihan akun swalayan dipilih, dan bahwa metode pengiriman pesan pemulihan akun pengguna disetel ke Email saja.

    5. Simpan semua opsi lain sebagai default dan pilih Berikutnya.

  6. Di Mengonfigurasi pengalaman pendaftaran, Anda dapat menentukan bagaimana pengguna baru akan memverifikasi identitas mereka saat mendaftar sebagai pengguna baru, dan atribut mana yang harus diperlukan atau opsional selama alur pendaftaran pengguna. Untuk informasi selengkapnya, lihat Mengelola pengguna di kumpulan pengguna Anda.

    1. Konfirmasikan bahwa Aktifkan pendaftaran mandiri dipilih. Pengaturan ini membuka kumpulan pengguna Anda untuk mendaftar dari siapa pun di internet. Ini dimaksudkan untuk keperluan aplikasi contoh, tetapi terapkan pengaturan ini dengan hati-hati di lingkungan produksi.

    2. Di bawah Verifikasi dan konfirmasi yang dibantu Cognito, verifikasi bahwa kotak centang Izinkan Cognito mengirim pesan secara otomatis untuk memverifikasi dan mengonfirmasi dipilih.

    3. Konfirmasikan bahwa Atribut yang akan diverifikasi diatur ke Kirim pesan email, verifikasi alamat email.

    4. Di bawah Memverifikasi perubahan atribut, konfirmasikan bahwa opsi default dipilih: Simpan nilai atribut asli saat pembaruan tertunda dipilih, dan Nilai atribut Aktif saat pembaruan tertunda disetel ke Alamat email.

    5. Di bawah atribut Diperlukan, konfirmasikan bahwa atribut Diperlukan berdasarkan pilihan sebelumnya menampilkan email.

      penting

      Untuk contoh aplikasi ini, kumpulan pengguna Anda tidak boleh menyetel phone_number sebagai atribut wajib. Jika phone_number ditampilkan sebagai atribut wajib, tinjau dan perbarui pilihan Anda sebelumnya:

      • Opsional MFA, Email hanya untuk metode Pengiriman untuk pesan pemulihan akun pengguna

      • Kirim pesan email, verifikasi alamat email untuk Atribut untuk memverifikasi

    6. Simpan semua opsi lain sebagai default dan pilih Berikutnya.

  7. Di Konfigurasi pengiriman pesan, Anda dapat mengonfigurasi integrasi dengan Amazon Simple Email Service dan Amazon Simple Notification Service untuk mengirim email dan SMS pesan ke pengguna Anda untuk pendaftaran, konfirmasi akunMFA, dan pemulihan akun. Untuk informasi selengkapnya, silakan lihat Pengaturan email untuk kumpulan pengguna Amazon Cognito dan SMSpengaturan pesan untuk kumpulan pengguna Amazon Cognito.

    1. Untuk penyedia Email, pilih Kirim email dengan Cognito, dan gunakan pengirim email default yang disediakan oleh Amazon Cognito. Pengaturan untuk volume email rendah ini cukup untuk pengujian aplikasi. Anda dapat kembali setelah memverifikasi alamat email dengan Amazon Simple Email Service (AmazonSES) dan memilih Kirim email dengan Amazon SES.

    2. Untuk SMS, pilih Buat IAM peran baru dan masukkan nama IAM peran. Ini menciptakan peran yang memberikan izin ke Amazon Cognito untuk mengirim pesan. SMS

    3. Simpan semua opsi lain sebagai default dan pilih Berikutnya.

  8. Di Integrasikan aplikasi, Anda dapat memberi nama kumpulan pengguna, mengonfigurasi UI yang dihosting, dan membuat klien aplikasi. Untuk informasi selengkapnya, lihat Tambahkan klien aplikasi dengan UI yang dihosting. Contoh aplikasi tidak menggunakan UI yang dihosting.

    1. Di bawah Nama kumpulan pengguna, masukkan nama kumpulan Pengguna.

    2. Jangan pilih Gunakan UI yang dihosting Cognito.

    3. Di bawah Klien aplikasi awal, konfirmasikan bahwa jenis Aplikasi disetel ke Klien publik.

    4. Di bawah rahasia Klien, konfirmasikan bahwa Jangan buat rahasia klien dipilih.

    5. Masukkan nama klien App.

    6. Perluas pengaturan klien aplikasi lanjutan. Tambahkan ALLOW_USER_PASSWORD_AUTH ke daftar alur Otentikasi.

    7. Simpan semua opsi lain sebagai default dan pilih Berikutnya.

  9. Tinjau pilihan Anda di Tinjau dan buat layar dan ubah pilihan apa pun sesuai kebutuhan. Jika Anda puas dengan konfigurasi kumpulan pengguna, pilih Buat kumpulan pengguna untuk melanjutkan.

  10. Dari halaman kumpulan Pengguna, pilih kumpulan pengguna baru Anda.

  11. Di bawah ikhtisar kumpulan pengguna, catat ID kumpulan Pengguna Anda. Anda akan memberikan string ini ketika Anda membuat aplikasi contoh Anda.

  12. Pilih tab Integrasi aplikasi dan temukan bagian Klien aplikasi dan analitik. Pilih klien aplikasi baru Anda. Catat ID Klien Anda.

Membuat aplikasi

Untuk membangun aplikasi ini, Anda harus mengatur lingkungan pengembang. Persyaratan lingkungan pengembang adalah:

  1. Node.js diinstal dan diperbarui.

  2. Manajer paket node (npm) diinstal dan diperbarui ke setidaknya versi 10.2.3.

  3. Lingkungan dapat diakses di TCP port 5173 di browser web.

Untuk membuat contoh aplikasi web React

  1. Masuk ke lingkungan pengembang Anda dan arahkan ke direktori induk untuk aplikasi Anda.

    cd ~/path/to/project/folder/

  2. Buat layanan React baru.

    npm create vite@latest frontend-client -- --template react-ts

  3. Kloning folder cognito-developer-guide-react-example proyek dari repositori contoh AWS kode pada. GitHub

    cd ~/some/other/path
    git clone https://github.com/awsdocs/aws-doc-sdk-examples.git
    cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client ~/path/to/project/folder/frontend-client

  4. Arahkan ke src direktori di proyek Anda.

    cd ~/path/to/project/folder/frontend-client/src

  5. Edit config.json dan ganti nilai-nilai berikut:

    1. Ganti YOUR_AWS_REGION dengan Wilayah AWS kode. Sebagai contoh: us-east-1.

    2. Ganti YOUR_COGNITO_USER_POOL_ID dengan ID kumpulan pengguna yang telah Anda tunjuk untuk pengujian. Sebagai contoh: us-east-1_EXAMPLE. Kumpulan pengguna harus berada di tempat Wilayah AWS yang Anda masukkan pada langkah sebelumnya.

    3. Ganti YOUR_COGNITO_APP_CLIENT_ID dengan ID klien aplikasi yang telah Anda tentukan untuk pengujian. Sebagai contoh: 1example23456789. Klien aplikasi harus berada di kumpulan pengguna dari langkah sebelumnya.

  6. Jika Anda ingin mengakses aplikasi contoh Anda dari IP selainlocalhost, edit package.json dan ubah baris "dev": "vite", ke"dev": "vite --host 0.0.0.0",.

  7. Instal aplikasi Anda.

    npm install

  8. Luncurkan aplikasi.

    npm run dev

  9. Akses aplikasi di browser web di http://localhost:5173 atauhttp://[IP address]:5173.

  10. Daftarkan pengguna baru dengan alamat email yang valid.

  11. Ambil kode konfirmasi dari pesan email Anda. Masukkan kode konfirmasi ke dalam aplikasi.

  12. Masuk dengan nama pengguna dan kata sandi Anda.

Membuat lingkungan pengembang React dengan Amazon Lightsail

Cara cepat untuk memulai aplikasi ini adalah dengan membuat server cloud virtual dengan Amazon Lightsail.

Dengan Lightsail, Anda dapat dengan cepat membuat instance server kecil yang telah dikonfigurasi sebelumnya dengan prasyarat untuk aplikasi contoh ini. Anda dapat SSH ke instans Anda dengan klien berbasis browser, dan terhubung ke server web di alamat IP publik atau pribadi.

Untuk membuat instance Lightsail untuk aplikasi contoh ini

  1. Pergi ke konsol Lightsail. Jika diminta, masukkan AWS kredensialnya.

  2. Pilih Buat instans.

  3. Untuk Pilih platform, pilih Linux/Unix.

  4. Untuk Pilih cetak biru, pilih Node.js.

  5. Di bawah Identifikasi instans Anda, beri nama yang ramah pada lingkungan pengembangan Anda.

  6. Pilih Buat instans.

  7. Setelah Lightsail membuat instance Anda, pilih dan dari tab Connect, pilih Connect using. SSH

  8. SSHSesi terbuka di jendela browser. Jalankan node -v dan npm -v untuk mengonfirmasi bahwa instance Anda telah disediakan dengan Node.js dan versi npm minimum 10.2.3.

  9. Lanjutkan untuk mengkonfigurasi aplikasi React Anda.