Bagikan melalui


Memasukkan pengguna dalam sampel aplikasi web Python Django

Dalam panduan ini, Anda menjelajahi aplikasi web Python Django yang diamankan oleh MICROSOFT Entra External ID. Sampel ini membawa Anda melalui pengalaman masuk bagi pelanggan yang mengautentikasi ke aplikasi web Python Django. Contoh aplikasi web menggunakan Microsoft Authentication Library for Python (MSAL Python) untuk menangani autentikasi pengguna.

Prasyarat

Mendaftarkan aplikasi web

Untuk mengaktifkan aplikasi Anda untuk memasukkan pengguna dengan Microsoft Entra, MICROSOFT Entra External ID harus mengetahui aplikasi yang Anda buat. Pendaftaran aplikasi membangun hubungan kepercayaan antara aplikasi dan Microsoft Entra. Saat Anda mendaftarkan aplikasi, ID Eksternal menghasilkan pengidentifikasi unik yang dikenal sebagai ID Aplikasi (klien), nilai yang digunakan untuk mengidentifikasi aplikasi Anda saat membuat permintaan autentikasi.

Langkah-langkah berikut menunjukkan cara mendaftarkan aplikasi Anda di pusat admin Microsoft Entra:

  1. Masuk ke pusat admin Microsoft Entra setidaknya sebagai Pengembang Aplikasi.

  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan ikon Pengaturan di menu atas untuk beralih ke penyewa eksternal Anda dari menu Direktori + langganan.

  3. Telusuri Aplikasi >Identitas>Pendaftaran aplikasi.

  4. Pilih + Pendaftaran baru.

  5. Di halaman Daftarkan aplikasi yang muncul;

    1. Masukkan Nama aplikasi yang bermakna yang ditampilkan kepada pengguna aplikasi, misalnya ciam-client-app.
    2. Di bawah Jenis akun yang didukung, pilih Hanya akun dalam direktori organisasi ini.
  6. Pilih Daftarkan.

  7. Panel Gambaran Umum aplikasi ditampilkan setelah pendaftaran berhasil. Rekam ID Aplikasi (klien) yang akan digunakan dalam kode sumber aplikasi Anda.

Untuk menentukan jenis aplikasi ke pendaftaran aplikasi Anda, ikuti langkah-langkah berikut:

  1. Di bawah Kelola, pilih Autentikasi
  2. Pada halaman Konfigurasi platform , pilih Tambahkan platform, lalu pilih opsi Web .
  3. Untuk URI Pengalihan masukkan http://localhost:5000/redirect. URI pengalihan ini adalah lokasi di mana server otorisasi mengirim token akses. Anda dapat menyesuaikannya agar sesuai dengan kasus penggunaan Anda.
  4. Pilih Konfigurasikan untuk menyimpan perubahan Anda.

Menambahkan rahasia klien aplikasi

Buat rahasia klien untuk aplikasi terdaftar. Aplikasi ini menggunakan rahasia klien untuk membuktikan identitasnya ketika meminta token.

  1. Dari halaman Pendaftaran aplikasi, pilih aplikasi yang Anda buat (seperti ciam-client-app) untuk membuka halaman Gambaran Umumnya.
  2. Di bagian Kelola, pilih Sertifikat & rahasia.
  3. Pilih Rahasia klien baru.
  4. Dalam kotak Deskripsi , masukkan deskripsi untuk rahasia klien (misalnya, rahasia klien aplikasi ciam).
  5. Di bawah Kedaluwarsa, pilih durasi yang rahasianya valid (sesuai aturan keamanan organisasi Anda), lalu pilih Tambahkan.
  6. Catat Nilai rahasia. Anda akan menggunakan nilai ini untuk konfigurasi pada langkah selanjutnya. Nilai rahasia tidak akan ditampilkan lagi, dan tidak dapat diambil dengan cara apa pun, setelah Anda menavigasi jauh dari Sertifikat dan rahasia. Pastikan Anda merekamnya.
  1. Dari halaman Pendaftaran aplikasi, pilih aplikasi yang Anda buat (seperti ciam-client-app) untuk membuka halaman Gambaran Umumnya.

  2. Di bagian Kelola, pilih Izin API. Dari daftar Izin yang dikonfigurasi, aplikasi Anda telah diberi izin User.Read. Namun, karena penyewa adalah penyewa eksternal, pengguna konsumen itu sendiri tidak dapat menyetujui izin ini. Anda sebagai admin harus menyetujui izin ini atas nama semua pengguna di penyewa:

    1. Pilih Berikan persetujuan admin untuk <nama> penyewa Anda, lalu pilih Ya.
    2. Pilih Refresh, lalu verifikasi bahwa Diberikan untuk <nama> penyewa Anda muncul di bawah Status untuk kedua cakupan.

