Mengaktifkan autentikasi di aplikasi web Anda sendiri menggunakan Azure AD B2C

Artikel
01/11/2024

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 ASP.NET core yang menggunakan protokol OpenID Connect.

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

Prasyarat

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

Langkah 1: Buat proyek aplikasi web

Anda dapat menggunakan proyek aplikasi web ASP.NET model view controller (MVC) yang 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:

Perintahnya 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 autentikasi Azure AD B2C dan dukungan otorisasi ke aplikasi web Anda. Pustaka Web Identitas Microsoft menyiapkan alur autentikasi dengan autentikasi berbasis cookie. Diperlukan perawatan untuk mengirim dan menerima pesan autentikasi HTTP, validasi token, ekstraksi klaim, dan banyak lagi.

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

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: Mulai pustaka autentikasi

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

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

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

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

Ganti ConfigureServices(IServiceCollection services) 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. Ganti Configure 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 sebagian yang berisi logika untuk memeriksa apakah pengguna masuk atau tidak. Jika pengguna tidak masuk, tampilan sebagian akan merender tombol masuk. Jika mereka masuk, tampilan 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 berpindah dari halaman ke halaman. Tata letaknya mencakup elemen antarmuka pengguna umum seperti header aplikasi dan footer.

Catatan

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

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

<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 tindakan Claims yang menautkan tampilan Claims.cshtml ke pengontrol Rumah. ClaimsTindakan menggunakan Authorizeatribut yang membatasi akses ke tindakan untuk pengguna yang diautentikasi.

Pada kontroler /Controllers/HomeController.cs, tambahkan tindakan berikut:

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

Di awal kelas, tambahkan using deklarasi berikut:

using Microsoft.AspNetCore.Authorization;

Langkah 6: Tambahkan pengaturan aplikasi

Pengaturan penyedia identitas Azure Active Directory 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 Mengonfigurasi autentikasi dalam artikel 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

Buat dan jalankan proyek.
Buka https://localhost:5001.
Pilih Daftar/Masuk.
Selesaikan proses pendaftaran atau masuk.

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

Langkah berikutnya

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

Share via