Proyek di AWS

Buat Aplikasi Web Modern

Menerapkan aplikasi web, menghubungkan ke database, dan menganalisis perilaku pengguna.

Modul 4: Menyiapkan Registrasi Pengguna

Dalam modul ini Anda akan menyiapkan pendaftaran pengguna di situs web sehingga Anda dapat menangkap informasi spesifik pengguna.

Ikhtisar

Untuk menambahkan beberapa aspek yang lebih penting ke situs web Mythical Mysfits, seperti memungkinkan pengguna untuk memilih mysfit favorit mereka dan mengadopsi mysfit saya, pertama-tama kita harus memiliki pengguna mendaftar di situs web. Untuk mengaktifkan pendaftaran dan autentikasi pengguna situs web, kami akan membuat Kumpulan Pengguna di AWS Cognito - layanan manajemen identitas pengguna yang dikelola sepenuhnya.

Kemudian, untuk memastikan bahwa hanya pengguna terdaftar yang diizinkan untuk menyukai atau mengadopsi mysfits di situs web, kami akan menggunakan REST API dengan Amazon API Gateway untuk ada di depan NLB Amazon API Gateway juga merupakan layanan terkelola, dan menyediakan kemampuan REST API yang biasanya diperlukan di luar kotak seperti penghentian SSL, otorisasi permintaan, pembatasan, tahapan dan versi API, serta banyak lagi.

Anda akan lagi menggunakan AWS CLI untuk menerapkan sumber daya yang dibutuhkan ke AWS.

Diagram Arsitektur

menyiapkan diagram arsitektur registrasi pengguna

