Mengonfigurasi autentikasi di sampel aplikasi web menggunakan Azure AD B2C

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

Penting

Sampel aplikasi web ASP.NET yang dirujuk dalam artikel ini tidak dapat digunakan untuk memanggil REST API, karena mengembalikan token ID dan bukan token akses. Untuk aplikasi web yang dapat memanggil REST API, lihat Mengamankan API Web yang dibangun dengan ASP.NET Core dengan menggunakan Azure AD B2C.

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 Microsoft Identity Web. Microsoft Identity Web adalah sekumpulan ASP.NET Core yang menyederhanakan penambahan dukungan autentikasi dan otorisasi ke aplikasi web.

Alur masuk melibatkan langkah-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 dan mengatur ulang sandi. Atau, mereka dapat masuk dengan akun sosial.
4. Setelah pengguna berhasil masuk, Azure AD B2C mengembalikan token ID ke aplikasi.
5. Aplikasi memvalidasi token ID, membaca klaim, dan mengembalikan halaman aman kepada pengguna.

Saat token ID kedaluwarsa, atau sesi aplikasi tidak valid, aplikasi memulai permintaan autentikasi baru, dan mengalihkan pengguna ke Azure AD B2C. Jika sesi SSO Azure AD B2C aktif, Azure AD B2C mengeluarkan token akses tanpa meminta pengguna untuk masuk lagi. Jika sesi Azure AD B2C kedaluwarsa atau menjadi tidak valid, pengguna akan diminta untuk masuk lagi.

Keluar

Alur proses keluar meliputi langkah-langkah berikut:

1. Dari aplikasi, pengguna keluar.
2. Aplikasi menghapus objek sesinya, dan pustaka autentikasi menghapus cache tokennya.
3. Aplikasi mengalihkan pengguna ke titik akhir keluar Azure Active Directory B2C untuk mengakhiri sesi Azure Active Directory B2C.
4. Pengguna dialihkan kembali ke aplikasi.

Prasyarat

Komputer yang menjalankan salah satu dari berikut ini:

Visual Studio

• Visual Studio 2022 17.0 atau versi terbaru, dengan beban kerja pengembangan web dan ASP.NET
• .NET 6.0 SDK

Visual Studio Code

• Visual Studio Code
• C# for Visual Studio Code (versi terbaru)
• .NET 6.0 SDK

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.

Untuk membuat pendaftaran aplikasi web, gunakan 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 https://localhost:44316/signin-oidc.

8. Di bawah Autentikasi, buka Pemberian implisit dan alur hibrid, pilih kotak centang Token ID (digunakan untuk alur implisit dan hibrid).

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

10. Pilih Daftarkan.

11. Pilih Gambaran umum.

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

    

Langkah 3: Mendapatkan sampel aplikasi web

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

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

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

Langkah 4: Mengonfigurasi sampel aplikasi web

Di folder contoh, di bawah folder 1-WebApp-OIDC/1-5-B2C/, buka proyek WebApp-OpenIDConnect-DotNet.csproj dengan Visual Studio atau Visual Studio Code.

Di bawah folder akar proyek, buka file appsettings.json. File ini memuat informasi tentang penyedia identitas Azure AD B2C Anda. Perbarui properti pengaturan aplikasi berikut:

Bagian	Tombol	Nilai
AzureAdB2C	Instans	Bagian pertama dari nama penyewa Azure AD B2C Anda (misalnya, https://contoso.b2clogin.com).
AzureAdB2C	Domain	Nama penyewa lengkap penyewa Azure AD B2C Anda (misalnya, contoso.onmicrosoft.com).
AzureAdB2C	ClientId	ID Aplikasi Apl Web (klien) dari langkah 2.
AzureAdB2C	SignUpSignInPolicyId	Alur pengguna, atau kebijakan kustom yang Anda buat di langkah 1.

File konfigurasi final akan terlihat seperti JSON berikut ini:

"AzureAdB2C": {
  "Instance": "https://contoso.b2clogin.com",
  "Domain": "contoso.onmicrosoft.com",
  "ClientId": "<web-app-application-id>",
  "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

Langkah 5: Jalankan sampel aplikasi web

1. Buat dan jalankan proyek.

2. Buka https://localhost:44316.

3. Pilih Daftar/Masuk.

   

4. Selesaikan proses pendaftaran atau masuk.

Setelah autentikasi berhasil, Anda akan melihat nama tampilan Anda di bilah navigasi. Untuk melihat klaim bahwa token Azure Active Directory B2C kembali ke aplikasi Anda, pilih Klaim.

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/signin-oidc.

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

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

Langkah berikutnya

• Mempelajari selengkapnya tentang sampel kode.
• Pelajari cara Mengaktifkan autentikasi di aplikasi web Anda sendiri dengan menggunakan Azure AD B2C.