Mengamankan aplikasi mandiri ASP.NET Core Blazor WebAssembly dengan Microsoft Entra ID

Note

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 10 dari artikel ini.

Warning

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Artikel ini menjelaskan cara membuat aplikasi mandiri Blazor WebAssembly yang menggunakan MICROSOFT Entra ID (ME-ID) untuk autentikasi.

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

Walkthrough

Bagian panduan ini menjelaskan cara:

Membuat penyewa di Azure
Mendaftarkan aplikasi di Azure
Blazor Membuat aplikasi
Menjalankan aplikasi

Membuat penyewa di Azure

Ikuti panduan di Langkah Cepat: Menyiapkan entitas guna membuat entitas di ME-ID.

Mendaftarkan aplikasi di Azure

Daftarkan aplikasi ME-ID:

Navigasikan ke ID Microsoft Entra di portal Azure. Pilih Aplikasi> Pendaftaran aplikasi di bilah samping. Pilih tombol Pendaftaran baru.
Berikan Nama untuk aplikasi (misalnya, Blazor Mandiri ME-ID).
Pilih Jenis akun yang didukung. Anda dapat memilih Akun di direktori organisasi ini hanya untuk pengalaman ini.
Atur Dropdown URI pengalihan ke Aplikasi halaman tunggal (SPA) dan berikan URI pengalihan berikut: https://localhost/authentication/login-callback. Jika Anda mengetahui URI pengalihan produksi untuk host default Azure (misalnya, azurewebsites.net) atau host domain kustom (misalnya, contoso.com), Anda juga dapat menambahkan URI pengalihan produksi pada saat yang sama saat Anda menyediakan localhost URI pengalihan. Pastikan untuk menyertakan nomor port untuk port non-:443 dalam URI pengalihan di lingkungan produksi yang Anda tambahkan.
Jika Anda menggunakan domain penerbit yang belum diverifikasi, kosongkan kotak centang Permissions>Grant admin consent to openid and offline_access permissions. Jika domain penerbit diverifikasi, kotak centang ini tidak ada.
Pilih Daftarkan.

Note

Tidak diperlukan menyediakan nomor port untuk URI pengalihan ME-ID localhost. Untuk informasi selengkapnya, lihat Pembatasan dan batasan URI Pengalihan (URL balasan): pengecualian untuk localhost (Dokumentasi Entra).

Catat informasi berikut:

ID Aplikasi (klien) (misalnya, 00001111-aaaa-2222-bbbb-3333cccc4444)
ID direktori (penyewa) (misalnya, aaaabbbb-0000-cccc-1111-dddd2222eeee)

Dalam Autentikasi>konfigurasi platform>aplikasi satu halaman:

Pastikan URI pengalihan https://localhost/authentication/login-callback ada.
Di bagian Implicit grant, pastikan bahwa kotak centang untuk Token Akses dan Token ID tidak dipilih. Pemberian implisit tidak disarankan untuk Blazor aplikasi yang menggunakan MSAL v2.0 atau versi yang lebih baru. Untuk informasi selengkapnya, lihat Mengamankan ASP.NET Core Blazor WebAssembly.
Pengaturan bawaan yang tersisa untuk aplikasi ini dapat diterima untuk pengalaman ini.
Pilih tombol Simpan jika Anda membuat perubahan.

Blazor Membuat aplikasi

Buat aplikasi di folder kosong. Ganti placeholder dalam perintah berikut dengan informasi yang direkam sebelumnya dan jalankan perintah di shell perintah.

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" -o {PROJECT NAME} --tenant-id "{TENANT ID}"

Placeholder	Nama portal Microsoft Azure	Example
`{PROJECT NAME}`	—	`BlazorSample`
`{CLIENT ID}`	Aplikasi (ID klien)	`00001111-aaaa-2222-bbbb-3333cccc4444`
`{TENANT ID}`	ID Direktori (penyewa)	`aaaabbbb-0000-cccc-1111-dddd2222eeee`

Lokasi output yang ditentukan dengan opsi -o|--output membuat folder proyek jika belum ada dan menjadikannya bagian dari nama proyek.

Tambahkan MsalProviderOptions untuk izin User.Read dengan DefaultAccessTokenScopes:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes
        .Add("https://graph.microsoft.com/User.Read");
});

Menjalankan aplikasi

Gunakan salah satu pendekatan berikut untuk menjalankan aplikasi:

Visual Studio
- Pilih tombol Jalankan.
- Gunakan Debug>Mulai Debugging dari menu.
- Tekan F5.
Shell perintah .NET CLI: Jalankan dotnet watch (atau dotnet run) dari folder aplikasi.

Bagian aplikasi

Bagian ini menjelaskan bagian aplikasi yang dihasilkan dari Blazor WebAssembly templat proyek dan cara aplikasi dikonfigurasi. 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.

Paket autentikasi

Saat aplikasi dibuat untuk menggunakan Akun Kerja atau Sekolah (SingleOrg), aplikasi secara otomatis menerima referensi paket untuk Microsoft Authentication Library (Microsoft.Authentication.WebAssembly.Msal). 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.Authentication.WebAssembly.Msal 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.

Paket Microsoft.Authentication.WebAssembly.Msal secara transitif menambahkan Microsoft.AspNetCore.Components.WebAssembly.Authentication paket ke aplikasi.

Dukungan layanan autentikasi

Dukungan untuk mengautentikasi pengguna terdaftar dalam kontainer layanan menggunakan metode ekstensi AddMsalAuthentication yang disediakan oleh paket Microsoft.Authentication.WebAssembly.Msal. Metode ini menyiapkan layanan yang diperlukan agar aplikasi berinteraksi dengan Identity Penyedia (IP).

