Mengamankan aplikasi ASP.NET Core Blazor WebAssembly yang dihosting dengan Identity Server

Important

Templat proyek Blazor WebAssembly yang dihosting dihapus dari kerangka kerja dengan rilis .NET 8 (November 2023). Panduan dalam artikel ini hanya didukung untuk .NET 7 atau yang lebih lama. Aplikasi Blazor WebAssembly yang dihosting dan diperbarui setiap rilis terus menerima dukungan produk. Sebagai alternatif, ubah struktur aplikasi menjadi aplikasi Blazor WebAssembly mandiri atau Blazor Web App.

Artikel ini menjelaskan cara membuat Blazor WebAssembly yang menggunakan Server Duende untuk mengautentikasi pengguna dan panggilan API.

Important

Perangkat Lunak Duende mungkin mengharuskan Anda membayar biaya lisensi untuk penggunaan produksi Server Identity Duende. Untuk informasi selengkapnya, lihat Migrasi dari ASP.NET Core di .NET 5 ke .NET 6.

Note

Untuk mengonfigurasi aplikasi mandiri atau di-host Blazor WebAssembly agar dapat menggunakan instans Server eksternal Identity yang sudah ada, ikuti panduan pada Mengamankan aplikasi mandiri ASP.NET Core Blazor WebAssembly dengan pustaka Autentikasi.

Untuk cakupan skenario keamanan tambahan setelah membaca artikel ini, lihat ASP.NET Core skenario keamanan tambahan.

Walkthrough

Sub-bagian dari walkthrough ini menjelaskan cara:

Blazor Membuat aplikasi
Menjalankan aplikasi

Untuk membuat proyek baru Blazor WebAssembly dengan mekanisme autentikasi:

Buat proyek baru.
Blazor WebAssembly Pilih templat Aplikasi. Pilih Selanjutnya.
Berikan Nama proyek tanpa menggunakan tanda hubung. Konfirmasikan bahwa Lokasi sudah benar. Pilih Selanjutnya.

Hindari menggunakan tanda hubung (-) dalam nama proyek yang merusak pembentukan pengidentifikasi aplikasi OIDC. Logika dalam templat proyek Blazor WebAssembly menggunakan nama proyek sebagai pengidentifikasi aplikasi OIDC dalam konfigurasi solusi, dan tanda hubung tidak diizinkan dalam pengidentifikasi aplikasi OIDC. Kasus Pascal (BlazorSample) atau garis bawah (Blazor_Sample) adalah alternatif yang dapat diterima.
Dalam dialog Informasi tambahan, pilih Akun Individual sebagai jenis Autentikasi untuk menyimpan pengguna dalam aplikasi menggunakan sistem ASP.NET CoreIdentity.
Pilih kotak centang ASP.NET Core Hosted .
Pilih tombol Buat untuk membuat aplikasi.

Untuk membuat proyek baru Blazor WebAssembly dengan mekanisme autentikasi di folder kosong, tentukan Individual mekanisme autentikasi dengan -au|--auth opsi untuk menyimpan pengguna dalam aplikasi menggunakan sistem ASP.NET Core Identity :

dotnet new blazorwasm -au Individual -ho -o {PROJECT NAME}

Placeholder	Example
`{PROJECT NAME}`	`BlazorSample`

Lokasi output yang ditentukan dengan opsi opsional -o|--output membuat folder proyek jika tidak ada dan menjadi bagian dari nama proyek.

Hindari menggunakan tanda hubung (-) dalam nama proyek yang merusak pembentukan pengidentifikasi aplikasi OIDC. Logika dalam templat proyek Blazor WebAssembly menggunakan nama proyek sebagai pengidentifikasi aplikasi OIDC dalam konfigurasi solusi, dan tanda hubung tidak diizinkan dalam pengidentifikasi aplikasi OIDC. Kasus Pascal (BlazorSample) atau garis bawah (Blazor_Sample) adalah alternatif yang dapat diterima.

Untuk informasi selengkapnya, lihat dotnet new perintah di Panduan .NET.

Menjalankan aplikasi

Jalankan aplikasi dari Server proyek. Saat menggunakan Visual Studio, baik itu:

Pilih panah dropdown di samping tombol Jalankan . Buka Konfigurasikan Proyek-Proyek Startup dari daftar dropdown. Pilih opsi proyek startup tunggal. Konfirmasi atau ubah proyek startup ke proyek Server.
Pastikan bahwa proyek ditandai Server di Penjelajah Solusi sebelum Anda memulai aplikasi dengan salah satu pendekatan berikut:
- Pilih tombol Jalankan.
- Gunakan Debug>Mulai Debugging dari menu.
- Tekan F5.
Di dalam shell perintah, arahkan ke folder proyek dari solusi Server. Jalankan dotnet watch perintah (atau dotnet run).

Bagian dari solusi

Bagian ini menjelaskan bagian solusi yang dihasilkan dari Blazor WebAssembly templat proyek dan menjelaskan bagaimana solusi Client dan Server proyek dikonfigurasi untuk referensi. Tidak ada panduan khusus untuk diikuti di bagian ini untuk aplikasi kerja dasar jika Anda membuat aplikasi menggunakan panduan di bagian Penelusuran . Panduan di bagian ini berguna untuk memperbarui aplikasi untuk mengautentikasi dan mengotorisasi pengguna. Namun, pendekatan alternatif untuk memperbarui aplikasi adalah membuat aplikasi baru dari panduan di bagian Penelusuran dan memindahkan komponen, kelas, dan sumber daya aplikasi ke aplikasi baru.

Server layanan aplikasi

Bagian ini berkaitan dengan aplikasi solusi Server .

Layanan berikut terdaftar.

Dalam file Program:

Entity Framework Core dan ASP.NET Core Identity:

builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlite( ... ));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();

builder.Services.AddDefaultIdentity<ApplicationUser>(options => 
        options.SignIn.RequireConfirmedAccount = true)
    .AddEntityFrameworkStores<ApplicationDbContext>();

IdentityServer dengan metode pembantu tambahan AddApiAuthorization yang menyiapkan konvensi default ASP.NET Core berdasarkan Identity Server:
```
builder.Services.AddIdentityServer()
    .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();
```
Autentikasi dengan metode pembantu tambahan AddIdentityServerJwt yang mengonfigurasi aplikasi untuk memvalidasi token JWT yang diproduksi oleh Identity Server:
```
builder.Services.AddAuthentication()
    .AddIdentityServerJwt();
```

Dalam Startup.ConfigureServices dari Startup.cs:
- Entity Framework Core dan ASP.NET Core Identity:
```
services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlite(
        Configuration.GetConnectionString("DefaultConnection")));

services.AddDefaultIdentity<ApplicationUser>(options => 
        options.SignIn.RequireConfirmedAccount = true)
    .AddEntityFrameworkStores<ApplicationDbContext>();
```
  Warning
  
  Jangan menyimpan rahasia aplikasi, string koneksi, kredensial, kata sandi, nomor identifikasi pribadi (PIN), kode C#/.NET privat, atau kunci/token privat dalam kode sisi klien, yang selalu tidak aman. Di lingkungan pengujian/penahapan dan produksi, kode sisi Blazor server dan API web harus menggunakan alur autentikasi aman yang menghindari mempertahankan kredensial dalam kode proyek atau file konfigurasi. Di luar pengujian pengembangan lokal, sebaiknya hindari penggunaan variabel lingkungan untuk menyimpan data sensitif, karena variabel lingkungan bukanlah pendekatan yang paling aman. Untuk pengujian pengembangan lokal, alat Secret Manager direkomendasikan untuk mengamankan data sensitif. Untuk informasi selengkapnya, lihat Mempertahankan data dan kredensial sensitif dengan aman.
