Mengonfigurasi autentikasi di sampel aplikasi web Python menggunakan Azure AD B2C

  • Artikel

Artikel ini menggunakan sampel aplikasi web Python untuk mengilustrasikan cara menambahkan autentikasi Azure Active Directory B2C (Azure AD B2C) ke aplikasi web Anda.

Gambaran Umum

OpenID Connect (OIDC) adalah protokol autentikasi yang dibuat di OAuth 2.0. Anda dapat menggunakan OIDC untuk memasukkan pengguna ke aplikasi dengan aman. Sampel aplikasi web ini menggunakan paket identitas untuk Python untuk menyederhanakan penambahan dukungan autentikasi dan otorisasi ke aplikasi web Python.

Alur rincian masuk melibatkan langkah berikut:

  1. Pengguna membuka aplikasi web dan memilih Masuk.
  2. Aplikasi memulai permintaan autentikasi dan mengarahkan pengguna ke Azure AD B2C.
  3. Pengguna mendaftar atau masuk, atur ulang kata sandi, atau masuk dengan akun sosial.
  4. Setelah pengguna berhasil masuk, Azure AD B2C mengembalikan token ID ke aplikasi.
  5. Aplikasi ini menukarkan kode otorisasi dengan token ID, memvalidasi token ID, membaca klaim, kemudian menampilkan halaman yang aman kepada pengguna.

Prasyarat

Langkah 1: Mengonfigurasi alur pengguna

Saat pengguna mencoba masuk ke aplikasi Anda, aplikasi memulai permintaan autentikasi ke titik akhir otorisasi melalui alur pengguna. Alur pengguna mendefinisikan dan mengontrol pengalaman pengguna. Setelah pengguna menyelesaikan alur pengguna, Azure Active Directory B2C membuat token dan kemudian mengarahkan pengguna kembali ke aplikasi Anda.

Jika Anda belum melakukannya, buat alur pengguna atau kebijakan kustom. Ulangi langkah-langkah tersebut untuk membuat tiga alur pengguna terpisah sebagai berikut:

  • Gabungan alur pengguna daftar dan masuk, seperti susi. Alur pengguna ini juga mendukung pengalaman Lupa kata sandi Anda.
  • Alur pengguna Pengeditan profil, seperti edit_profile.
  • Alur pengguna Pengaturan ulang kata sandi, seperti reset_password.

Azure AD B2C menambahkan B2C_1_ ke nama alur pengguna. Misalnya, susi menjadi B2C_1_susi.

Langkah 2: Mendaftarkan aplikasi web

Untuk mengaktifkan aplikasi Anda untuk masuk dengan Azure AD B2C, daftarkan aplikasi Anda di direktori Azure AD B2C. Mendaftarkan aplikasi Anda membangun hubungan kepercayaan antara aplikasi dan Azure AD B2C.

Selama pendaftaran aplikasi, Anda akan menentukan URI Pengalihan. URI pengalihan adalah titik akhir tempat pengguna diarahkan oleh Azure AD B2C setelah mereka mengautentikasi dengan Azure AD B2C. Proses pendaftaran aplikasi menghasilkan ID Aplikasi, dikenal juga sebagai ID klien, yang secara unik mengidentifikasi aplikasi Anda. Setelah aplikasi Anda terdaftar, Azure AD B2C menggunakan ID aplikasi dan URI pengalihan untuk membuat permintaan autentikasi.

Langkah 2.1: Daftarkan aplikasi