Dalam file Program:

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});

Metode ini AddMsalAuthentication menerima panggilan balik untuk mengonfigurasi parameter yang diperlukan untuk mengautentikasi aplikasi. Nilai yang diperlukan untuk mengonfigurasi aplikasi dapat diperoleh dari konfigurasi ME-ID saat Anda mendaftarkan aplikasi.

`wwwroot/appsettings.json` konfigurasi

Konfigurasi disediakan oleh wwwroot/appsettings.json file:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

Example:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/e86c78e2-...-918e0565a45e",
    "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "ValidateAuthority": true
  }
}

Cakupan token untuk akses

Blazor WebAssembly Templat tidak secara otomatis mengonfigurasi aplikasi untuk meminta token akses untuk API yang aman. Untuk menyediakan token akses sebagai bagian dari alur masuk, tambahkan cakupan ke cakupan token akses default dari MsalProviderOptions:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Tentukan cakupan tambahan dengan AdditionalScopesToConsent:

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Note

AdditionalScopesToConsent tidak dapat menyediakan izin pengguna yang didelegasikan untuk Microsoft Graph melalui UI persetujuan ID Microsoft Entra saat pengguna pertama kali menggunakan aplikasi yang terdaftar di Microsoft Azure. Untuk informasi selengkapnya, lihat Menggunakan Graph API dengan ASP.NET Core Blazor WebAssembly.

Untuk informasi selengkapnya, lihat sumber daya berikut:

Kerangka kerja secara default menggunakan mode masuk pop-up dan kembali ke mode masuk pengalihan otomatis jika pop-up tidak dapat dibuka. Konfigurasikan MSAL untuk menggunakan mode login pengalihan dengan mengatur properti LoginMode ke MsalProviderOptions:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

Pengaturan default adalah popup, dan nilai string tidak peka terhadap huruf besar atau kecil.

Mengimpor file

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

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

Halaman indeks

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.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

Komponen aplikasi

Komponen App (App.razor) mirip dengan komponen App yang ditemukan dalam aplikasi Blazor Server.

Komponen AuthorizeRouteView memastikan bahwa pengguna saat ini berwenang untuk mengakses halaman tertentu atau sebaliknya merender komponen RedirectToLogin.
Komponen RedirectToLogin mengelola pengalihan pengguna yang tidak sah ke halaman masuk.

Komponen CascadingAuthenticationState mengelola memaparkan AuthenticationState ke bagian lainnya dari aplikasi.
Komponen AuthorizeRouteView memastikan bahwa pengguna saat ini berwenang untuk mengakses halaman tertentu atau sebaliknya merender komponen RedirectToLogin.
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 folder dalam repositori karena telah berpindah 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 rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Komponen RedirectToLogin

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:
- Keadaan riwayat navigasi di ASP.NET Core di .NET 7 atau yang lebih baru.
- Parameter kueri di ASP.NET Core versi .NET 6 atau yang lebih lama.

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 rilis tertentu, gunakan daftar 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.

Komponen LoginDisplay

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 sama dengan Hosted digunakan untuk 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 rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Komponen autentikasi

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

Nullable reference types (NRTs) dan .NET compiler null-state static analysis didukung di ASP.NET Core pada .NET 6 atau yang lebih baru. Sebelum rilis ASP.NET Core di .NET 6, string tipe muncul tanpa penunjukan tipe null (?).

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 URI Pengalihan pendaftaran aplikasi milik 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 sesuai untuk alamat selain 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 tampak 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 ke unit produk 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).
Klien yang 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:

Konfigurasi peramban
- 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 kustom untuk membuka peramban dalam mode InPrivate atau 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
- Di bidang Argumen, berikan opsi baris perintah yang digunakan browser untuk membuka dalam mode InPrivate atau Penyamaran. Beberapa browser memerlukan URL aplikasi.
  - Microsoft Edge: Gunakan -inprivate.
  - Google Chrome: Gunakan --incognito --new-window {URL}, yang {URL} placeholder adalah URL untuk dibuka (misalnya, https://localhost:5001).
  - Mozilla Firefox: Gunakan -private -url {URL}, di mana tempat penampung {URL} adalah URL yang akan dibuka (misalnya, https://localhost:5001).
- Berikan nama di bidang Nama yang mudah diingat. 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 browser ditutup secara otomatis oleh IDE untuk setiap perubahan pada aplikasi, pengguna pengujian, atau pengaturan penyedia layanan.

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 menjalankan dotnet nuget locals all --clear dari perintah shell.
Hapus folder bin dan obj milik 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 sebuah Blazor WebAssemblysolusi yang dihosting, pastikan Anda menjalankan aplikasi dari Server proyek.

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

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

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-11-11

Bagikan melalui

Mengamankan aplikasi mandiri ASP.NET Core Blazor WebAssembly dengan Microsoft Entra ID

Walkthrough

Membuat penyewa di Azure

Mendaftarkan aplikasi di Azure

Blazor Membuat aplikasi

Menjalankan aplikasi

Bagian aplikasi

Paket autentikasi

Dukungan layanan autentikasi

wwwroot/appsettings.json konfigurasi

Cakupan token untuk akses

Mode masuk

Mengimpor file

Halaman indeks

Komponen aplikasi

Komponen RedirectToLogin

Komponen LoginDisplay

Komponen autentikasi

Troubleshoot

Logging

Kesalahan umum

Cookie dan data situs

Peningkatan aplikasi

Server Menjalankan aplikasi

Memeriksa pengguna

Memeriksa konten JSON Web Token (JWT)

Sumber daya tambahan

Saran dan Komentar

Sumber Daya Tambahan:

`wwwroot/appsettings.json` konfigurasi

`Server` Menjalankan aplikasi