- IdentityServer dengan metode pembantu tambahan AddApiAuthorization yang menyiapkan konvensi default ASP.NET Core berdasarkan Identity Server:
```
services.AddIdentityServer()
    .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();
```
- Autentikasi dengan metode pembantu tambahan AddIdentityServerJwt yang mengonfigurasi aplikasi untuk memvalidasi token JWT yang diproduksi oleh Identity Server:
```
services.AddAuthentication()
    .AddIdentityServerJwt();
```

Note

Ketika skema autentikasi tunggal terdaftar, skema autentikasi secara otomatis digunakan sebagai skema default aplikasi, dan tidak perlu menyatakan skema ke AddAuthentication atau melalui AuthenticationOptions. Untuk informasi selengkapnya, lihat Gambaran Umum Autentikasi ASP.NET Core dan ASP.NET Core pengumuman (aspnet/Pengumuman #490).

Dalam file Program:

Dalam Startup.Configure dari Startup.cs:

Identity Server Middleware mengekspos titik-titik akhir OpenID Connect (OIDC):
```
app.UseIdentityServer();
```

Middleware Autentikasi bertanggung jawab untuk memvalidasi kredensial permintaan dan mengatur pengguna pada konteks permintaan:
```
app.UseAuthentication();
```

Middleware otorisasi memungkinkan kemampuan otorisasi:
```
app.UseAuthorization();
```

Otorisasi API

Bagian ini berkaitan dengan aplikasi solusi Server .

Metode AddApiAuthorization pembantu Identity mengonfigurasi Server untuk skenario ASP.NET Core. Identity Server adalah kerangka kerja yang kuat dan dapat diperluas untuk menangani masalah keamanan aplikasi. Identity Server mengekspos kompleksitas yang tidak perlu untuk skenario yang paling umum. Akibatnya, serangkaian konvensi dan opsi konfigurasi disediakan yang kami pertimbangkan sebagai titik awal yang baik. Setelah kebutuhan autentikasi Anda berubah, kekuatan penuh Server Identity tersedia untuk menyesuaikan autentikasi agar sesuai dengan persyaratan aplikasi.

Tambahkan handler autentikasi untuk API yang berkoeksistensi dengan Identity Server

Bagian ini berkaitan dengan aplikasi solusi Server .

Metode pembantu AddIdentityServerJwt mengonfigurasi skema kebijakan untuk aplikasi sebagai penangan autentikasi default. Kebijakan dikonfigurasi untuk memungkinkan Identity menangani semua permintaan yang dirutekan ke subpath apa pun di Identity ruang URL di bawah /Identity. JwtBearerHandler menangani semua permintaan lainnya. Selain itu, metode ini:

Mendaftarkan sumber daya API dengan Identity Server dengan cakupan default {PROJECT NAME}API, di mana placeholder {PROJECT NAME} adalah nama proyek pada pembuatan aplikasi.
Mengonfigurasi Middleware Token Pembawa JWT untuk memvalidasi token yang dikeluarkan oleh Identity Server untuk aplikasi.

Pengontrol prakiraan cuaca

Bagian ini berkaitan dengan aplikasi solusi Server .

WeatherForecastController Di (Controllers/WeatherForecastController.cs), [Authorize] atribut diterapkan pada kelas. Atribut menunjukkan bahwa pengguna harus diotorisasi berdasarkan kebijakan default untuk mengakses sumber daya. Kebijakan otorisasi default dikonfigurasi untuk menggunakan skema autentikasi default, yang disiapkan oleh AddIdentityServerJwt. Metode pembantu mengonfigurasi JwtBearerHandler sebagai handler default untuk permintaan ke aplikasi.

Konteks database aplikasi

Bagian ini berkaitan dengan aplikasi solusi Server .

Dalam ApplicationDbContext (Data/ApplicationDbContext.cs), DbContext memperluas ApiAuthorizationDbContext<TUser> untuk menyertakan skema untuk Identity Server. ApiAuthorizationDbContext<TUser> berasal dari IdentityDbContext.

Untuk mendapatkan kontrol penuh atas skema database, warisi dari salah satu kelas yang tersedia IdentityDbContext dan konfigurasikan konteks untuk menyertakan Identity skema dengan memanggil builder.ConfigurePersistedGrantContext(_operationalStoreOptions.Value) dalam OnModelCreating metode .

Pengontrol konfigurasi OIDC

Bagian ini berkaitan dengan aplikasi solusi Server .

OidcConfigurationController Di (Controllers/OidcConfigurationController.cs), titik akhir klien disediakan untuk melayani parameter OIDC.

Pengaturan aplikasi

Bagian ini berkaitan dengan aplikasi solusi Server .

Dalam file pengaturan aplikasi (appsettings.json) di akar proyek, bagian IdentityServer menjelaskan daftar klien yang dikonfigurasi. Dalam contoh berikut, ada satu klien. Nama klien sesuai dengan nama assembly aplikasi Client dan dipetakan berdasarkan konvensi ke parameter OAuth ClientId. Profil menunjukkan jenis aplikasi yang sedang dikonfigurasi. Profil secara internal digunakan untuk mengarahkan konvensi yang menyederhanakan proses konfigurasi server.

"IdentityServer": {
  "Clients": {
    "{ASSEMBLY NAME}": {
      "Profile": "IdentityServerSPA"
    }
  }
}

Placeholder {ASSEMBLY NAME} adalah Client nama rakitan dari aplikasi (misalnya, BlazorSample.Client).

Paket autentikasi

Bagian ini berkaitan dengan aplikasi solusi Client .

Saat aplikasi dibuat untuk menggunakan Akun Individual (Individual), aplikasi secara otomatis menerima referensi paket untuk paket tersebut Microsoft.AspNetCore.Components.WebAssembly.Authentication . Paket ini menyediakan sekumpulan primitif yang membantu aplikasi mengautentikasi pengguna dan mendapatkan token untuk memanggil API yang dilindungi.

Jika menambahkan autentikasi ke aplikasi, tambahkan Microsoft.AspNetCore.Components.WebAssembly.Authentication paket secara manual ke aplikasi.

Note

Untuk panduan tentang menambahkan paket ke aplikasi .NET, lihat artikel di bagian Menginstal dan mengelola paket di Alur kerja konsumsi paket (dokumentasi NuGet). Konfirmasikan versi paket yang benar di NuGet.org.

`HttpClient` konfigurasi

Bagian ini berkaitan dengan aplikasi solusi Client .

Dalam file Program, HttpClient dikonfigurasi untuk menyediakan instans HttpClient yang menyertakan token akses saat membuat permintaan ke API server. Pada pembuatan solusi, yang diberi nama HttpClient adalah {PROJECT NAME}.ServerAPI, di mana placeholder {PROJECT NAME} adalah nama proyek.

builder.Services.AddHttpClient("{PROJECT NAME}.ServerAPI", 
        client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
    .CreateClient("{PROJECT NAME}.ServerAPI"));

Placeholder {PROJECT NAME} adalah nama proyek pada saat pembuatan solusi. Misalnya, memberikan nama proyek BlazorSample menghasilkan penamaan HttpClient dari BlazorSample.ServerAPI.

Note

Jika Anda mengonfigurasi aplikasi Blazor WebAssembly untuk menggunakan instans Server Identity yang ada yang bukan bagian dari solusi Blazor yang dihosting, ubah pendaftaran alamat dasar HttpClient dari IWebAssemblyHostEnvironment.BaseAddress (builder.HostEnvironment.BaseAddress) ke URL titik akhir otorisasi API aplikasi server.

Dukungan otorisasi API

Bagian ini berkaitan dengan aplikasi solusi Client .

Dukungan untuk mengautentikasi pengguna dicolokkan ke kontainer layanan dengan metode ekstensi yang disediakan di dalam Microsoft.AspNetCore.Components.WebAssembly.Authentication paket. Metode ini menyiapkan layanan yang diperlukan oleh aplikasi untuk berinteraksi dengan sistem otorisasi yang ada.

builder.Services.AddApiAuthorization();

Konfigurasi untuk aplikasi dimuat berdasarkan konvensi dari _configuration/{client-id}. Menurut konvensi, ID klien diatur ke nama rakitan aplikasi. URL ini dapat diubah untuk menunjuk ke titik akhir lain dengan memanggil metode overload dengan opsi.

`Imports` arsip

Bagian ini berkaitan dengan aplikasi solusi Client .

Namespace Microsoft.AspNetCore.Components.Authorization tersedia di seluruh aplikasi melalui _Imports.razor file:

...
@using Microsoft.AspNetCore.Components.Authorization
...

`Index` halaman

Bagian ini berkaitan dengan aplikasi solusi Client .

Halaman Indeks (wwwroot/index.html) menyertakan skrip yang menentukan AuthenticationService di JavaScript. AuthenticationService menangani detail tingkat rendah protokol OIDC. Aplikasi secara internal memanggil metode yang ditentukan dalam skrip untuk melakukan operasi autentikasi.

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

`App` komponen

Bagian ini berkaitan dengan aplikasi solusi Client .

Komponen App (App.razor) mirip dengan komponen yang ditemukan di aplikasi App

Komponen CascadingAuthenticationState mengatur menampilkan AuthenticationState ke bagian lain dari aplikasi.
Komponen AuthorizeRouteView memastikan bahwa pengguna saat ini diberikan izin untuk mengakses halaman tertentu atau komponen RedirectToLogin ditampilkan.
Komponen RedirectToLogin mengelola pengalihan pengguna yang tidak sah ke halaman masuk.

Karena perubahan dalam kerangka kerja di seluruh rilis ASP.NET Core, Razor markup untuk App komponen (App.razor) tidak ditampilkan di bagian ini. Untuk memeriksa markup komponen untuk rilis tertentu, gunakan salah satu pendekatan berikut:

Buat aplikasi yang disediakan untuk autentikasi dari templat proyek default Blazor WebAssembly untuk versi ASP.NET Core yang ingin Anda gunakan. Periksa komponen App (App.razor) di dalam aplikasi yang dihasilkan.
App Periksa komponen (App.razor) di sumber referensi. Pilih versi dari pemilih cabang, dan cari komponen di ProjectTemplates folder repositori karena App lokasi komponen telah berubah selama bertahun-tahun.

Note

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

`RedirectToLogin` komponen

Bagian ini berkaitan dengan aplikasi solusi Client .

Komponen RedirectToLogin (RedirectToLogin.razor):

Mengelola pengalihan pengguna yang tidak sah ke halaman masuk.
URL saat ini yang coba diakses pengguna dipertahankan oleh sehingga mereka dapat dikembalikan ke halaman tersebut jika autentikasi berhasil menggunakan:
- Status riwayat navigasi di ASP.NET Core di .NET 7 atau yang lebih baru.
- Kueri string di ASP.NET Core di .NET 6 atau sebelumnya.

RedirectToLogin Periksa komponen dalam sumber referensi. Lokasi komponen berubah dari waktu ke waktu, jadi gunakan alat pencarian GitHub untuk menemukan komponen.

Jalur masuk dapat disesuaikan oleh aplikasi (RemoteAuthenticationApplicationPathsOptions.LogInPath, default kerangka kerja (dotnet/aspnetcore sumber referensi)). Komponen templat RedirectToLogin proyek menggunakan jalur masuk default .authentication/login

Note

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Jika aplikasi menyesuaikan jalur masuk, lakukan salah satu pendekatan berikut:

Cocokkan jalur dalam string yang dikodekan secara permanen dalam RedirectToLogin komponen.
Injeksi RemoteAuthenticationOptions untuk mendapatkan nilai yang dikonfigurasi. Misalnya, ambil pendekatan ini saat Anda menyesuaikan jalur dengan AddApiAuthorization. Tambahkan arahan berikut di bagian RedirectToLogin atas komponen:
```
@using Microsoft.Extensions.Options
@inject IOptionsSnapshot<RemoteAuthenticationOptions<ApiAuthorizationProviderOptions>> RemoteOptions
```
Ubah pengalihan komponen dalam OnInitialized metode :
```
- Navigation.NavigateToLogin("authentication/login");
+ Navigation.NavigateToLogin(RemoteOptions.Get(Options.DefaultName)
+     .AuthenticationPaths.LogInPath);
```
Note

Jika jalur lain berbeda dari jalur templat proyek atau jalur default kerangka kerja, jalur tersebut harus dikelola dengan cara yang sama.

`LoginDisplay` komponen

Bagian ini berkaitan dengan aplikasi solusi Client .

Komponen LoginDisplay (LoginDisplay.razor) dirender dalam MainLayout komponen (MainLayout.razor) dan mengelola perilaku berikut:

Untuk pengguna terautentikasi:
- Menampilkan nama pengguna saat ini.
- Menawarkan tautan ke halaman profil pengguna di ASP.NET Core Identity.
- Menawarkan tombol untuk keluar dari aplikasi.
Untuk pengguna anonim:
- Menawarkan opsi untuk mendaftar.
- Menawarkan opsi untuk masuk.

Karena perubahan dalam kerangka kerja di seluruh rilis ASP.NET Core, Razor markup untuk LoginDisplay komponen tidak ditampilkan di bagian ini. Untuk memeriksa markup komponen untuk rilis tertentu, gunakan salah satu pendekatan berikut:

Buat aplikasi yang disediakan untuk autentikasi dari templat proyek default Blazor WebAssembly untuk versi ASP.NET Core yang ingin Anda gunakan. LoginDisplay Periksa komponen di aplikasi yang dihasilkan.
LoginDisplay Periksa komponen dalam sumber referensi. Lokasi komponen berubah dari waktu ke waktu, jadi gunakan alat pencarian GitHub untuk menemukan komponen. Konten templat yang digunakan untuk Hosted sama dengan true.

Note

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

`Authentication` komponen

Bagian ini berkaitan dengan aplikasi solusi Client .

Halaman yang dihasilkan oleh Authentication komponen (Pages/Authentication.razor) menentukan rute yang diperlukan untuk menangani tahap autentikasi yang berbeda.

Komponen RemoteAuthenticatorView :

Disediakan oleh paket Microsoft.AspNetCore.Components.WebAssembly.Authentication.
Mengelola tindakan yang sesuai pada setiap tahap autentikasi.

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string? Action { get; set; }
}

