Implementasi

• Buat kolam pengguna Amazon Cognito dan integrasikan aplikasi dengan kolam pengguna Anda

  Amazon Cognito menyediakan dua mekanisme berbeda untuk mengautentikasi pengguna. Anda dapat menggunakan Kumpulan Pengguna Cognito untuk menambahkan fungsi daftar dan masuk ke aplikasi Anda atau menggunakan Kumpulan Identitas Cognito untuk mengautentikasi pengguna melalui penyedia identitas sosial seperti Facebook, Twitter, atau Amazon, dengan solusi identitas SAML, atau dengan menggunakan sistem identitas milik Anda sendiri. Untuk modul ini, Anda akan menggunakan kolam pengguna sebagai backend untuk halaman pendaftaran dan halaman masuk yang disediakan.
  

  1. Di konsol Amazon Cognito, pilih Buat kolam pengguna.
  2. Pada halaman Konfigurasi pengalaman masuk, di bagian Opsi masuk kolam pengguna Cognito, pilih Nama pengguna. Pertahankan default untuk pengaturan lain, seperti Tipe penyedia dan jangan membuat pilihan Persyaratan nama pengguna apa pun. Pilih Berikutnya.
  3. Pada halaman Konfigurasikan persyaratan keamanan, pertahankan Mode kebijakan kata sandi sebagai default Cognito. Anda dapat memilih untuk mengonfigurasi autentikasi multi-faktor (MFA) atau memilih Tanpa MFA dan mempertahankan konfigurasi lain sebagai default. Pilih Berikutnya.
  4. Pada halaman Konfigurasikan pengalaman pendaftaran, pertahankan semuanya sebagai default. Pilih Berikutnya.
  5. Pada halaman Konfigurasikan pengiriman pesan, untuk Penyedia email, pastikan bahwa Kirim email dengan Amazon SES - Direkomendasikan dipilih. Di kolom Alamat email DARI, pilih alamat email yang telah Anda verifikasi dengan Amazon SES, ikuti petunjuk dalam Memverifikasi identitas alamat email di Panduan Developer Amazon Simple Email Service.
     Catatan: Jika Anda tidak melihat alamat email terverifikasi terisi di menu tarik-turun, pastikan bahwa Anda telah membuat alamat email terverifikasi di Wilayah yang sama yang Anda pilih di awal tutorial.
  6. Pada halaman Integrasikan aplikasi Anda, beri nama kolam pengguna Anda: WildRydes. Pada Klien aplikasi awal, beri nama klien aplikasi: WildRydesWebApp dan pertahankan pengaturan lainnya sebagai default.
  7. Pada halaman Tinjau dan buat, pilih Buat kolam pengguna.
  8. Pada halaman Kolam pengguna, pilih Nama kolam pengguna untuk melihat informasi terperinci tentang kolam pengguna yang Anda buat. Salin ID Kolam Pengguna di bagian Gambaran umum kolam pengguna dan simpan di lokasi aman di mesin lokal Anda. 
  9. Pilih tab Integrasi Aplikasi dan salin serta simpan ID Klien di bagian Klien aplikasi dan analitik dari kolam pengguna yang baru dibuat.
