Tutorial: Menyiapkan aplikasi web ASP.NET Core untuk autentikasi di penyewa eksternal

Artikel
06/29/2024

Tutorial ini adalah bagian 2 dari seri yang menunjukkan cara membangun aplikasi web ASP.NET Core dan menyiapkannya untuk autentikasi menggunakan pusat admin Microsoft Entra. Di Bagian 1 dari seri ini, Anda mendaftarkan aplikasi dan mengonfigurasi alur pengguna di penyewa eksternal Anda. Tutorial ini menunjukkan cara membuat aplikasi web ASP.NET Core, dan mengonfigurasinya untuk autentikasi.

Dalam tutorial ini Anda akan;

Membuat proyek ASP.NET Core di Visual Studio Code
Tambahkan paket NuGet yang diperlukan
Mengonfigurasi pengaturan untuk aplikasi
Menambahkan kode untuk menerapkan autentikasi

Prasyarat

Tutorial: Siapkan penyewa eksternal Anda untuk membangun aplikasi web ASP.NET Core.
Meskipun setiap lingkungan pengembangan terintegrasi (IDE) yang mendukung aplikasi ASP.NET Core dapat digunakan, tutorial ini menggunakan Visual Studio Code. Anda dapat mengunduhnya di sini.
.NET 7.0 SDK.

Membuat proyek ASP.NET Core

Buka Visual Studio Code, pilih Buka File>Folder.... Navigasi ke dan pilih lokasi untuk membuat proyek Anda.
Buka terminal baru dengan memilih Terminal> Terminal Baru.
Masukkan perintah berikut untuk membuat proyek Model View Controller (MVC) ASP.NET Core.
```
dotnet new mvc -n dotnetcore_webapp
```

Menginstal paket identitas

Paket NuGet terkait identitas harus diinstal dalam proyek untuk mengautentikasi pengguna.

Masukkan perintah berikut untuk mengubah ke folder dotnetcore_webapp dan instal paket NuGet yang relevan:
```
cd dotnetcore_webapp
dotnet add package Microsoft.Identity.Web.UI
```

Mengonfigurasi aplikasi untuk autentikasi

Buka file appsettings.json dan ganti kode yang ada dengan cuplikan berikut.
```
{
  "AzureAd": {
    "Authority": "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/",
    "ClientId": "Enter_the_Application_Id_Here",
    "ClientCredentials": [
      {
        "SourceType": "ClientSecret",
        "ClientSecret": "Enter_the_Client_Secret_Here"
      }
    ],
    "CallbackPath": "/signin-oidc",
    "SignedOutCallbackPath": "/signout-callback-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}
```
- Authority - Instans penyedia identitas dan audiens masuk untuk aplikasi. Ganti Enter_the_Tenant_Subdomain_Here dengan subdomain penyewa eksternal Anda. Untuk menemukan ini, pilih Gambaran Umum di menu bilah samping, lalu beralih ke tab Gambaran Umum. Temukan domain Utama, dalam formulir caseyjensen.onmicrosoft.com. Subdomain adalah caseyjensen.
- ClientId - Pengidentifikasi aplikasi, juga disebut sebagai klien. Ganti teks dalam tanda kutip dengan nilai ID Aplikasi (klien) yang direkam sebelumnya dari halaman gambaran umum aplikasi terdaftar.
- ClientSecret - Nilai rahasia klien yang Anda buat di Menyiapkan penyewa Anda. Ganti teks dalam tanda kutip dengan nilai rahasia klien di pusat admin Microsoft Entra.
- CallbackPath - Adalah pengidentifikasi untuk membantu server mengalihkan respons ke aplikasi yang sesuai.
Simpan perubahan pada file .
Buka file Properti/launchSettings.json.
Di bagian https profiles, ubah https URL sehingga applicationUrl berbunyi https://localhost:7274. Anda menggunakan URL ini untuk menentukan URI Pengalihan.
Simpan perubahan ke file Anda.

Menggunakan domain URL kustom (Opsional)

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 nilai properti ke Authority 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.
2. Tambahkan knownAuthorities properti 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 adalah aaaabbbb-0000-cc-1111-dddd2222eeee, 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",
    "ClientCredentials": [
      {
        "SourceType": "ClientSecret",
        "ClientSecret": "Enter_the_Client_Secret_Here"
      }
    ],
    "CallbackPath": "/signin-oidc",
    "SignedOutCallbackPath": "/signout-callback-oidc",
    "KnownAuthorities": ["login.contoso.com"]
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Menambahkan otorisasi ke HomeController.cs

File HomeController.cs berisi kode untuk halaman beranda aplikasi dan harus memiliki kemampuan untuk mengotorisasi pengguna. Namespace Microsoft.AspNetCore.Authorization menyediakan kelas dan antarmuka untuk menerapkan otorisasi ke aplikasi web, dan [Authorize] atribut digunakan untuk menentukan bahwa hanya pengguna yang diautentikasi yang dapat menggunakan aplikasi web.

Di editor kode Anda, buka file Controllers\HomeController.cs .
Otorisasi perlu ditambahkan ke pengontrol, tambahkan Microsoft.AspNetCore.Authorization sehingga bagian atas file identik dengan cuplikan berikut:
```
using System.Diagnostics;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using dotnetcore_webapp.Models;
```
Selain itu, tambahkan [Authorize] atribut tepat di atas HomeController definisi kelas.
```
[Authorize]
```

Menambahkan autentikasi dan otorisasi ke Program.cs

Program.cs perlu dimodifikasi untuk menambahkan autentikasi dan otorisasi ke aplikasi web. Ini termasuk menambahkan namespace layanan untuk autentikasi dan otorisasi, dan dapat memasukkan pengguna dengan platform identitas Microsoft.

Untuk menambahkan namespace yang diperlukan, buka Program.cs dan tambahkan cuplikan 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 ke aplikasi yang akan memungkinkan aplikasi web untuk memasukkan pengguna dengan platform identitas Microsoft. Anda dapat mengganti kode lainnya di Program.cs dengan cuplikan berikut:

var builder = WebApplication.CreateBuilder(args);

// 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.
// For instance, 'http://schemas.microsoft.com/ws/2008/06/identity/claims/role' instead of 'roles' claim.
// 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();

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();

Langkah selanjutnya

Langkah 3: Menambahkan masuk dan keluar ke aplikasi web ASP.NET Core untuk penyewa eksternal

Bagikan melalui