Membuat alur pengguna

Ikuti langkah-langkah ini untuk membuat alur pengguna yang dapat digunakan pelanggan untuk masuk atau mendaftar ke aplikasi.

  1. Masuk ke pusat admin Microsoft Entra sebagai setidaknya Administrator Alur Pengguna ID Eksternal.

  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan ikon Pengaturan di menu atas untuk beralih ke penyewa eksternal Anda dari menu Direktori + langganan.

  3. Telusuri ke >Identitas Eksternal Identitas>Alur pengguna.

  4. Pilih + Alur pengguna baru.

  5. Pada halaman Buat :

    1. Masukkan Nama untuk alur pengguna, seperti SignInSignUpSample.

    2. Di daftar Penyedia identitas, pilih Akun Email. IdP ini memungkinkan pengguna untuk masuk atau mendaftar menggunakan alamat email mereka.

      Catatan

      Penyedia identitas tambahan akan dicantumkan di sini hanya setelah Anda menyiapkan federasi dengan mereka. Misalnya, jika menyiapkan federasi dengan Google atau Facebook, Anda akan dapat memilih idP tambahan tersebut di sini.

    3. Di bawah Akun email, Anda bisa memilih salah satu dari dua opsi. Untuk tutorial ini, pilih Email dengan kata sandi.

      • Email dengan kata sandi: Memungkinkan pengguna baru untuk mendaftar dan masuk menggunakan alamat email sebagai nama masuk dan kata sandi sebagai kredensial faktor pertama mereka.
      • Kode akses satu kali email: Memungkinkan pengguna baru untuk mendaftar dan masuk menggunakan alamat email sebagai nama masuk dan kode akses satu kali email sebagai kredensial faktor pertama mereka. Kode akses satu kali email harus diaktifkan di tingkat penyewa (Semua Kode sandi Satu kali Email Penyedia>Identitas) agar opsi ini tersedia di tingkat alur pengguna.
    4. Di bawah Atribut pengguna, pilih atribut yang ingin Anda kumpulkan dari pengguna saat mendaftar. Dengan memilih Tampilkan lainnya, Anda dapat memilih atribut dan klaim untuk Negara/Wilayah, Nama Tampilan, dan Kode Pos. Pilih OK. (Pengguna hanya dimintai atribut saat mendaftar untuk pertama kalinya.)

  6. Pilih Buat. Alur pengguna baru muncul di daftar Alur pengguna. Jika perlu, refresh halaman.

Untuk mengaktifkan pengaturan ulang kata sandi mandiri, gunakan langkah-langkah dalam artikel Mengaktifkan pengaturan ulang kata sandi mandiri.

Mengaitkan aplikasi web dengan alur pengguna

Agar pengguna pelanggan dapat melihat pengalaman pendaftaran atau masuk saat mereka menggunakan aplikasi, Anda perlu mengaitkan aplikasi Anda dengan alur pengguna. Meskipun banyak aplikasi dapat dikaitkan dengan alur pengguna Anda, satu aplikasi hanya dapat dikaitkan dengan satu alur pengguna.

  1. Pada menu bilah samping, pilih Identitas.

  2. Pilih Identitas Eksternal, lalu Alur pengguna.

  3. Di halaman Alur pengguna, pilih Nama alur pengguna yang Anda buat sebelumnya, misalnya, SignInSignUpSample.

  4. Di bawah Gunakan, pilih Aplikasi.

  5. Pilih Tambahkan aplikasi.

  6. Pilih aplikasi dari daftar seperti ciam-client-app atau gunakan kotak pencarian untuk menemukan aplikasi, lalu pilih.

  7. Memilih Pilih.

Setelah mengaitkan aplikasi dengan alur pengguna, Anda dapat menguji alur pengguna dengan mensimulasikan pengalaman pendaftaran atau masuk pengguna dengan aplikasi Anda dari dalam pusat admin Microsoft Entra. Untuk melakukannya, gunakan langkah-langkah dalam Menguji alur pengguna pendaftaran dan masuk Anda.

Mengkloning atau mengunduh sampel aplikasi web

Untuk mendapatkan aplikasi sampel, Anda dapat mengkloningnya dari GitHub atau mengunduhnya sebagai file .zip.

  • Untuk mengkloning sampel, buka prompt perintah dan navigasi ke tempat Anda ingin membuat proyek, dan masukkan perintah berikut:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
    
  • Unduh file .zip. Ekstrak ke jalur file di mana panjang nama kurang dari 260 karakter.