• Memperbarui file konfigurasi situs web

  File js/config.js berisi pengaturan untuk ID kolam pengguna, ID klien aplikasi, dan Wilayah. Perbarui file ini dengan pengaturan dari kolam pengguna dan aplikasi yang Anda buat pada langkah sebelumnya lalu unggah file kembali ke bucket Anda.

  1. Dari mesin lokal Anda, buka file wildryde-site/js/config.js di editor teks pilihan Anda.
  2. Perbarui bagian cognito file dengan nilai yang benar untuk ID kolam pengguna dan ID Klien Aplikasi yang Anda simpan di Langkah 8 dan 9 di bagian sebelumnya. userPoolID adalahID kolam pengguna dari bagian Gambaran umum kolam pengguna, dan userPoolClientID adalah ID Klien Aplikasi dari bagian Integrasi Aplikasi > Klien aplikasi dan analitik Amazon Cognito. 
  3. Nilai untuk wilayah haruslah kode Wilayah AWS tempat Anda membuat kolam pengguna Anda. Misalnya, us-east-1 untuk Wilayah Virginia Utara, atau us-west-2 untuk Wilayah Oregon. Jika tidak yakin kode mana yang digunakan, Anda bisa melihat nilai ARN Kolam pada Gambaran umum kolam pengguna. Kode Wilayah adalah bagian dari ARN tepat setelah arn:aws:cognito-idp:.

  File config.js yang diperbarui akan terlihat seperti kode berikut ini. Perhatikan bahwa nilai aktual untuk file Anda akan berbeda:
  

  window._config = {
      cognito: {
          userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb
          userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
          region: 'us-west-2' // e.g. us-east-2
      },
      api: {
          invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
      }
  };

  Code snippet copied

  Copy

      4. Simpan file yang dimodifikasi.

      5. Di jendela terminal Anda, tambahkan, commit, dan dorong file ke repositori Git Anda agar secara otomatis di-deploy ke Konsol Amplify.

  Blok kode berikut adalah contoh dari apa yang akan Anda lihat di jendela terminal Anda:

  $ git add .
  $ git commit -m "new_config"
  $ git push
  

  Code snippet copied

  Copy
• Memvalidasi implementasi Anda
  1. Di jendela Finder atau Windows File Explorer, arahkan ke folder wildrydes-site yang Anda salin ke mesin lokal Anda di Modul 1. 
  2. Buka /register.html, atau pilih tombol Giddy Up! di beranda (halaman index.html) situs Anda.
  3. Lengkapi formulir pendaftaran dan pilih Let's Ryde. Anda dapat menggunakan email Anda sendiri atau memasukkan email palsu. Pastikan untuk memilih kata sandi yang berisi setidaknya satu huruf besar, angka, dan karakter khusus. Jangan lupa kata sandi yang Anda masukkan nanti. Anda akan melihat peringatan yang mengonfirmasi bahwa pengguna Anda telah dibuat.
  4. Konfirmasikan pengguna baru Anda menggunakan salah satu dari dua metode berikut:
     1. Jika Anda menggunakan alamat email yang Anda kontrol, Anda dapat menyelesaikan proses verifikasi akun dengan mengunjungi /verify.html di bawah domain situs web Anda dan memasukkan kode verifikasi yang diemailkan kepada Anda. Harap perhatikan, email verifikasi mungkin berakhir di folder spam Anda. Untuk deployment nyata, sebaiknya Anda mengonfigurasi kolam pengguna untuk menggunakan Amazon Simple Email Service untuk mengirim email dari domain Anda.
     2. Jika menggunakan alamat email dummy, Anda harus mengonfirmasi pengguna secara manual melalui konsol Cognito.
        1. Di konsol Amazon Cognito, pilih kolam pengguna WildRydes.
        2. Di tab Pengguna, Anda akan melihat pengguna yang sesuai dengan alamat email yang Anda kirimkan melalui halaman pendaftaran. Pilih nama pengguna tersebut untuk melihat halaman detail pengguna.
        3. Di menu tarik-turun Tindakan, pilih Konfirmasi akun untuk menyelesaikan proses pembuatan akun.
        4. Di menu sembulan Konfirmasi akun untuk pengguna, pilih Konfirmasi.
  5. Setelah mengonfirmasi pengguna baru menggunakan halaman /verify.html atau konsol Cognito, kunjungi /signin.html dan masuk menggunakan alamat email serta kata sandi yang Anda masukkan selama langkah pendaftaran.
  6. Jika berhasil, Anda akan diarahkan ke /ride.html. Anda akan melihat notifikasi bahwa API tidak dikonfigurasikan.
     Penting: Salin dan simpan token autentikasi untuk membuat otorisator kolam pengguna Amazon Cognito di modul berikutnya.