Memulai dengan AWS

Membangun Aplikasi Web Nirserver

dengan AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB, dan Amazon Cognito

Modul 2: Mengelola Pengguna

Anda akan membuat kolam pengguna Amazon Cognito untuk mengelola akun pengguna Anda

Gambaran Umum

Dalam modul ini, Anda akan membuat kolam pengguna Amazon Cognito untuk mengelola akun pengguna Anda. Anda akan menerapkan halaman yang memungkinkan pelanggan untuk mendaftar sebagai pengguna baru, memverifikasi alamat email mereka, dan masuk ke situs.

Gambaran umum arsitektur

Gambaran Umum Arsitektur

Ketika pengguna mengunjungi situs web Anda, mereka akan mendaftarkan akun pengguna baru terlebih dahulu. Untuk keperluan lokakarya ini, kami hanya akan meminta pengguna untuk memberikan alamat email dan kata sandi untuk mendaftar. Tapi Anda dapat mengonfigurasi Amazon Cognito untuk mengharuskan atribut tambahan di aplikasi Anda sendiri.

Setelah pengguna mengirimkan registrasi mereka, Amazon Cognito akan mengirim email konfirmasi dengan kode verifikasi ke alamat yang mereka berikan. Untuk mengonfirmasi akun mereka, pengguna akan kembali ke situs Anda dan memasukkan alamat email mereka serta kode verifikasi yang mereka terima. Anda juga dapat mengonfirmasi akun pengguna menggunakan konsol Amazon Cognito dengan alamat email palsu untuk pengujian.

Setelah pengguna memiliki akun yang dikonfirmasi (baik menggunakan proses verifikasi email atau konfirmasi manual melalui konsol), mereka dapat masuk. Saat pengguna masuk, mereka memasukkan nama pengguna (atau email) dan kata sandi mereka. Fungsi JavaScript kemudian berkomunikasi dengan Amazon Cognito, mengautentikasi menggunakan protokol Kata Sandi Aman Jarak Jauh (SRP), dan menerima kembali satu set Token Web JSON (JWT). JWT berisi klaim tentang identitas pengguna dan akan digunakan dalam modul berikutnya untuk mengautentikasi RESTful API yang Anda bangun dengan Amazon API Gateway.

 Waktu penyelesaian

30 menit

 Layanan yang digunakan

 Templat CloudFormation

Jika Anda ingin beralih ke modul berikutnya, Anda dapat meluncurkan salah satu templat AWS CloudFormation ini di Wilayah yang sama yang Anda gunakan dalam Modul 1.

Wilayah Templat CloudFormation
AS Timur (Virginia U.) Luncurkan tumpukan >
AS Timur (Ohio) Luncurkan tumpukan >
AS Barat (Oregon) Luncurkan tumpukan >
UE (Frankfurt) Luncurkan tumpukan >
UE (Irlandia) Luncurkan tumpukan >
UE (London) Luncurkan tumpukan >
Asia Pasifik (Tokyo) Luncurkan tumpukan >
Asia Pasifik (Seoul) Luncurkan tumpukan >
Asia Pasifik (Sydney) Luncurkan tumpukan >
Asia Pasifik (Mumbai) Luncurkan tumpukan >

Implementasi

  • 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.
  • 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',
        }
    };

        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
    
    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.
    Berhasil Diautentikasi!

Apakah halaman ini membantu?

Membangun Backend Nirserver