Bagikan melalui


Mulai Cepat: Menyiapkan rincian masuk untuk aplikasi ASP.NET menggunakan Azure Active Directory B2C

Azure Active Directory B2C (Azure AD B2C) menyediakan manajemen identitas cloud untuk melindungi aplikasi, bisnis, dan pelanggan Anda. Azure AD B2C memungkinkan aplikasi Anda untuk mengautentikasi akun sosial dan akun perusahaan menggunakan protokol standar terbuka.

Dalam mulai cepat ini, Anda menggunakan aplikasi ASP.NET untuk masuk menggunakan penyedia identitas sosial dan memanggil API web terproteksi Azure AD B2C.

Prasyarat

  • Visual Studio 2022 dengan beban kerja ASP.NET serta pengembangan web.

  • Akun sosial dari Facebook, Google, atau Microsoft.

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

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git
    

    Ada dua proyek dalam solusi sampel:

    • TaskWebApp - Aplikasi web yang membuat dan mengedit daftar tugas. Aplikasi web menggunakan alur pengguna daftar atau masuk untuk mendaftar atau memasukkan pengguna.
    • TaskService - API web yang mendukung fungsionalitas buat, baca, perbarui, dan hapus daftar tugas. API web dilindungi oleh Azure AD B2C dan dipanggil oleh aplikasi web.

Menjalankan aplikasi di Visual Studio

  1. Di folder proyek aplikasi contoh, buka solusi B2C-WebAPI-DotNet.sln di Visual Studio.

  2. Untuk mulai cepat ini, Anda akan menjalankan proyek TaskWebApp dan TaskService secara bersamaan. Klik kanan solusi B2C-WebAPI-DotNet di Penjelajah Solusi, lalu pilih Konfigurasikan Proyek StartUp....

  3. Pilih Beberapa proyek startup dan ubah Tindakan untuk kedua proyek ke Mulai.

  4. PilihOK.

  5. Tekan F5 untuk men-debug kedua aplikasi. Setiap aplikasi terbuka di jendela browsernya sendiri:

    • https://localhost:44316/ - Aplikasi web ASP.NET. Anda berinteraksi langsung dengan aplikasi ini di mulai cepat.
    • https://localhost:44332/ - API web yang dipanggil oleh aplikasi web ASP.NET.

Masuk menggunakan akun Anda

  1. Klik Daftar/Masuk dalam aplikasi web ASP.NET untuk memulai alur kerja.

    Cuplikan layar memperlihatkan sampel ASP.NET aplikasi web di browser dengan tautan daftar/tanda tangan disorot

    Sampel ini mendukung beberapa opsi pendaftaran termasuk menggunakan penyedia identitas sosial atau membuat akun lokal menggunakan alamat email. Untuk mulai cepat ini, gunakan akun penyedia identitas sosial baik dari Facebook, Google, atau Microsoft.

  2. Azure AD B2C menyediakan halaman masuk untuk perusahaan fiktif bernama Fabrikam untuk aplikasi web sampel. Untuk mendaftar menggunakan IdP sosial, klik tombol IdP yang ingin Anda gunakan.

    Cuplikan layar tombol IdP halaman Masuk atau Daftar

    Anda mengautentikasi (masuk) menggunakan informasi masuk akun sosial Anda dan izinkan aplikasi untuk membaca informasi dari akun sosial Anda. Dengan memberikan akses, aplikasi dapat mengambil informasi profil dari akun sosial seperti nama dan kota Anda.

  3. Selesaikan proses masuk untuk penyedia identitas.

Edit profil Anda

Azure Active Directory B2C menyediakan fungsionalitas yang memungkinkan pengguna untuk memperbarui profil mereka. Sampel aplikasi web menggunakan alur pengguna edit profil Azure AD B2C untuk alur kerja.

  1. Di bilah menu aplikasi, klik nama profil Anda, lalu pilih Edit profil untuk mengedit profil yang Anda buat.

    Cuplikan layar sampel aplikasi web di browser dengan tautan edit profil disorot

  2. Ubah Nama tampilan atau Kota Anda, lalu pilih Lanjutkan untuk memperbarui profil Anda.

    Perubahan akan ditampilkan di bagian kanan atas halaman beranda aplikasi web.

Mengakses sumber daya API yang terlindungi

  1. Pilih Daftar Tugas untuk memasukkan dan memodifikasi item daftar tugas Anda.

  2. Dalam kotak teks Item Baru, masukkan teks. Untuk memanggil API web terlindungi Azure AD B2C yang menambahkan item daftar tugas, pilih Tambahkan.

    Cuplikan layar contoh aplikasi web di browser dengan tautan Daftar To-Do dan tombol Tambahkan disorot.

    Aplikasi web ASP.NET menyertakan token akses Microsoft Entra dalam permintaan ke sumber daya API web yang dilindungi untuk melakukan operasi pada item daftar tugas pengguna.

Anda telah berhasil menggunakan akun pengguna Azure AD B2C untuk melakukan panggilan resmi ke API web yang dilindungi Azure AD B2C.

Langkah berikutnya

Membuat penyewa Azure Active Directory B2C di portal Microsoft Azure