Note

Jenis referensi nullable (NRTs) dan analisis statis null-state oleh compiler .NET didukung di ASP.NET Core di .NET 6 atau yang lebih baru. Sebelum rilis ASP.NET Core di .NET 6, tipe tersebut muncul tanpa penunjukan tipe null (string).

`FetchData` komponen

Bagian ini berkaitan dengan aplikasi solusi Client .

Komponen FetchData menunjukkan cara:

Menyediakan token akses.
Gunakan token akses untuk memanggil API sumber daya yang dilindungi di aplikasi Server .

Arahan @attribute [Authorize] menunjukkan sistem Blazor WebAssembly otorisasi bahwa pengguna harus diotorisasi untuk mengunjungi komponen ini. Kehadiran atribut di Client aplikasi tidak mencegah API di server dipanggil tanpa kredensial yang tepat. Aplikasi Server juga harus menggunakan [Authorize] pada titik akhir yang sesuai untuk melindunginya dengan benar.

IAccessTokenProvider.RequestAccessToken mengurus permintaan token akses yang dapat ditambahkan ke permintaan untuk memanggil API. Jika token di-cache atau layanan dapat menyediakan token akses baru tanpa interaksi pengguna, permintaan token berhasil. Jika tidak, permintaan token gagal dengan AccessTokenNotAvailableException, yang tertangkap dalam pernyataan try-catch.

