Mengaktifkan autentikasi di aplikasi web Anda sendiri dengan menggunakan Azure AD B2C

Penting

Berlaku mulai 1 Mei 2025, Azure AD B2C tidak akan lagi tersedia untuk dibeli untuk pelanggan baru. Pelajari lebih lanjut di FAQ kami.

Artikel ini memperlihatkan kepada Anda cara menambahkan autentikasi Azure Active Directory B2C (Azure AD B2C) ke aplikasi web ASP.NET Anda sendiri. Pelajari cara membuat aplikasi web ASP.NET Core dengan middleware ASP.NET Core yang menggunakan protokol OpenID Connect .

Gunakan artikel ini bersama dengan Mengonfigurasi autentikasi dalam contoh aplikasi web, mengganti sampel aplikasi web dengan aplikasi web Anda sendiri.

Prasyarat

Untuk meninjau prasyarat dan instruksi integrasi, lihat Mengonfigurasi autentikasi dalam contoh aplikasi web.

Langkah 1: Membuat proyek aplikasi web

Anda dapat menggunakan proyek aplikasi web ASP.NET model-view-controller (MVC) yang sudah ada atau membuat yang baru. Untuk membuat proyek baru, buka shell perintah, lalu masukkan perintah berikut:

dotnet new mvc -o mywebapp

Perintah sebelumnya melakukan hal berikut:

Ini membuat aplikasi web MVC baru.
Parameter -o mywebapp membuat direktori bernama mywebapp dengan file sumber untuk aplikasi.

Langkah 2: Tambahkan pustaka autentikasi

Tambahkan pustaka Microsoft Identity Web, yang merupakan sekumpulan pustaka ASP.NET Core yang menyederhanakan penambahan dukungan autentikasi dan otorisasi Azure AD B2C ke aplikasi web Anda. Pustaka Web Identitas Microsoft menyiapkan alur autentikasi dengan autentikasi berbasis cookie. Ini mengurus pengiriman dan penerimaan pesan autentikasi HTTP, validasi token, ekstraksi klaim, dan banyak lagi.

Untuk menambahkan pustaka Web Identitas Microsoft, instal paket dengan menjalankan perintah berikut:

Visual Studio
Visual Studio Code

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Install-Package Microsoft.Identity.Web
Install-Package Microsoft.Identity.Web.UI

Langkah 3: Memulai pustaka autentikasi

Middleware Web Identitas Microsoft menggunakan kelas startup yang berjalan saat proses hosting dimulai. Dalam langkah ini, Anda menambahkan kode yang diperlukan untuk memulai pustaka autentikasi.

Buka Startup.cs lalu, di awal kelas, tambahkan deklarasi berikut using :

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

Karena Microsoft Identity Web menggunakan autentikasi berbasis cookie untuk melindungi aplikasi web Anda, kode berikut mengatur pengaturan cookie SameSite . Kemudian membaca AzureAdB2C pengaturan aplikasi dan memulai pengontrol middleware dengan tampilannya.

ConfigureServices(IServiceCollection services) Ganti fungsi dengan cuplikan kode berikut:

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

Kode berikut menambahkan kebijakan cookie dan menggunakan model autentikasi. Configure Ganti fungsi dengan cuplikan kode berikut:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

Langkah 4: Tambahkan elemen UI

Untuk menambahkan elemen antarmuka pengguna, gunakan tampilan parsial yang berisi logika untuk memeriksa untuk melihat apakah pengguna masuk. Jika pengguna tidak masuk, tampilan parsial akan merender tombol masuk. Jika mereka masuk, itu menunjukkan nama tampilan pengguna dan tombol keluar.

Buat file baru, _LoginPartial.cshtml, di dalam folder /Views/Shared dengan cuplikan kode berikut:

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

Ubah file /Views/Shared_Layout.cshtml Anda untuk menyertakan file _LoginPartial.cshtml yang Anda tambahkan. File _Layout.cshtml adalah tata letak umum yang memberi pengguna pengalaman yang konsisten saat mereka pergi dari halaman ke halaman. Tata letak mencakup elemen antarmuka pengguna umum, seperti header aplikasi dan footer.

Nota

Bergantung pada versi .NET Core yang Anda jalankan dan apakah Anda menambahkan rincian masuk ke aplikasi yang ada, elemen UI mungkin terlihat berbeda. Jika demikian, pastikan untuk menyertakan _LoginPartial di lokasi yang tepat dalam tata letak halaman.

Buka file /Views/Shared/_Layout.cshtml , lalu tambahkan elemen berikut div .

<div class="navbar-collapse collapse">
...
</div>

Ganti elemen ini dengan kode Razor berikut:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

Kode Razor sebelumnya menyertakan tautan ke Claims tindakan yang akan Anda buat di langkah berikutnya.

Langkah 5: Tambahkan tampilan klaim

Untuk melihat klaim token ID, di bawah folder /Views/Home , tambahkan tampilan Claims.cshtml .

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

Dalam langkah ini, Anda menambahkan Claims tindakan yang menautkan tampilan Claims.cshtml ke pengontrol Beranda . Tindakan ini Claims menggunakan Authorize atribut , yang membatasi akses ke tindakan untuk pengguna yang diautentikasi.

Di pengontrol /Controllers/HomeController.cs , tambahkan tindakan berikut:

[Authorize]
public IActionResult Claims()
{
    return View();
}

Di awal kelas, tambahkan deklarasi berikut using :

using Microsoft.AspNetCore.Authorization;

Langkah 6: Menambahkan pengaturan aplikasi

Pengaturan penyedia identitas Azure AD B2C disimpan dalam file appsettings.json . Buka appsettings.json, lalu tambahkan pengaturan berikut:

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

Informasi yang diperlukan dijelaskan dalam artikel Mengonfigurasi autentikasi dalam contoh aplikasi web . Gunakan pengaturan berikut:

Instans: Ganti <your-tenant-name> dengan bagian pertama dari nama penyewa Azure AD B2C Anda (misalnya, https://contoso.b2clogin.com).
Domain: Ganti <your-b2c-domain> dengan nama penyewa lengkap Azure AD B2C Anda (misalnya, contoso.onmicrosoft.com).
ID Klien: Ganti <web-app-application-id> dengan ID Aplikasi dari Langkah 2.
Nama kebijakan: Ganti <your-sign-up-in-policy> dengan alur pengguna yang Anda buat di Langkah 1.

Langkah 7: Jalankan aplikasi Anda

Bangun dan jalankan proyek.
Pergi ke https://localhost:5001.
Pilih Daftar/Masuk.
Selesaikan proses pendaftaran atau masuk.

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

Langkah selanjutnya

Pelajari cara menyesuaikan dan menyempurnakan pengalaman autentikasi Azure AD B2C untuk aplikasi web.

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-05-08