Autentikasi cloud dengan Azure Active Directory B2C di ASP.NET Core

Artikel
02/15/2024

Azure Active Directory B2C (Azure AD B2C) adalah solusi manajemen identitas cloud untuk aplikasi web dan seluler. Layanan ini menyediakan autentikasi untuk aplikasi yang dihosting di cloud dan lokal. Jenis autentikasi mencakup akun individual, akun jejaring sosial, dan akun perusahaan federasi. Selain itu, Azure AD B2C dapat menyediakan autentikasi multifaktor dengan konfigurasi minimal.

Tip

ID Microsoft Entra, ID Eksternal Microsoft Entra, dan Azure AD B2C adalah penawaran produk terpisah. Penyewa ID Entra umumnya mewakili organisasi, sementara penyewa Azure AD B2C atau penyewa ID Eksternal Microsoft Entra dapat mewakili kumpulan identitas yang akan digunakan dengan aplikasi pihak yang mengandalkan. Untuk mempelajari selengkapnya, lihat Azure AD B2C: Tanya jawab umum (FAQ).

Tip

ID Eksternal Microsoft Entra untuk pelanggan adalah solusi manajemen identitas dan akses pelanggan (CIAM) baru Microsoft.

Dalam tutorial ini, Anda akan mempelajari cara mengonfigurasi aplikasi ASP.NET Core untuk autentikasi dengan Azure AD B2C.

Prasyarat

Akun Azure dengan langganan aktif. Buat akun secara gratis.
.NET SDK. Instal .NET SDK terbaru untuk platform Anda.

Persiapan

Membuat penyewa Azure Active Directory B2C.
Buat aplikasi halaman ASP.NET Core Razor baru:
```
dotnet new razor -o azure-ad-b2c
```
Perintah sebelumnya membuat Razor aplikasi halaman di direktori bernama azure-ad-b2c.

Tip

Anda mungkin lebih suka menggunakan Visual Studio untuk membuat aplikasi Anda.
Buat pendaftaran aplikasi web di penyewa. Untuk URI Pengalihan, gunakan https://localhost:5001/signin-oidc. Ganti 5001 dengan port yang digunakan oleh aplikasi Anda saat menggunakan port yang dihasilkan Visual Studio.

Mengubah aplikasi

Tambahkan paket Microsoft.Identity.Web dan Microsoft.Identity.Web.UI ke proyek. Jika Anda menggunakan aplikasi Visual Studio, Anda dapat menggunakan NuGet Package Manager.
```
dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI
```
Di sebelumnya:
- Microsoft.Identity.Web termasuk serangkaian dependensi dasar untuk mengautentikasi dengan platform Microsoft Identity .
- Microsoft.Identity.Web.UI termasuk fungsionalitas UI yang dienkapsulasi di area bernama MicrosoftIdentity.

AzureADB2C Tambahkan objek ke appsettings.json.

Catatan

Saat menggunakan alur pengguna Azure B2C, Anda perlu mengatur Instans dan PolicyId dari jenis alur.