Untuk mendapatkan token aktual untuk disertakan dalam permintaan, aplikasi harus memeriksa apakah permintaan berhasil dengan memanggil tokenResult.TryGetToken(out var token).

Jika permintaan berhasil, variabel token diisi dengan token akses. Properti AccessToken.Value dari token mengekspos string literal untuk disertakan dalam header permintaan Authorization.

Jika token tidak dapat disediakan tanpa interaksi pengguna yang mengakibatkan permintaan gagal:

ASP.NET Core di .NET 7 atau yang lebih baru: Aplikasi menavigasi ke AccessTokenResult.InteractiveRequestUrl menggunakan AccessTokenResult.InteractionOptions yang diberikan untuk memungkinkan memperbarui token akses.
ASP.NET Core pada .NET 6 atau versi sebelumnya: Hasil token tersebut mengandung URL pengalihan. Menavigasi ke URL ini membawa pengguna ke halaman masuk dan kembali ke halaman saat ini setelah autentikasi berhasil.

@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using {APP NAMESPACE}.Shared
@attribute [Authorize]
@inject HttpClient Http

...

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

Azure App Service di Linux

Tentukan pengeluar sertifikat secara eksplisit saat menyebarkan ke Azure App Service di Linux. Untuk informasi selengkapnya, lihat Menggunakan Identity untuk mengamankan backend API Web untuk SPAs.

Klaim nama dan peran dengan otorisasi API

Pabrik Pengguna Kustom

Di aplikasi Client, buat pengaturan pengguna khusus. Identity Server mengirimkan beberapa peran dalam bentuk array JSON dalam satu role klaim. Satu peran tunggal dikirim sebagai nilai string dalam klaim. Pabrik membuat klaim individual role untuk setiap peran pengguna.

CustomUserFactory.cs:

using System.Security.Claims;
using System.Text.Json;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;

public class CustomUserFactory(IAccessTokenProviderAccessor accessor)
    : AccountClaimsPrincipalFactory<RemoteUserAccount>(accessor)
{
    public override async ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var user = await base.CreateUserAsync(account, options);

        if (user.Identity is not null && user.Identity.IsAuthenticated)
        {
            var identity = (ClaimsIdentity)user.Identity;
            var roleClaims = identity.FindAll(identity.RoleClaimType).ToArray();

            if (roleClaims.Any())
            {
                foreach (var existingClaim in roleClaims)
                {
                    identity.RemoveClaim(existingClaim);
                }

                var rolesElem = 
                    account.AdditionalProperties[identity.RoleClaimType];

                if (options.RoleClaim is not null && rolesElem is JsonElement roles)
                {
                    if (roles.ValueKind == JsonValueKind.Array)
                    {
                        foreach (var role in roles.EnumerateArray())
                        {
                            var roleValue = role.GetString();

                            if (!string.IsNullOrEmpty(roleValue))
                            {
                                identity.AddClaim(
                                  new Claim(options.RoleClaim, roleValue));
                            }
        
                        }
                    }
                    else
                    {
                        var roleValue = roles.GetString();

                        if (!string.IsNullOrEmpty(roleValue))
                        {
                            identity.AddClaim(
                              new Claim(options.RoleClaim, roleValue));
                        }
                    }
                }
            }
        }

        return user;
    }
}

Di aplikasi Client, daftarkan pabrik di file Program.

builder.Services.AddApiAuthorization()
    .AddAccountClaimsPrincipalFactory<CustomUserFactory>();

Di aplikasi Server, panggil AddRoles pada Identity penyusun, yang menambahkan layanan terkait peran.

Dalam file Program:

using Microsoft.AspNetCore.Identity;

...

builder.Services.AddDefaultIdentity<ApplicationUser>(options => 
    options.SignIn.RequireConfirmedAccount = true)
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>();

Di Startup.cs:

using Microsoft.AspNetCore.Identity;

...

services.AddDefaultIdentity<ApplicationUser>(options => 
    options.SignIn.RequireConfirmedAccount = true)
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>();

Konfigurasi Identity Server

Gunakan salah satu pendekatan berikut:

Opsi otorisasi API
Layanan Profil

Opsi otorisasi API

Dalam aplikasi Server:

Konfigurasikan Identity Server untuk memasukkan klaim name dan role ke dalam token ID dan token akses.
Cegah pemetaan bawaan untuk peran di pengelola token JWT.

Dalam file Program:

using System.IdentityModel.Tokens.Jwt;

...

builder.Services.AddIdentityServer()
    .AddApiAuthorization<ApplicationUser, ApplicationDbContext>(options => {
        options.IdentityResources["openid"].UserClaims.Add("name");
        options.ApiResources.Single().UserClaims.Add("name");
        options.IdentityResources["openid"].UserClaims.Add("role");
        options.ApiResources.Single().UserClaims.Add("role");
    });

JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Remove("role");

Di Startup.cs:

using System.IdentityModel.Tokens.Jwt;
using System.Linq;

...

services.AddIdentityServer()
    .AddApiAuthorization<ApplicationUser, ApplicationDbContext>(options => {
        options.IdentityResources["openid"].UserClaims.Add("name");
        options.ApiResources.Single().UserClaims.Add("name");
        options.IdentityResources["openid"].UserClaims.Add("role");
        options.ApiResources.Single().UserClaims.Add("role");
    });

JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Remove("role");

Layanan Profil

Di aplikasi Server, buat implementasi ProfileService.

ProfileService.cs:

using IdentityModel;
using Duende.IdentityServer.Models;
using Duende.IdentityServer.Services;

