Proyek di AWS:

Membangun Aplikasi Web Tanpa Server

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

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Pengantar

Progression-Bar-07

Meng-hosting situs web statis

Progression-Bar-14

Mengelola pengguna

Progression-Bar-09

Membangun backend tanpa server

Progression-Bar-10

Menerapkan API RESTful

Progression-Bar-11

Mengakhiri sumber daya

Modul 2. Pengelolaan Pengguna

Dalam modul ini Anda akan membuat kumpulan 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.

Ikhtisar Arsitektur

Serverless_Web_App_LP_assets-03

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 dan kode verifikasi yang mereka terima. Anda juga dapat mengonfirmasi akun pengguna menggunakan konsol Amazon Cognito jika ingin menggunakan 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 untuk Menyelesaikan Modul: 30 Menit

Layanan yang Digunakan: Amazon Cognito

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 >
Serverless_Web_App_LP_assets-17

Instruksi Peluncuran CloudFormation

  1. Pilih tautan Luncurkan Stack di atas untuk wilayah yang Anda pilih.

  2. Pilih Berikutnya di halaman Pilih Template.

  3. Berikan nama bucket situs web Anda dari modul 1 untuk Nama Bucket Situs Web (mis. wildrydes-namaAnda) dan pilih Berikutnya.

    Catatan: Anda harus menentukan nama bucket yang sama yang Anda gunakan dalam modul sebelumnya. Jika Anda memberikan nama bucket yang tidak ada atau Anda tidak memiliki akses tulis, CloudFormation tumpukan akan gagal selama pembuatan.

  4. Pada halaman Opsi, biarkan semua kolom default dan pilih Berikutnya.

  5. Pada halaman Peninjauan, periksa kotak untuk mengakui bahwa CloudFormation akan membuat sumber daya IAM dan pilih Buat.

    Templat ini menggunakan sumber daya khusus untuk membuat kelompok pengguna dan klien Amazon Cognito serta menghasilkan file konfigurasi dengan detail yang diperlukan untuk terhubung ke kelompok pengguna ini dan mengunggahnya ke bucket situs web Anda. Templat akan membuat peran yang menyediakan akses untuk membuat sumber daya ini dan mengunggah file konfigurasi ke ember Anda.

  6. Tunggu hingga tumpukan wildrydes-aplikasiweb-2 mencapai status CREATE_COMPLETE.

  7. Ikuti langkah-langkah yang diuraikan dalam Langkah 4. Uji Implementasi Anda, untuk mengonfirmasi bahwa Anda siap untuk pindah ke modul berikutnya.

Petunjuk Implementasi

