Tutorial: Mengonfigurasi aplikasi web ASP.NET Core untuk otorisasi dan autentikasi

2025-03-05

Berlaku untuk: Lingkaran hijau dengan simbol tanda centang putih. Penyewa Tenaga Kerja penyewa eksternal (pelajari lebih lanjut)

Dalam tutorial ini, Anda menambahkan elemen autentikasi dan otorisasi ke aplikasi web ASP.NET Core. Dalam tutorial sebelumnya, Anda membuat proyek ASP.NET Core dan mengonfigurasinya untuk autentikasi.

Di tutorial ini, Anda akan:

Menambahkan elemen otorisasi dan autentikasi ke kode
Mengaktifkan tampilan klaim dalam token ID
Tambahkan pengalaman masuk dan keluar

Prasyarat

Penyelesaian prasyarat dan langkah-langkah dalam Tutorial : Menyiapkan aplikasi web ASP.NET Core yang mengautentikasi pengguna.

Menambahkan elemen autentikasi dan otorisasi

File HomeController.cs dan Program.cs perlu dimodifikasi untuk menambahkan elemen autentikasi dan otorisasi ke aplikasi web ASP.NET Core. Ini termasuk mengelola halaman beranda, menambahkan namespace yang benar dan mengonfigurasi masuk.

Menambahkan otorisasi ke HomeController.cs

Halaman beranda aplikasi harus memiliki kemampuan untuk mengotorisasi pengguna. Namespace Microsoft.AspNetCore.Authorization menyediakan kelas dan antarmuka untuk menerapkan otorisasi ke aplikasi web. Atribut [Authorize] digunakan untuk menentukan bahwa hanya pengguna yang diautentikasi yang dapat menggunakan aplikasi web.

Di aplikasi web Anda, buka Controllers/HomeController.cs, dan tambahkan cuplikan berikut ke bagian atas file:

using System.Diagnostics;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using dotnetcore_webapp.Models;

Tambahkan atribut [Authorize] di atas definisi kelas HomeController, seperti yang ditunjukkan pada cuplikan berikut:
```
[Authorize]
public class HomeController : Controller
{
...
```

Menambahkan elemen autentikasi dan otorisasi ke Program.cs

File Program.cs adalah titik masuk aplikasi, dan perlu dimodifikasi untuk menambahkan autentikasi dan otorisasi ke aplikasi web. Layanan perlu ditambahkan untuk memungkinkan aplikasi menggunakan pengaturan yang ditentukan dalam appsettings.json untuk autentikasi.

Tambahkan namespace berikut ke bagian atas file.

using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
using System.IdentityModel.Tokens.Jwt;

Selanjutnya, tambahkan layanan autentikasi aplikasi Microsoft Identity Web, yang mengonfigurasi aplikasi untuk menggunakan Microsoft Identity untuk autentikasi.

// Add services to the container.
builder.Services.AddControllersWithViews();

// This is required to be instantiated before the OpenIdConnectOptions starts getting configured.
// By default, the claims mapping will map claim names in the old format to accommodate older SAML applications.
// This flag ensures that the ClaimsIdentity claims collection will be built from the claims in the token
JwtSecurityTokenHandler.DefaultMapInboundClaims = false;

// Sign-in users with the Microsoft identity platform
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(builder.Configuration)
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddInMemoryTokenCaches();

builder.Services.AddControllersWithViews(options =>
{
    var policy = new AuthorizationPolicyBuilder()
        .RequireAuthenticatedUser()
        .Build();
    options.Filters.Add(new AuthorizeFilter(policy));
}).AddMicrosoftIdentityUI();

Selanjutnya, middleware perlu dikonfigurasi untuk mengaktifkan kemampuan autentikasi. Ganti kode lainnya dengan cuplikan berikut.

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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();

app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

UI harus diperbarui untuk memberikan pengalaman yang lebih ramah pengguna untuk masuk dan keluar. Bagian ini memperlihatkan cara membuat file baru yang menampilkan item navigasi berdasarkan status autentikasi pengguna. Kode membaca klaim token ID untuk memeriksa apakah pengguna diautentikasi dan menggunakan User.Claims untuk mengekstrak klaim token ID.

Buat file baru di Views/Shared dan beri nama _LoginPartial.cshtml.

Buka file dan tambahkan kode berikut untuk menambahkan pengalaman masuk dan keluar:

@using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity is not null && User.Identity.IsAuthenticated)
{
        <li class="nav-item">
            <span class="nav-link text-dark">Hello @User.Claims.First(c => c.Type == "preferred_username").Value!</span>
        </li>
        <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>

Buka Views/Shared/_Layout.cshtml dan tambahkan referensi untuk _LoginPartial dibuat di langkah sebelumnya. Tempatkan ini di dekat akhir kelas navbar-nav seperti yang ditunjukkan dalam cuplikan berikut:

<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>

Menggunakan domain URL kustom (Opsional)

Berlaku untuk: Lingkaran putih dengan simbol X berwarna abu-abu. Penyewa tenaga kerja Lingkaran hijau dengan simbol tanda centang putih. Penyewa eksternal (pelajari lebih lanjut)

Gunakan domain kustom untuk sepenuhnya memberi merek URL autentikasi. Dari perspektif pengguna, pengguna tetap berada di domain Anda selama proses autentikasi, daripada dialihkan ke nama domain ciamlogin.com.

Ikuti langkah-langkah ini untuk menggunakan domain kustom:

Gunakan langkah-langkah dalam Mengaktifkan domain URL kustom untuk aplikasi di penyewa eksternal untuk mengaktifkan domain URL kustom untuk penyewa eksternal Anda.
Buka file appsettings.json:
1. Perbarui parameter Instance dan TenantId ke properti Authority.
2. Tambahkan string berikut ke nilai Authority ke https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Ganti Enter_the_Custom_Domain_Here dengan domain URL kustom Anda dan Enter_the_Tenant_ID_Here dengan ID penyewa Anda. Jika Anda tidak memiliki ID penyewa, pelajari cara membaca detail penyewa Anda.
3. Tambahkan properti knownAuthorities dengan nilai [Enter_the_Custom_Domain_Here].

Setelah Anda membuat perubahan pada file appsettings.json Anda, jika domain URL kustom Anda login.contoso.com, dan ID penyewa Anda aaaabbbb-0000-cc-1111-dddd22222ee, maka file Anda akan terlihat mirip dengan cuplikan berikut:

{
  "AzureAd": {
    "Authority": "https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee",
    "ClientId": "Enter_the_Application_Id_Here",
    "ClientCertificates": [
      {
        "SourceType": "StoreWithThumbprint",
        "CertificateStorePath": "CurrentUser/My",
        "CertificateThumbprint": "AA11BB22CC33DD44EE55FF66AA77BB88CC99DD00"
      }   
    ],
    "CallbackPath": "/signin-oidc",
    "SignedOutCallbackPath": "/signout-callback-oidc",
    "KnownAuthorities": ["login.contoso.com"]
    ...

Menguji aplikasi web ASP.NET Core Anda

Bagikan melalui