public class ProfileService : IProfileService
{
    public ProfileService()
    {
    }

    public async Task GetProfileDataAsync(ProfileDataRequestContext context)
    {
        var nameClaim = context.Subject.FindAll(JwtClaimTypes.Name);
        context.IssuedClaims.AddRange(nameClaim);

        var roleClaims = context.Subject.FindAll(JwtClaimTypes.Role);
        context.IssuedClaims.AddRange(roleClaims);

        await Task.CompletedTask;
    }

    public async Task IsActiveAsync(IsActiveContext context)
    {
        await Task.CompletedTask;
    }
}

Server Di aplikasi, daftarkan Layanan Profil dalam Program file:

using Duende.IdentityServer.Services;

...

builder.Services.AddTransient<IProfileService, ProfileService>();

JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Remove("role");

Di aplikasi Server, daftarkan Layanan Profil di Startup.ConfigureServices dari Startup.cs:

using IdentityServer4.Services;

...

services.AddTransient<IProfileService, ProfileService>();

JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Remove("role");

Menggunakan mekanisme otorisasi

Client Di aplikasi, pendekatan otorisasi komponen berfungsi pada saat ini. Salah satu mekanisme otorisasi dalam komponen dapat menggunakan peran untuk mengotorisasi pengguna:

AuthorizeView komponen (Contoh: <AuthorizeView Roles="Admin">)
[Authorize] atribut direktif (AuthorizeAttribute) (Contoh: @attribute [Authorize(Roles = "Admin")])
Logika prosedural (Contoh: if (user.IsInRole("Admin")) { ... })

Beberapa uji peran didukung:
```
if (user.IsInRole("Admin") && user.IsInRole("Developer"))
{
    ...
}
```

User.Identity.Name diisi dengan nama pengguna di aplikasi Client, yang biasanya merupakan alamat email masuk mereka.

`UserManager` dan `SignInManager`

Atur jenis klaim pengidentifikasi pengguna saat aplikasi Server memerlukan:

UserManager<TUser> atau SignInManager<TUser> di titik akhir API.
IdentityUser detail, seperti nama pengguna, alamat email, atau waktu akhir penguncian.

Di Program.cs untuk ASP.NET Core di .NET 6 atau yang lebih baru:

using System.Security.Claims;

...

builder.Services.Configure<IdentityOptions>(options => 
    options.ClaimsIdentity.UserIdClaimType = ClaimTypes.NameIdentifier);

Di Startup.ConfigureServices untuk .NET 5 atau yang lebih lama:

using System.Security.Claims;

...

services.Configure<IdentityOptions>(options => 
    options.ClaimsIdentity.UserIdClaimType = ClaimTypes.NameIdentifier);

Berikut ini WeatherForecastController mencatat UserName ketika metode Get dipanggil.

Note

Contoh berikut menggunakan:

Namespace cakupan file , yang merupakan fitur dari C# 10 atau lebih baru (.NET 6 atau lebih baru).
Konstruktor utama , yang merupakan fitur C# 12 atau yang lebih baru (.NET 8 atau yang lebih baru).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Identity;
using Microsoft.Extensions.Logging;
using BlazorSample.Server.Models;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers;

[Authorize]
[ApiController]
[Route("[controller]")]
public class WeatherForecastController(ILogger<WeatherForecastController> logger, 
        UserManager<ApplicationUser> userManager) : ControllerBase
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", 
        "Balmy", "Hot", "Sweltering", "Scorching"
    };

    [HttpGet]
    public async Task<IEnumerable<WeatherForecast>> Get()
    {
        var rng = new Random();

        var user = await userManager.GetUserAsync(User);

        if (user != null)
        {
            logger.LogInformation("User.Identity.Name: {UserIdentityName}", user.UserName);
        }

        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateTime.Now.AddDays(index),
            TemperatureC = rng.Next(-20, 55),
            Summary = Summaries[rng.Next(Summaries.Length)]
        })
        .ToArray();
    }
}

Dalam contoh sebelumnya:

Namespace Server proyek adalah BlazorSample.Server.
Namespace Shared proyek adalah BlazorSample.Shared.

Host di Azure App Service dengan domain dan sertifikat kustom

Panduan berikut menjelaskan:

Cara menerapkan aplikasi Blazor WebAssembly yang dihosting dengan Identity Server ke Azure App Service dengan domain kustom.
Cara membuat dan menggunakan sertifikat TLS untuk komunikasi protokol HTTPS dengan browser. Meskipun panduan berfokus pada penggunaan sertifikat dengan domain kustom, panduan ini sama-sama berlaku untuk menggunakan domain Azure Apps default, misalnya contoso.azurewebsites.net.

Untuk skenario hosting ini, jangan gunakan sertifikat yang sama untuk kunci penandatanganan token Duende Identity Server dan komunikasi aman HTTPS situs dengan browser.

Menggunakan sertifikat yang berbeda untuk kedua persyaratan ini adalah praktik keamanan yang baik karena mengisolasi kunci privat untuk setiap tujuan.
Sertifikat TLS untuk komunikasi dengan browser dikelola secara independen tanpa memengaruhi penandatanganan Identity token Server.
Saat Azure Key Vault menyediakan sertifikat ke aplikasi App Service untuk pengikatan domain kustom, Identity Server tidak dapat memperoleh sertifikat yang sama dari Azure Key Vault untuk penandatanganan token. Meskipun mengonfigurasi Identity Server untuk menggunakan sertifikat TLS yang sama dari jalur fisik dimungkinkan, menempatkan sertifikat keamanan ke dalam kontrol sumber adalah praktik yang buruk dan harus dihindari dalam sebagian besar skenario.

Dalam panduan berikut, sertifikat yang ditandatangani sendiri dibuat di Azure Key Vault hanya untuk Identity penandatanganan token Server. Konfigurasi Identity Server menggunakan sertifikat Key Vault melalui penyimpanan sertifikat aplikasi CurrentUser>My. Sertifikat lain yang digunakan untuk lalu lintas HTTPS dengan domain kustom dibuat dan dikonfigurasi secara terpisah dari Identity sertifikat penandatanganan Server.

Untuk mengonfigurasi aplikasi, Azure App Service, dan Azure Key Vault untuk dihosting dengan domain kustom dan HTTPS:

Buat App Service plan dengan tingkat paket Basic B1 atau lebih tinggi. App Service memerlukan Basic B1 tingkat layanan atau lebih tinggi untuk menggunakan domain kustom.
Buat sertifikat PFX untuk komunikasi browser aman situs (protokol HTTPS) dengan nama umum nama domain situs yang sepenuhnya memenuhi syarat (FQDN) yang dikontrol organisasi Anda (misalnya, www.contoso.com). Buat sertifikat dengan:
- Penggunaan kunci
  - Validasi tanda tangan digital (digitalSignature)
  - Penyandian kunci (keyEncipherment)
- Penggunaan kunci yang ditingkatkan/diperluas
  - Autentikasi Klien (1.3.6.1.5.5.7.3.2)
  - Autentikasi Server (1.3.6.1.5.5.7.3.1)
Untuk membuat sertifikat, gunakan salah satu pendekatan berikut atau alat atau layanan online lain yang sesuai:
Catat kata sandi, yang digunakan nanti untuk mengimpor sertifikat ke Azure Key Vault.