Untuk membuat pendaftaran aplikasi web, ikuti langkah-langkah berikut:

  1. Masuk ke portal Azure.

  2. Jika Anda memiliki akses ke beberapa penyewa, pilih ikon Pengaturan di menu atas untuk beralih ke penyewa Azure AD B2C Anda dari menu Direktori + langganan.

  3. Di portal Microsoft Azure, cari dan pilih AAD B2C.

  4. Pilih Pendaftaran aplikasi, lalu pilih Pendaftaran baru.

  5. Di bawah Nama, masukkan nama untuk aplikasi (misalnya, webapp1).

  6. Di bagian Tipe akun yang didukung, pilih Akun di penyedia identitas atau direktori organisasi apa pun (untuk mengautentikasi pengguna dengan alur pengguna).

  7. Di bawah URI Pengalihan, pilih Web lalu, di kotak URL, masukkan http://localhost:5000/getAToken.

  8. Di bagian Izin, pilih kotak centang Berikan persetujuan admin untuk openid dan izin akses offline.

  9. Pilih Daftarkan.

  10. Pilih Ikhtisar.

  11. Rekam ID Aplikasi (klien) untuk digunakan nanti, saat Anda mengonfigurasi aplikasi web.

    Screenshot of the web app Overview page for recording your web app I D.

Langkah 2.2: Membuat rahasia klien aplikasi web

Buat rahasia klien untuk aplikasi web terdaftar. Aplikasi web menggunakan rahasia klien untuk membuktikan identitasnya saat meminta token.

  1. Di bagian Kelola, pilih Sertifikat & rahasia.
  2. Pilih Rahasia klien baru.
  3. Di kotak Deskripsi, masukkan deskripsi rahasia klien (misalnya, clientsecret1).
  4. Di bawahKedaluwarsa, pilih durasi yang membuat rahasia tersebut valid, lalu pilih Tambahkan.
  5. Catat Nilai rahasia. Anda akan menggunakan nilai ini untuk konfigurasi pada langkah selanjutnya.

Langkah 3: Mendapatkan sampel aplikasi web

Unduh file zip, atau klon aplikasi web sampel dari GitHub.

git clone https://github.com/Azure-Samples/ms-identity-python-webapp.git

Ekstrak file sampel ke folder dengan total panjang jalur 260 karakter atau kurang.

Langkah 4: Mengonfigurasi sampel aplikasi web

Dalam direktori akar proyek, ikuti langkah-langkah berikut:

  1. Buat .env file di folder akar proyek menggunakan .env.sample sebagai panduan.

    FLASK_DEBUG=True
B2C_TENANT_NAME=<tenant name>
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
EDITPROFILE_USER_FLOW=B2C_1_profile_editing
RESETPASSWORD_USER_FLOW=B2C_1_reset_password
    Tombol Nilai
    B2C_TENANT_NAME Bagian pertama dari nama penyewa Azure AD B2C Anda (misalnya, contoso).
    CLIENT_ID ID aplikasi API web dari langkah 2.1.
    CLIENT_SECRET Rahasia klien yang Anda buat di langkah 2.2.
    *_USER_FLOW Alur pengguna yang Anda buat di langkah 1.

    Variabel lingkungan dirujuk di app_config.py, dan disimpan dalam file .env terpisah untuk menjauhkannya dari kontrol sumber. File .gitignore yang disediakan mencegah file .env dicek masuk.

Langkah 5: Jalankan sampel aplikasi web

  1. Pada konsol atau terminal Anda, alihkan ke direktori yang berisi sampel. Misalnya:

    cd ms-identity-python-webapp

  2. Instal paket yang diperlukan dari Pypi dan jalankan aplikasi web pada mesin lokal Anda dengan menjalankan perintah berikut:

    python -m pip install -r requirements.txt
python -m flask run --host localhost --port 5000

    Jendela konsol menampilkan nomor port dari aplikasi yang berjalan secara lokal:

     * Debug mode: on
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Running on `http://localhost:5000/` (Press CTRL+C to quit)

  3. Untuk melihat aplikasi web yang berjalan di mesin lokal Anda, buka http://localhost:5000.

  4. Pilih Masuk.

    Screenshot showing the sign-in flow.

  5. Selesaikan proses pendaftaran atau masuk.

  6. Setelah autentikasi berhasil, Anda akan melihat nama tampilan Anda, seperti yang ditampilkan di sini:

    Screenshot showing the web app token's display name claim.