{
  "AzureADB2C": {
    "Instance": "https://--your-domain--.b2clogin.com",
    "Domain": "[Enter the domain of your B2C tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Azure portal. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. da41245a5-11b3-996c-00a8-4d99re19f292]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Azure portal), e.g. ba74781c2-53c2-442a-97c2-3d60re42f403]",
    // Use either a secret or a certificate. ClientCertificates are recommended.
    "ClientSecret": "[Copy the client secret added to the app from the Azure portal]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc",
    // Add your policy here
    "SignUpSignInPolicyId": "B2C_1_signup_signin",
    "SignedOutCallbackPath": "/signout-callback-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Untuk Domain, gunakan domain penyewa Azure AD B2C Anda.
Untuk ClientId, gunakan ID Aplikasi (klien) dari pendaftaran aplikasi yang Anda buat di penyewa Anda.
Misalnya, gunakan domain penyewa Azure AD B2C Anda.
Untuk SignUpSignInPolicyId, gunakan kebijakan alur pengguna yang ditentukan dalam penyewa Azure B2C
Gunakan konfigurasi ClientSecret atau ClientCertificates. ClientCertificates direkomendasikan.
Biarkan semua nilai lain apa adanya.

Di Halaman/Bersama, buat file bernama _LoginPartial.cshtml. Sertakan kode berikut:

@using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
        </li>
}
else
{
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
        </li>
}
</ul>

Kode sebelumnya:

Memeriksa apakah pengguna diautentikasi.
Merender tautan Keluar atau Masuk sebagaimana mewajibkan.
- Tautan menunjuk ke metode tindakan pada Account pengontrol di area tersebut MicrosoftIdentity .

Di Pages/Shared/_Layout.cshtml, tambahkan baris yang disorot dalam <header> elemen :

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">azure_ad_b2c</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

<partial name="_LoginPartial" /> Menambahkan merender tampilan parsial _LoginPartial.cshtml di setiap permintaan halaman yang menggunakan tata letak ini.

Di Program.cs, buat perubahan berikut:
1. Tambahkan instruksi using berikut:
```
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
```
  Kode sebelumnya menyelesaikan referensi yang digunakan dalam langkah berikutnya.
2. builder.Services Perbarui baris dengan kode berikut:
```
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureADB2C"));

builder.Services.AddAuthorization(options =>
{
    // By default, all incoming requests will be authorized according to 
    // the default policy
    options.FallbackPolicy = options.DefaultPolicy;
});
builder.Services.AddRazorPages(options => {
    options.Conventions.AllowAnonymousToPage("/Index");
})
.AddMvcOptions(options => { })
.AddMicrosoftIdentityUI();
```
  Dalam kode sebelumnya:
  - Panggilan ke AddAuthentication metode dan AddMicrosoftIdentityWebApp mengonfigurasi aplikasi untuk menggunakan open ID Koneksi, yang secara khusus dikonfigurasi untuk platform MicrosoftIdentity.
  - AddAuthorization menginisialisasi otorisasi ASP.NET Core.
  - Panggilan AddRazorPages mengonfigurasi aplikasi sehingga browser anonim dapat melihat halaman Indeks. Semua permintaan lain memerlukan autentikasi.
  - AddMvcOptions dan AddMicrosoftIdentityUI tambahkan komponen UI yang diperlukan untuk mengalihkan ke/dari Azure AD B2C.
3. Perbarui baris yang disorot ke Configure metode :
```
app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();
```
  Kode sebelumnya memungkinkan autentikasi di ASP.NET Core.

Menjalankan aplikasi

Catatan

Gunakan profil yang cocok dengan URI Pengalihan pendaftaran Aplikasi Azure

Jalankan aplikasi.
```
dotnet run --launch-profile https
```
Telusuri ke titik akhir aman aplikasi, misalnya, https://localhost:5001/.
- Halaman Indeks merender tanpa tantangan autentikasi.
- Header menyertakan tautan Masuk karena Anda tidak diautentikasi .
Pilih tautan Privacy.
- Browser dialihkan ke metode autentikasi yang dikonfigurasi penyewa Anda.
- Setelah masuk, header menampilkan pesan selamat datang dan tautan Keluar .

Langkah berikutnya

Dalam tutorial ini, Anda mempelajari cara mengonfigurasi aplikasi ASP.NET Core untuk autentikasi dengan Azure AD B2C.

Sekarang setelah aplikasi ASP.NET Core dikonfigurasi untuk menggunakan Azure AD B2C untuk autentikasi, atribut Otorisasi dapat digunakan untuk mengamankan aplikasi Anda. Lanjutkan pengembangan aplikasi Anda dengan mempelajari cara:

Sesuaikan antarmuka pengguna Azure AD B2C.
Mengonfigurasi persyaratan kompleksitas kata sandi.
Aktifkan autentikasi multi-faktor.
Konfigurasikan idP tambahan, seperti Microsoft, Facebook, Google, Amazon, Twitter, dan lainnya.
Gunakan Microsoft Graph API untuk mengambil informasi pengguna tambahan, seperti keanggotaan grup, dari penyewa Azure AD B2C.
Cara mengamankan API Web yang dibangun dengan ASP.NET Core menggunakan Azure AD B2C.
Tutorial: Memberikan akses ke API web ASP.NET menggunakan Azure Active Directory B2C.

Bagikan melalui