Untuk informasi selengkapnya tentang sertifikat Azure Key Vault, lihat Azure Key Vault: Sertifikat.
Buat Azure Key Vault baru atau gunakan brankas kunci yang sudah ada di langganan Azure Anda.
Di area Sertifikat brankas kunci, impor sertifikat situs PFX. Catat sidik jari sertifikat, yang digunakan dalam konfigurasi aplikasi nanti.
Di Azure Key Vault, buat sertifikat baru yang ditandatangani sendiri untuk Identity penandatanganan token Server. Berikan sertifikat sebuah Nama Sertifikat dan Subjek. Subjek ditentukan sebagai CN={COMMON NAME}, di mana {COMMON NAME} placeholder adalah nama umum sertifikat. Nama umum dapat berupa string alfanumerik apa pun. Misalnya, CN=IdentityServerSigning adalah Subjek Sertifikat yang valid. Dalam Kebijakan Penerbitan>Konfigurasi Kebijakan Lanjutan, gunakan pengaturan default. Catat sidik jari sertifikat, yang digunakan dalam konfigurasi aplikasi nanti.
Navigasi ke Azure App Service di portal Azure dan buat App Service baru dengan konfigurasi berikut:
- Terbitkan disetel ke Code.
- Tumpukan runtime diatur ke runtime aplikasi.
- Untuk Sku dan ukuran, konfirmasikan bahwa tingkat App Service adalah Basic B1 atau lebih tinggi. App Service memerlukan Basic B1 tingkat layanan atau lebih tinggi untuk menggunakan domain kustom.
Setelah Azure membuat App Service, buka Konfigurasi aplikasi dan tambahkan pengaturan aplikasi baru yang menentukan thumbprint sertifikat yang direkam sebelumnya. Kunci pengaturan aplikasi adalah WEBSITE_LOAD_CERTIFICATES. Pisahkan sidik jari sertifikat pada nilai pengaturan aplikasi dengan koma, seperti ditunjukkan oleh contoh berikut:
- Kunci: WEBSITE_LOAD_CERTIFICATES
- Nilai: 57443A552A46DB...D55E28D412B943565,29F43A772CB6AF...1D04F0C67F85FB0B1
Di portal Azure, menyimpan pengaturan aplikasi adalah proses dua langkah: Simpan WEBSITE_LOAD_CERTIFICATES pengaturan kunci-nilai, lalu pilih tombol Simpan di bagian atas bilah.
Pilih pengaturan TLS/SSL aplikasi. Pilih Sertifikat Kunci Privat (.pfx). Gunakan proses Impor Sertifikat Key Vault. Gunakan proses dua kali untuk mengimpor sertifikat situs untuk komunikasi HTTPS dan sertifikat penandatanganan token Server yang ditandatangani Identity sendiri.
Navigasikan ke bilah Domain kustom. Di situs web pencatat domain Anda, gunakan alamat IP dan ID Verifikasi Domain Kustom untuk mengonfigurasi domain. Konfigurasi domain umum meliputi:
- Catatan A dengan Host dan sebuah nilai alamat IP dari portal Azure.
- Catatan TXT dengan Host berupa asuid dan nilai ID verifikasi yang dihasilkan oleh Azure dan disediakan oleh portal Azure.
Pastikan Anda menyimpan perubahan di situs web pencatat domain Anda dengan benar. Beberapa situs web pencatat memerlukan proses dua langkah untuk menyimpan rekaman domain: Satu atau beberapa rekaman disimpan satu per satu diikuti dengan memperbarui pendaftaran domain dengan tombol terpisah.
Kembali ke bilah Domain kustom di portal Azure. Pilih Tambahkan domain kustom. Pilih opsi Rekaman A. Berikan domain dan pilih Validasi. Jika rekaman domain sudah benar dan disebarluaskan di internet, portal memungkinkan Anda memilih tombol Tambahkan domain kustom.

Diperlukan waktu beberapa hari agar perubahan pendaftaran domain disebarluaskan di seluruh server nama domain Internet (DNS) setelah diproses oleh pencatat domain Anda. Jika catatan domain tidak diperbarui dalam waktu tiga hari kerja, konfirmasikan catatan diatur dengan benar dengan pencatat domain dan hubungi dukungan pelanggan mereka.
Di bilah Domain kustom, STATUS SSL untuk domain ditandai Not Secure. Pilih tautan Tambahkan pengikatan. Pilih sertifikat HTTPS situs dari brankas kunci untuk pengikatan domain kustom.
Di Visual Studio, buka file pengaturan aplikasi proyek Server (appsettings.json atau appsettings.Production.json). Identity Di konfigurasi Server, tambahkan bagian berikutKey. Tentukan sertifikat yang ditandatangani sendiri dengan Subjek untuk kunci Name. Dalam contoh berikut, nama umum sertifikat yang ditetapkan dalam brankas kunci adalah IdentityServerSigning, yang menghasilkan Subjek :CN=IdentityServerSigning
```
"IdentityServer": {

  ...

  "Key": {
    "Type": "Store",
    "StoreName": "My",
    "StoreLocation": "CurrentUser",
    "Name": "CN=IdentityServerSigning"
  }
},
```
Di Visual Studio, buat profil penerbitan Azure App Service untuk proyek Server. Dari bilah menu, pilih: Build>Publikasi>Baru>Azure>Layanan Aplikasi Azure (Windows atau Linux). Saat Visual Studio tersambung ke langganan Azure, Anda dapat mengatur Tampilan sumber daya Azure menurut jenis Sumber Daya. Jelajahi daftar Aplikasi Web untuk menemukan App Service untuk aplikasi dan memilihnya. Pilih Selesai.
Saat Visual Studio kembali ke Jendela Terbitkan, dependensi layanan Key Vault dan database SQL Server terdeteksi secara otomatis.

Tidak ada perubahan konfigurasi pada pengaturan default yang diperlukan untuk layanan brankas kunci.