Langkah 6: Memanggil API web

Untuk memungkinkan aplikasi masuk dengan Azure AD B2C dan memanggil API web, Anda harus mendaftarkan dua aplikasi dalam direktori Azure AD B2C.

  • Pendaftaran aplikasi web (Python) yang telah Anda buat di Langkah 2. Pendaftaran aplikasi ini memungkinkan aplikasi Anda masuk dengan Azure AD B2C. Proses pendaftaran aplikasi menghasilkan ID Aplikasi, dikenal juga sebagai ID klien, yang secara unik mengidentifikasi aplikasi Anda. Misalnya, ID Aplikasi: 1.

  • Pendaftaran API web memungkinkan aplikasi Anda untuk memanggil API web yang dilindungi. Pendaftaran mengekspos izin API web (cakupan). Proses pendaftaran aplikasi menghasilkan ID Aplikasi, yang secara unik mengidentifikasi API web Anda (misalnya, ID ApIikasi: 2). Berikan izin kepada aplikasi Anda (ID Aplikasi: 1) ke cakupan API web (ID Aplikasi: 2).

Pendaftaran aplikasi dan arsitektur aplikasi dijelaskan dalam diagram berikut:

Diagram describing a web app with web API, registrations, and tokens.

Setelah autentikasi selesai, pengguna berinteraksi dengan aplikasi, yang memanggil API web yang dilindungi. API web menggunakan autentikasi token pembawa. Token pembawa adalah token akses yang diperoleh aplikasi dari Azure AD B2C. Aplikasi melewati token di header otorisasi permintaan HTTPS.

Authorization: Bearer <access token>

Jika cakupan token akses tidak cocok dengan cakupan API web, pustaka autentikasi memperoleh token akses baru dengan cakupan yang benar.

Langkah 6.1: Mendaftarkan aplikasi API web

Untuk membuat pendaftaran aplikasi API web (ID Aplikasi: 2), ikuti langkah-langkah berikut:

  1. Masuk ke portal Azure.

  2. Pastikan Anda menggunakan direktori yang berisi penyewa AAD B2C Anda. Pilih ikon Direktori + langganan di bilah alat portal.

  3. Pada Setelan portal | Direktori + langganan, temukan direktori Azure AD B2C Anda di daftar Nama direktori, lalu pilih Beralih.

  4. Di portal Microsoft Azure, cari dan pilih AAD B2C.

  5. Pilih Pendaftaran aplikasi, lalu pilih Pendaftaran baru.

  6. Untuk Nama, masukkan nama untuk aplikasi (misalnya, my-api1). Biarkan nilai default untuk URI Pengalihan dan Jenis akun yang didukung.

  7. Pilih Daftarkan.

  8. Setelah pendaftaran aplikasi selesai, pilih Ringkasan.

  9. Catat nilai ID Aplikasi (klien) untuk digunakan nanti, saat Anda mengonfigurasi aplikasi web.

    Screenshot that demonstrates how to get a web A P I application I D.

Langkah 6.2: Mengonfigurasi cakupan

  1. Pilih aplikasi my-api1 yang Anda buat (ID Aplikasi: 2) untuk membuka halaman Ringkasannya.

  2. Di bagian Kelola, pilih Ekspos API.

  3. Di samping URI ID Aplikasi, pilih tautan Set. Ganti nilai default (GUID) dengan nama yang unik (misalnya, tasks-api ), kemudian pilih Simpan .

    Ketika aplikasi web Anda meminta token akses untuk API, ia harus menambahkan URI ini sebagai awalan bagi setiap cakupan yang Anda tentukan untuk API.

  4. Di bagian Cakupan yang ditentukan oleh API ini, pilih Tambahkan cakupan.

  5. Untuk membuat cakupan yang menentukan akses baca ke API:

    1. Untuk Nama cakupan, masukkan tasks.read.
    2. Untuk Nama tampilan perizinan admin, masukkan Akses baca ke API tugas.
    3. Untuk Deskripsi perizinan admin, masukkan Izinkan akses baca ke API tugas.

  6. Pilih Tambahkan cakupan.

  7. Pilih Tambahkan cakupan, lalu tambahkan cakupan yang menentukan akses tulis ke API:

    1. Untuk Nama cakupan, masukkan tasks.write.
    2. Untuk Nama tampilan perizinan admin, masukkan Akses tulis ke API tugas.
    3. Untuk Deskripsi perizinan admin, masukkan Izinkan akses tulis ke API tugas.

  8. Pilih Tambahkan cakupan.