Ikuti instruksi langkah demi langkah di bawah ini untuk membuat kumpulan pengguna. Klik tiap nomor langkah untuk memperluas bagian.

  • Langkah 1. Buat Kumpulan Pengguna Amazon Cognito

    Buat Kumpulan Pengguna Amazon Cognito

    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 kumpulan pengguna sebagai ujung belakang untuk halaman pendaftaran dan halaman masuk yang disediakan.

    1. Dari Konsol AWS klik Layanan lalu pilih Cognito di bawah Layanan Seluler.
    2. Pilih Kelola Kelompok Pengguna Anda.
    3. Pilih Buat Kelompok Pengguna
    4. Berikan nama untuk kumpulan pengguna Anda seperti WildRydes, lalu pilih Tinjau Default
    5. Pada halaman peninjauan, klik Buat kumpulan.
    6. Perhatikan id Kumpulanpada halaman detail Kumpulan dari kumpulan pengguna yang baru Anda buat.

  • Langkah 2. Tambahkan Aplikasi ke Kelompok Pengguna Anda

    Tambahkan Aplikasi ke Kelompok Pengguna Anda

    Dari konsol Amazon Cognito pilih kelompok pengguna Anda dan kemudian pilih bagian klien Aplikasi. Tambahkan klien aplikasi baru dan pastikan Hasilkan opsi rahasia klien tidak dipilih. Rahasia klien saat ini tidak didukung dengan JavaScript SDK. Jika Anda memang membuat aplikasi dengan rahasia yang dibuat, hapus dan buat yang baru dengan konfigurasi yang benar.

    1. Dari halaman Detail Kumpulan untuk kumpulan pengguna Anda, pilih Klien Aplikasi dari sebelah kiri bagian Pengaturan Umum di bilah navigasi.
    2. Pilih Tambah klien aplikasi.
    3. Beri nama klien aplikasi seperti WildRydesWebApp.
    4. Hapus centang opsi Hasilkan rahasia klien. Rahasia klien saat ini tidak didukung untuk digunakan dengan aplikasi berbasis browser.
    5. Pilih Buat klien aplikasi.
    6. Perhatikan id klien aplikasi untuk aplikasi yang baru dibuat.

  • Langkah 3. Perbarui Konfig Situs Web

    Perbarui Konfig Situs Web

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

    a. Dari mesin lokal Anda, buka `wild-ryde-site/js/config.js` di editor teks pilihan Anda.

    b. Perbarui bagian cognito dengan nilai yang benar untuk kumpulan pengguna dan aplikasi yang baru saja Anda buat.

    Anda dapat menemukan nilai untuk userPoolId di halaman detail Kumpulan di konsol Amazon Cognito setelah Anda memilih kumpulan pengguna yang Anda buat.
    Anda dapat menemukan nilai untuk userPoolClientId dengan memilih klien Aplikasi dari bilah navigasi kiri. Gunakan nilai dari bidang id klien Aplikasi untuk aplikasi yang Anda buat di bagian sebelumnya.

    Nilai untuk wilayah harus kode Wilayah AWS tempat Anda membuat kumpulan pengguna Anda. Misalnya us-east-1 untuk Wilayah N. Virginia, atau us-west-2 untuk Wilayah Oregon. Jika Anda tidak yakin kode mana yang digunakan, Anda bisa melihat nilai Kumpulan ARN pada halaman Detail Kumpulan. Kode Wilayah adalah bagian dari ARN segera setelah arn:aws:cognito-idp:.

    File config.js yang diperbarui akan terlihat seperti 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',
    }
};

    d. Simpan file yang telah dimodifikasi dan dorong ke repositori git guna menerapkannya secara otomatis ke Konsol Amplify.

    $ git push

  • Langkah 4. Uji implementasi Anda

    Validasi implementasi Anda

    1. Kunjungi /register.html di bawah domain situs web Anda, atau pilih tombol Giddy Up! di beranda situs Anda.
    2. 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.
    3. Konfirmasikan pengguna baru Anda menggunakan salah satu dari dua metode berikut.
    4. 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 penerapan nyata, kami sarankan untuk mengonfigurasi kumpulan pengguna Anda untuk menggunakan Amazon Simple Email Service  untuk mengirim email dari domain Anda.
    5. Jika menggunakan alamat email dummy, Anda harus mengonfirmasi pengguna secara manual melalui konsol Cognito.
    6. Dari konsol AWS, klik Layanan lalu pilih Cognito di bawah Keamanan, Identitas & Kepatuhan.
    7. Pilih Kelola Kumpulan Pengguna Anda
    8. Pilih kumpulan pengguna WildRydes dan klik Pengguna dan grup di bilah navigasi kiri.
    9. Anda harus melihat pengguna yang sesuai dengan alamat email yang Anda kirimkan melalui halaman pendaftaran. Pilih nama pengguna tersebut untuk melihat halaman detail pengguna.
    10. Pilih Konfirmasikan pengguna untuk menyelesaikan proses pembuatan akun.
    11. Setelah mengonfirmasi pengguna baru menggunakan halaman /verify.html atau konsol Cognito, kunjungi /signin.html dan masuk menggunakan alamat email dan kata sandi yang Anda masukkan selama langkah pendaftaran.
    12. Jika berhasil, Anda akan diarahkan ke /ride.html. Anda akan melihat pemberitahuan bahwa API tidak dikonfigurasikan.
    successful-login
Berikutnya: Membangun backend tanpa server