Untuk tujuan pengujian, database SQLite lokal aplikasi, yang dikonfigurasi oleh templat Blazor, dapat disebarkan dengan aplikasi tanpa konfigurasi tambahan. Mengonfigurasi database yang berbeda untuk Identity Server dalam lingkungan produksi masuk ke luar cakupan artikel ini. Untuk informasi selengkapnya, lihat sumber daya database dalam kumpulan dokumentasi berikut ini:
- Layanan Aplikasi
- Duende Identity Server
Pilih tautan Edit di bawah nama profil penyebaran di bagian atas jendela. Ubah URL tujuan ke URL domain kustom situs (misalnya, https://www.contoso.com). Simpan pengaturan.
Menerbitkan aplikasi. Visual Studio membuka jendela browser dan meminta situs di domain kustomnya.

Dokumentasi Azure berisi detail tambahan tentang menggunakan layanan Azure dan domain kustom dengan pengikatan TLS di App Service, termasuk informasi tentang menggunakan catatan CNAME alih-alih catatan A. Untuk informasi selengkapnya, lihat sumber daya berikut:

Sebaiknya gunakan jendela browser mode privat baru (misalnya, mode Microsoft Edge InPrivate atau mode Google Chrome Incognito) untuk setiap pengujian aplikasi yang dijalankan setelah perubahan pada aplikasi, konfigurasi aplikasi, atau layanan Azure di portal Azure. Sisa-sisa cookie dari uji coba sebelumnya dapat menyebabkan kegagalan autentikasi atau otorisasi saat menguji situs, meskipun konfigurasi situs sudah benar. Untuk informasi selengkapnya tentang cara mengonfigurasi Visual Studio untuk membuka jendela browser privat baru untuk setiap eksekusi pengujian, lihat bagian Cookie dan data situs.

Saat konfigurasi App Service diubah dalam portal Azure, pembaruan umumnya berlaku dengan cepat tetapi tidak instan. Terkadang, Anda harus menunggu beberapa saat agar App Service dimulai ulang agar perubahan konfigurasi berlaku.

Jika Anda sedang melakukan pemecahan masalah terkait pemuatan sertifikat penandatanganan kunci Server, jalankan perintah berikut di shell perintah PowerShell Kudu dalam portal Azure. Perintah ini menyediakan daftar sertifikat yang dapat diakses aplikasi dari penyimpanan sertifikat CurrentUser>My. Output mencakup subjek sertifikat dan sidik jari yang berguna saat melakukan debugging pada aplikasi.

Get-ChildItem -path Cert:\CurrentUser\My -Recurse | Format-List DnsNameList, Subject, Thumbprint, EnhancedKeyUsageList

Troubleshoot

Logging

Untuk mengaktifkan pengelogan debug atau pelacakan untuk Blazor WebAssembly autentikasi, lihat bagian Pengelogan autentikasi klien pada pengelogan ASP.NET Core Blazor dengan pengaturan pemilih versi artikel ke ASP.NET Core di .NET 7 atau yang lebih baru.

Kesalahan umum

Kesalahan konfigurasi aplikasi atau Identity Penyedia (IP)

Kesalahan yang paling umum disebabkan oleh konfigurasi yang salah. Berikut ini adalah beberapa contohnya:
- Bergantung pada persyaratan skenario, Otoritas, Instans, ID Penyewa, DOMAIN Penyewa, ID Klien, atau URI Pengalihan yang hilang atau salah mencegah aplikasi mengautentikasi klien.
- Cakupan permintaan yang salah mencegah klien mengakses titik akhir API web server.
- Izin API server yang salah atau hilang mencegah klien mengakses titik akhir API web server.
- Menjalankan aplikasi di port yang berbeda dari yang dikonfigurasi dalam Redirect URI pada pendaftaran aplikasi dengan alamat IP. Perhatikan bahwa port tidak diperlukan untuk Microsoft Entra ID dan aplikasi yang berjalan di alamat pengujian pengembangan localhost, tetapi konfigurasi port aplikasi dan port tempat aplikasi berjalan harus cocok untuk non-alamat localhost.
Bagian konfigurasi dari panduan artikel ini menunjukkan contoh konfigurasi yang benar. Periksa dengan cermat setiap bagian artikel yang mencari kesalahan konfigurasi aplikasi dan IP.

Jika konfigurasi tampaknya benar:
- Menganalisis log aplikasi.
- Periksa lalu lintas jaringan antara aplikasi klien dan IP atau aplikasi server dengan alat pengembang browser. Seringkali, pesan kesalahan yang tepat atau pesan dengan petunjuk tentang apa yang menyebabkan masalah dikembalikan ke klien oleh IP atau aplikasi server setelah membuat permintaan. Panduan alat pengembang dapat ditemukan dalam artikel berikut:
  - Google Chrome (dokumentasi Google)
  - Microsoft Edge
  - Mozilla Firefox (dokumentasi Mozilla)
- Untuk rilis Blazor di mana JSON Web Token (JWT) digunakan, dekode konten token yang digunakan untuk mengautentikasi klien atau mengakses API web server, tergantung di mana masalah terjadi. Untuk informasi selengkapnya, lihat Memeriksa konten JSON Web Token (JWT).
Tim dokumentasi menanggapi umpan balik dokumen dan bug dalam artikel (buka masalah dari bagian Umpan balik halaman ini) tetapi tidak dapat memberikan dukungan produk. Beberapa forum dukungan publik tersedia untuk membantu memecahkan masalah aplikasi. Kami merekomendasikan hal-hal berikut:
Forum sebelumnya tidak dimiliki atau dikendalikan oleh Microsoft.

Untuk laporan bug kerangka kerja non-keamanan, non-sensitif, dan non-rahasia yang dapat direproduksi, ajukan laporan masalah ke tim pengembangan ASP.NET Core. Jangan buka masalah dengan unit produk sampai Anda menyelidiki penyebab masalah secara menyeluruh dan tidak dapat menyelesaikannya sendiri dan dengan bantuan komunitas di forum dukungan publik. Unit produk tidak dapat memecahkan masalah aplikasi individual yang rusak karena kesalahan konfigurasi sederhana atau kasus penggunaan yang melibatkan layanan pihak ketiga. Jika laporan bersifat sensitif atau rahasia atau menggambarkan potensi kelemahan keamanan dalam produk yang dapat dieksploitasi oleh penyidik cyber, lihat Melaporkan masalah keamanan dan bug (dotnet/aspnetcore repositori GitHub).
Pengguna tidak sah untuk ME-ID

info: Otorisasi Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] gagal. Persyaratan ini tidak terpenuhi: DenyAnonymousAuthorizationRequirement: Memerlukan pengguna yang diautentikasi.

Kesalahan panggilan balik masuk dari ME-ID:
- Kesalahan: unauthorized_client
- Deskripsi: AADB2C90058: The provided application is not configured to allow public clients.
Untuk mengatasi masalah ini:
1. Di portal Azure, akses manifes aplikasi.
2. Atur atribut ke allowPublicClientnull atau true.

Cookie dan data situs

Cookie dan data situs dapat bertahan di seluruh pembaruan aplikasi dan mengganggu pengujian dan pemecahan masalah. Hapus hal berikut saat membuat perubahan kode aplikasi, perubahan akun pengguna dengan penyedia, atau perubahan konfigurasi aplikasi penyedia:

Cookie masuk pengguna
Cookie aplikasi
Data situs yang di-cache dan disimpan

Salah satu pendekatan untuk mencegah cookie dan data situs yang masih ada mengganggu pengujian dan pemecahan masalah adalah dengan:

Mengonfigurasi browser
- Gunakan browser untuk pengujian yang dapat Anda konfigurasi untuk menghapus semua cookie dan data situs setiap kali browser ditutup.
- Pastikan browser ditutup secara manual atau oleh IDE untuk setiap perubahan pada aplikasi, pengguna uji, atau konfigurasi penyedia.
Gunakan perintah khusus untuk membuka browser dalam mode InPrivate atau mode penyamaran di Visual Studio.
- Buka kotak dialog Telusuri Dengan dari tombol Jalankan Visual Studio.
- Pilih tombol Tambahkan.
- Berikan jalur ke browser Anda di bidang Program . Jalur yang dapat dieksekusi berikut adalah lokasi penginstalan umum untuk Windows 10. Jika browser Anda diinstal di lokasi yang berbeda atau Anda tidak menggunakan Windows 10, berikan jalur ke file eksekusi browser.
  - Microsoft Edge: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
  - Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
  - Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