Langkah 6.3: Memberikan izin aplikasi web

Untuk memberi izin kepada aplikasi Anda (ID Aplikasi: 1), ikuti langkah-langkah berikut:

  1. Pilih Pendaftaran aplikasi, lalu pilih aplikasi yang Anda buat (ID Aplikasi: 1).

  2. Di bagian Kelola, pilih Izin API.

  3. Di Izin yang dikonfigurasi, pilih Tambahkan izin.

  4. Pilih tab API Saya.

  5. Pilih API (ID Aplikasi: 2) yang aplikasi webnya akan diberi akses. Contohnya, masukkan my-api1.

  6. Di bagian Izin, luaskan tugas, lalu pilih cakupan yang Anda tentukan sebelumnya (misalnya, tasks.read dan tasks.write).

  7. Pilih Tambahkan izin.

  8. Pilih Beri persetujuan admin untuk <nama penyewa Anda>.

  9. Pilih Ya.

  10. Pilih Refresh, lalu pastikan bahwa Diberikan untuk ... muncul di bawah Status untuk kedua cakupan.

  11. Dari daftar Izin akses yang dikonfigurasi, pilih cakupan Anda, lalu salin nama lengkap cakupan.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Langkah 6.4: Mengonfigurasi API web Anda

Sampel ini memperoleh token akses dengan cakupan relevan yang dapat digunakan aplikasi web untuk API web. Sampel ini sendiri tidak bertindak sebagai API web. Sebagai gantinya, Anda harus menggunakan API web yang ada atau membuat yang baru. Untuk tutorial tentang membuat API web di penyewa B2C Anda, lihat Mengaktifkan autentikasi di API web Anda sendiri dengan menggunakan Azure AD B2C.

Langkah 6.5: Mengonfigurasi aplikasi sampel dengan API web

Buka file app_config.py. File ini memuat informasi tentang penyedia identitas Azure AD B2C Anda. Perbarui properti pengaturan aplikasi berikut:

Tombol Nilai
ENDPOINT URI API web Anda (misalnya, https://localhost:6000/hello).
SCOPE Cakupan API web yang Anda buat (misalnya, ["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"]).

Langkah 6.6: Menjalankan aplikasi sampel

  1. Pada konsol atau terminal Anda, alihkan ke direktori yang berisi sampel.

  2. Jika aplikasi belum berjalan, mulai ulang menggunakan perintah dari Langkah 5.

  3. Pilih Panggil API hilir.

    Screenshot showing how to call a web API.

Langkah 7: Menyebarkan aplikasi Anda

Dalam aplikasi produksi, URI pengalihan pendaftaran aplikasi biasanya berupa titik akhir yang dapat diakses secara publik tempat aplikasi Anda berjalan, seperti https://contoso.com/getAToken.

Anda dapat menambahkan dan mengubah URI pengalihan di aplikasi Anda yang telah terdaftar kapan saja. Pembatasan berikut berlaku untuk mengalihkan URI:

  • URL pengalihan harus dimulai dengan skema https.
  • URL pengalihan peka huruf besar/kecil. Ukuran huruf harus sesuai dengan ukuran huruf pada jalur URL pada aplikasi berjalan.

Langkah berikutnya