Menginstal dependensi proyek

  1. Buka jendela konsol, dan ubah ke direktori yang berisi aplikasi web sampel Flask:

    cd django-web-app
    
  2. Menyiapkan lingkungan virtual

    py -m venv .venv
    .venv\scripts\activate
    
  3. Jalankan perintah berikut untuk menginstal dependensi aplikasi:

    python3 -m pip install -r requirements.txt
    

Mengonfigurasi contoh aplikasi web

  1. Buka file proyek Anda di Visual Studio Code atau editor yang Anda gunakan.

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

  3. Dalam file .env Anda, berikan variabel lingkungan berikut:

    1. CLIENT_ID yang merupakan ID Aplikasi (klien) aplikasi yang Anda daftarkan sebelumnya.
    2. CLIENT_SECRET yang merupakan nilai rahasia aplikasi yang Anda salin sebelumnya.
    3. AUTHORITY yang merupakan URL yang mengidentifikasi otoritas token. Ini harus dari format https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. Ganti subdomain dengan subdomain Direktori (penyewa). Misalnya, jika domain utama penyewa Anda adalah contoso.onmicrosoft.com, gunakan contoso. Jika Anda tidak memiliki subdomain penyewa, pelajari cara membaca detail penyewa Anda.
    4. REDIRECT_URI yang seharusnya mirip dengan URI pengalihan yang Anda daftarkan sebelumnya harus sesuai dengan konfigurasi Anda.

Menjalankan dan menguji sampel aplikasi web

Jalankan aplikasi untuk melihat pengalaman masuk saat bermain.

Catatan

Sampel ini menggunakan pustaka pihak ketiga identitas Python. Pustaka tidak dikelola secara resmi oleh Microsoft tetapi disarankan untuk anda gunakan. Pustaka ini memudahkan untuk menambahkan autentikasi ke aplikasi web Anda karena mengabstraksi banyak detail MSAL Python.

  1. Di terminal Anda, jalankan perintah berikut:

    python manage.py runserver localhost:5000                                             
    

    Anda dapat menggunakan port pilihan Anda. Ini harus mirip dengan port URI pengalihan yang Anda daftarkan sebelumnya.

  2. Buka browser Anda, lalu buka http://localhost:5000. Anda akan melihat halaman yang mirip dengan cuplikan layar berikut:

    Cuplikan layar halaman masuk sampel aplikasi web Django.

  3. Setelah halaman selesai dimuat, pilih tautan Masuk . Anda diminta untuk masuk.

  4. Pada halaman masuk, ketik alamat Email Anda, pilih Berikutnya, ketik Kata Sandi Anda, lalu pilih Masuk. Jika Anda tidak memiliki akun, pilih Tidak ada akun? Buat satu tautan, yang memulai alur pendaftaran.

  5. Jika Anda memilih opsi pendaftaran, Anda akan melalui alur sign-uo. Isi email Anda, kode akses satu kali, kata sandi baru, dan detail akun lainnya untuk menyelesaikan seluruh alur pendaftaran.

  6. Setelah masuk atau mendaftar, Anda dialihkan kembali ke aplikasi web. Anda akan melihat halaman yang terlihat mirip dengan cuplikan layar berikut:

    Cuplikan layar sampel aplikasi web flask setelah autentikasi berhasil.

  7. Pilih Keluar untuk mengeluarkan pengguna dari aplikasi web atau pilih Panggil API hilir untuk melakukan panggilan ke titik akhir Microsoft Graph.

Cara kerjanya

Saat pengguna memilih tautan Masuk , aplikasi memulai permintaan autentikasi dan mengalihkan pengguna ke ID Eksternal Microsoft Entra. Pengguna kemudian masuk atau mendaftar di halaman yang muncul. Setelah memberikan kredensial yang diperlukan dan menyetujui cakupan yang diperlukan, ID Eksternal Microsoft Entra mengalihkan pengguna kembali ke aplikasi web dengan kode otorisasi. Aplikasi web kemudian menggunakan kode otorisasi ini untuk memperoleh token dari ID Eksternal Microsoft Entra.

Saat pengguna memilih tautan Keluar , aplikasi menghapus sesinya, mengalihkan pengguna ke titik akhir keluar MICROSOFT Entra External ID untuk memberi tahu bahwa pengguna telah keluar. Pengguna kemudian dialihkan kembali ke aplikasi web.