- Pada kolom Argumen, berikan opsi baris perintah yang dipakai oleh browser untuk membuka dalam mode InPrivate atau Incognito. Beberapa browser memerlukan URL aplikasi.
  - Microsoft Edge: Gunakan -inprivate.
  - Google Chrome: Gunakan --incognito --new-window {URL}, di mana {URL} merupakan placeholder untuk URL yang akan dibuka (misalnya, https://localhost:5001).
  - Mozilla Firefox: Gunakan -private -url {URL}, di mana {URL} tempat penampung adalah URL yang akan dibuka (misalnya, https://localhost:5001).
- Berikan nama ramah di bidang Nama. Contohnya,Firefox Auth Testing.
- Pilih tombol OK.
- Untuk menghindari harus memilih profil browser untuk setiap iterasi pengujian dengan aplikasi, atur profil sebagai default dengan tombol Atur sebagai Default .
- Pastikan IDE menutup browser untuk perubahan apa pun pada aplikasi, pengguna pengujian, atau konfigurasi penyedia.

Peningkatan aplikasi

Aplikasi yang berfungsi mungkin gagal segera setelah meningkatkan .NET SDK pada komputer pengembangan atau mengubah versi paket dalam aplikasi. Dalam beberapa kasus, paket yang tidak melekat dapat merusak aplikasi saat melakukan peningkatan besar. Sebagian besar masalah ini dapat diperbaiki dengan mengikuti instruksi berikut:

Hapus cache paket NuGet sistem lokal dengan mengeksekusi dotnet nuget locals all --clear dari antarmuka baris perintah.
Hapus folder bin dan obj dari proyek.
Pulihkan dan bangun ulang proyek.
Hapus semua file di folder penyebaran di server sebelum menyebarkan ulang aplikasi.

Note

Penggunaan versi paket yang tidak kompatibel dengan kerangka kerja target aplikasi tidak didukung. Untuk mendapatkan informasi tentang sebuah paket, gunakan NuGet Gallery.

`Server` Menjalankan aplikasi

Saat menguji dan memecahkan masalah Blazor WebAssemblysolusi yang dihosting, pastikan Anda menjalankan aplikasi dari proyek Server.

Memeriksa pengguna

Komponen berikut User dapat digunakan langsung di aplikasi atau berfungsi sebagai dasar untuk penyesuaian lebih lanjut.

User.razor:

@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService

<h1>@AuthenticatedUser?.Identity?.Name</h1>

<h2>Claims</h2>

@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
    <p class="claim">@(claim.Type): @claim.Value</p>
}

<h2>Access token</h2>

<p id="access-token">@AccessToken?.Value</p>

<h2>Access token claims</h2>

@foreach (var claim in GetAccessTokenClaims())
{
    <p>@(claim.Key): @claim.Value.ToString()</p>
}

@if (AccessToken != null)
{
    <h2>Access token expires</h2>

    <p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
    <p id="access-token-expires">@AccessToken.Expires</p>

    <h2>Access token granted scopes (as reported by the API)</h2>

    @foreach (var scope in AccessToken.GrantedScopes)
    {
        <p>Scope: @scope</p>
    }
}

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationState { get; set; }

    public ClaimsPrincipal AuthenticatedUser { get; set; }
    public AccessToken AccessToken { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var state = await AuthenticationState;
        var accessTokenResult = await AuthorizationService.RequestAccessToken();

        if (!accessTokenResult.TryGetToken(out var token))
        {
            throw new InvalidOperationException(
                "Failed to provision the access token.");
        }

        AccessToken = token;

        AuthenticatedUser = state.User;
    }

    protected IDictionary<string, object> GetAccessTokenClaims()
    {
        if (AccessToken == null)
        {
            return new Dictionary<string, object>();
        }

        // header.payload.signature
        var payload = AccessToken.Value.Split(".")[1];
        var base64Payload = payload.Replace('-', '+').Replace('_', '/')
            .PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');

        return JsonSerializer.Deserialize<IDictionary<string, object>>(
            Convert.FromBase64String(base64Payload));
    }
}

Pemeriksaan isi dari JSON Web Token (JWT)

Untuk mendekode JSON Web Token (JWT), gunakan alat jwt.ms Microsoft. Nilai di UI tidak pernah meninggalkan browser Anda.

Contoh JWT yang dikodekan (disingkat untuk tampilan):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Contoh JWT yang didekodekan oleh alat untuk aplikasi yang mengautentikasi terhadap Azure AAD B2C:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/11112222-bbbb-3333-cccc-4444dddd5555/v2.0/",
  "sub": "aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
  "aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "nonce": "bbbb0000-cccc-1111-dddd-2222eeee3333",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Sumber daya tambahan

Penyebaran ke Azure App Service
Mengimpor sertifikat dari Key Vault (dokumentasi Azure)
Skenario keamanan tambahan Blazor WebAssembly ASP.NET Core
Permintaan API web yang tidak terautentikasi atau tidak diizinkan dalam aplikasi dengan klien default yang aman
Konfigurasikan ASP.NET Core untuk bekerja dengan server proksi dan load balancer: Mencakup panduan tentang:
- Menggunakan Forwarded Headers Middleware untuk mempertahankan informasi skema HTTPS di seluruh server proksi dan jaringan internal.
- Skenario dan kasus penggunaan tambahan, termasuk konfigurasi skema manual, perubahan jalur permintaan untuk perutean permintaan yang tepat, dan meneruskan skema permintaan untuk proksi terbalik Linux dan non-IIS.
Duende Identity Server

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-11-11

Bagikan melalui

Mengamankan aplikasi ASP.NET Core Blazor WebAssembly yang dihosting dengan Identity Server

Walkthrough

Buatlah Blazor aplikasi

Menjalankan aplikasi

Bagian dari solusi

Server layanan aplikasi

Otorisasi API

Tambahkan handler autentikasi untuk API yang berkoeksistensi dengan Identity Server

Pengontrol prakiraan cuaca

Konteks database aplikasi

Pengontrol konfigurasi OIDC

Pengaturan aplikasi

Paket autentikasi

HttpClient konfigurasi

Dukungan otorisasi API

Imports arsip

Index halaman

App komponen

RedirectToLogin komponen

LoginDisplay komponen

Authentication komponen

FetchData komponen

Azure App Service di Linux

Klaim nama dan peran dengan otorisasi API

Pabrik Pengguna Kustom

Konfigurasi Identity Server

Opsi otorisasi API

Layanan Profil

Menggunakan mekanisme otorisasi

UserManager dan SignInManager

Host di Azure App Service dengan domain dan sertifikat kustom

Troubleshoot

Logging

Kesalahan umum

Cookie dan data situs

Peningkatan aplikasi

Server Menjalankan aplikasi

Memeriksa pengguna

Pemeriksaan isi dari JSON Web Token (JWT)

Sumber daya tambahan

Saran dan Komentar

Sumber Daya Tambahan:

`HttpClient` konfigurasi

`Imports` arsip

`Index` halaman

`App` komponen

`RedirectToLogin` komponen

`LoginDisplay` komponen

`Authentication` komponen

`FetchData` komponen

`UserManager` dan `SignInManager`

`Server` Menjalankan aplikasi