Petunjuk Implementasi

  • A: Membuat Kumpulan Pengguna Cognito

    Untuk membuat Kelompok Pengguna Cognito tempat semua pengunjung Mythical Mysfits akan disimpan, jalankan perintah CLI berikut untuk membuat kelompok pengguna bernama MysfitsUserPool dan tunjukkan bahwa semua pengguna yang terdaftar dengan kelompok ini harus secara otomatis memiliki alamat email mereka diverifikasi melalui email konfirmasi sebelum mereka menjadi pengguna yang dikonfirmasi.

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    Salin respons dari perintah di atas, yang menyertakan ID unik untuk kumpulan pengguna Anda yang perlu Anda gunakan di langkah selanjutnya. Mis: Id: us-east-1_ab12345YZ)

    B: Membuat Klien Kumpulan Pengotorisasi Cognito

    Selanjutnya, untuk mengintegrasikan situs web frontend kami dengan Cognito, kami harus membuat Klien Pool Pengguna baru untuk kumpulan pengguna ini. Ini menghasilkan pengidentifikasi klien unik yang akan memungkinkan situs web kami diotorisasi untuk memanggil API yang tidak diautentikasi dalam cognito di mana pengguna situs web dapat masuk dan mendaftar terhadap kelompok pengguna Mythical Mysfits. Untuk membuat klien baru menggunakan AWS CLI untuk kumpulan pengguna di atas, jalankan perintah berikut (mengganti nilai --user-pool-id dengan yang Anda salin di atas):

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • Selanjutnya, mari kita mengalihkan perhatian kita untuk membuat API RESTful baru di depan layanan Flask yang ada, sehingga kita dapat melakukan otorisasi permintaan sebelum NLB kami menerima permintaan apa pun. Kita akan melakukan ini dengan Amazon API Gateway, seperti dijelaskan dalam ikhtisar modul.

    Agar API Gateway terintegrasi secara pribadi dengan NLB kami, kami akan mengonfigurasi Tautan API Gateway VPC yang memungkinkan API Gateway API untuk berintegrasi langsung dengan layanan web backend yang di-hosting secara pribadi di dalam VPC. Catatan: Untuk keperluan lokakarya ini, kami membuat NLB agar dapat menghadap ke internet sehingga dapat dipanggil langsung dalam modul sebelumnya. Karena itu, meskipun kami akan memerlukan token Otorisasi di API kami setelah modul ini, NLB kami akan tetap benar-benar terbuka untuk umum di belakang API Gateway API.

    Dalam skenario dunia nyata, Anda harus membuat NLB menjadi internal dari awal (atau membuat penyeimbang muatan internal baru untuk menggantikan yang sudah ada), mengetahui bahwa API Gateway akan menjadi strategi Anda untuk otorisasi API yang menghadap Internet. Tetapi demi pertimbangan waktu, kita akan menggunakan NLB yang telah kami buat yang akan tetap dapat diakses publik.

    Buat VPC Link untuk REST API kami yang akan datang menggunakan perintah CLI berikut (Anda harus mengganti nilai yang ditunjukkan dengan Penyeimbang Muatan ARN yang Anda simpan ketika NLB dibuat dalam modul 2):

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    Perintah di atas akan membuat file bernama api-gateway-link-output.json yang berisi id untuk Tautan VPC yang sedang dibuat. Ini juga akan menampilkan status sebagai TERTUNDA, mirip dengan di bawah ini.

    Diperlukan waktu sekitar 5-10 menit untuk selesai dibuat, Anda dapat menyalin id dari file ini dan melanjutkan ke langkah berikutnya.

    {
        "status": "PENDING",
        "targetArns": [
            "YOUR_ARN_HERE"
        ],
        "id": "abcdef1",
        "name": "MysfitsApiVpcLink"
    }

    Dengan tautan VPC yang dibuat, kita dapat beralih untuk membuat API REST yang sebenarnya menggunakan Amazon API Gateway.

    B: Membuat REST API Menggunakan Swagger

    API MythicalMysfits REST Anda didefinisikan menggunakan **Swagger**, kerangka kerja open-source populer untuk menguraikan API melalui JSON. Definisi Swagger API ini terletak di `~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json`. Buka file ini dan Anda akan melihat REST API dan semua sumber daya, metode, dan konfigurasinya di dalam.

    Ada beberapa tempat dalam file JSON ini yang perlu diperbarui untuk menyertakan parameter khusus untuk Cognito User Pool Anda, serta Network Load Balancer Anda.

    Objek `securityDefinitions` dalam definisi API menunjukkan bahwa kami telah menyiapkan mekanisme otorisasi apiKey menggunakan judul Otorisasi. Anda akan melihat bahwa AWS telah menyediakan ekstensi khusus untuk Swagger menggunakan awalan `x-amazon-api-gateway-`, ekstensi ini adalah tempat fungsionalitas khusus API Gateway dapat ditambahkan ke file kesombongan khusus untuk memanfaatkan kapabilitas khusus API Gateway.

    CTRL-F melalui file untuk mencari berbagai tempat `REPLACE_ME` berada dan menunggu parameter spesifik Anda. Setelah pengeditan dilakukan, simpan file dan jalankan perintah AWS CLI berikut:  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    Salin respons yang dikembalikan perintah ini dan simpan nilai `id` untuk langkah selanjutnya:

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    C: Menerapkan API

    Sekarang, API telah dibuat, tetapi belum digunakan di mana pun. Untuk menggunakan API kami, pertama-tama kami harus membuat penerapan dan menunjukkan **tahap** mana yang akan diterapkan. Tahap adalah referensi bernama untuk penyebaran, yang merupakan snapshot dari API.

    Anda menggunakan Tahap untuk mengelola dan mengoptimalkan penerapan tertentu. Misalnya, Anda dapat mengatur pengaturan tahap untuk mengaktifkan caching, menyesuaikan pembatasan permintaan, mengonfigurasi logging, menentukan variabel tahap atau melampirkan rilis canary untuk pengujian. Kita akan menyebut tahap ini `prod`. Untuk membuat penerapan untuk tahap prod, jalankan perintah CLI berikut:

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    Dengan itu, REST API kita yang memiliki kemampuan Otorisasi pengguna digunakan dan tersedia di Internet... tapi di mana?! API Anda tersedia di lokasi berikut:

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    Salin di atas, ganti nilai yang sesuai, dan tambahkan `/mysfits` ke akhir URI. Dimasukkan ke dalam bilah alamat browser, Anda harus sekali lagi melihat respons JSON Mysfits Anda. Namun, kami telah menambahkan beberapa kemampuan seperti mengadopsi dan menyukai mysfits yang belum diimplementasikan oleh ujung belakang layanan Flask kami.

    Mari kita lanjut ke yang berikutnya.

    Sementara pembaruan layanan tersebut secara otomatis didorong melalui pipa CI/CD Anda, lanjutkan ke langkah berikutnya.

  • A: Memperbarui Ujung Belakang Layanan Flask

    Untuk mengakomodasi fungsionalitas baru untuk melihat Profil Mysfit, seperti, dan mengadopsinya, kami telah memasukkan kode Python yang diperbarui untuk layanan web Flask ujung belakang Anda.

    Timpa basis kode yang ada dengan file-file ini dan dorong ke dalam repositori:

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    Sementara pembaruan layanan tersebut secara otomatis didorong melalui pipa CI/CD Anda, lanjutkan ke langkah berikutnya.

    B: Memperbarui Situs Web Mythical Mysfits di S3

    Buka file Mythical Mysfits index.html versi baru yang akan kita dorong ke Amazon S3 sebentar lagi, terletak di: ~/environment/aws-modern-application-workshop/module-4/app/web/index.html Dalam hal ini file index.html baru, Anda akan melihat kode HTML dan JavaScript tambahan yang sedang digunakan untuk menambah pengalaman pendaftaran dan login pengguna.

    Kode ini berinteraksi dengan AWS Cognito JavaScript SDK untuk membantu mengelola pendaftaran, autentikasi, dan otorisasi untuk semua panggilan API yang memerlukannya.

    Dalam file ini, ganti string REPLACE_ME di dalam tanda kutip tunggal dengan Nilai Output yang Anda salin dari atas dan simpan file:

    before-replace2

    Juga, untuk proses pendaftaran pengguna, Anda memiliki dua file HTML tambahan untuk memasukkan nilai-nilai ini ke dalam. register.html dan confirm.html. Masukkan nilai yang disalin ke dalam string REPLACE_ME dalam file-file ini juga. register.html dan confirm.html.

    Sekarang, salin file HTML ini, serta Cognito JavaScript SDK ke bucket S3 yang meng-hosting konten situs web Mythical Mysfits kita sehingga fitur-fitur baru akan dipublikasikan secara online.

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    Refresh situs web Mythical Mysfits di browser Anda untuk melihat fungsionalitas baru beraksi!

    Ini menyimpulkan Modul 4.

Terakhir, menangkap perilaku pengguna