Skydda en värdbaserad ASP.NET Core Blazor WebAssembly-app med Microsoft Entra-ID

Den här artikeln beskriver hur du skapar en värdbaserad Blazor WebAssembly lösning som använder Microsoft Entra-ID (ME-ID) för autentisering. Den här artikeln fokuserar på en enskild hyresgästapp med en Azure-appregistrering för en enda hyresgäst.

Den här artikeln beskriver inte en ME-ID registrering för flera klientorganisationer. Mer information finns i Hur du gör din applikation för flera hyresgäster.

Den här artikeln fokuserar på användningen av en Microsoft Entra-klientorganisation enligt beskrivningen i Snabbstart: Konfigurera en klientorganisation. Om appen är registrerad i en Azure Active Directory B2C- klientorganisation, enligt beskrivningen i Självstudie: Skapa en Azure Active Directory B2C-klientorganisation men följer riktlinjerna i den här artikeln hanteras app-ID-URI:n på olika sätt av ME-ID. Mer information finns i avsnittet Användning av en Azure Active Directory B2C-klientorganisation i den här artikeln.

Efter att ha läst den här artikeln kan du hitta ytterligare säkerhetsscenariotäckning i ASP.NET Core Blazor WebAssembly ytterligare säkerhetsscenarier.

Walkthrough

Underavsnitten i genomgången förklarar hur du:

• Skapa en klient i Azure
• Registrera en server-API-app i Azure
• Registrera en klientapp i Azure
• Skapa Blazor-appen
• Ändra konfigurationen för Serverappsettings.json
• Ändra standardschemat för åtkomsttokensomfång
• Kör appen

Skapa en klient i Azure

Följ riktlinjerna i Snabbstart: Konfigurera en klientorganisation för att skapa en klientorganisation i ME-ID.

Registrera en server-API-app i Azure

Registrera en ME-ID-app för Server API-appen:

1. Gå till Microsoft Entra-ID i Azure-portalen. Välj Applikationer>Appregistreringar i sidofältet. Välj knappen Ny registrering.
2. Ange ett Namn för appen (till exempel Blazor Server ME-ID).
3. Välj en kontotyper som stöds. Du kan välja Konton endast i den här organisationskatalogen (enskild organisation) för den här upplevelsen.
4. Server API-appen kräver inte någon omdirigerings-URI i det här scenariot, så låt Välj en plattform listrutan vara avmarkerad och ange inte en omdirigerings-URI.
5. Den här artikeln förutsätter att appen är registrerad i en Microsoft Entra- klientorganisation. Om appen är registrerad i en Azure Active Directory B2C- klientorganisation visas kryssrutan Behörigheter>för att bevilja administratörsmedgivande till openid- och offline_access-behörigheter, och den är markerad. Avmarkera kryssrutan för att inaktivera inställningen. När du använder en Azure Active Directory- klientorganisation finns inte kryssrutan.
6. Välj Registrera.

Registrera följande information:

• Server API-app Program -ID (klient) (till exempel 00001111-aaaa-2222-bbbb-3333cccc4444)
• Katalog (hyresgäst) ID (till exempel, aaaabbbb-0000-cccc-1111-dddd2222eeee)
• ME-ID domänen Primary/Publisher/Tenant (till exempel contoso.onmicrosoft.com): Domänen är tillgänglig som Publisher-domän på bladet Branding i Azure-portalen för den registrerade appen.

I API-behörighetertar du bort behörigheten Microsoft Graph>User.Read eftersom server-API-appen inte kräver ytterligare API-åtkomst för att bara logga in användare och anropa server-API-slutpunkter.

I Exponera ett API-:

1. Bekräfta eller lägg till app-ID-URI:n i formatet api://{SERVER API APP CLIENT ID}.
2. Välj Lägg till ett omfång.
3. Välj Spara och fortsätt.
4. Ange ett omfångsnamn (till exempel API.Access).
5. Ange ett visningsnamn för administratörsmedgivande (till exempel Access API).
6. Ange en administratörstillståndsbeskrivning (till exempel Allows the app to access server app API endpoints.).
7. Bekräfta att State är inställt på Aktiverad.
8. Välj Lägg till omfång.

Registrera följande information:

• App-ID URI GUID (till exempel registrera 00001111-aaaa-2222-bbbb-3333cccc4444 från app-ID-URI:n för api://00001111-aaaa-2222-bbbb-3333cccc4444)
• Omfångsnamn (till exempel API.Access)

Registrera en klientapp i Azure

Registrera en ME-ID-app för -klientappen:

1. Gå till Microsoft Entra ID i Azure-portalen. Välj Appregistreringar i sidofältet. Välj knappen Ny registrering.
2. Ange ett Namn för appen (till exempel Blazor Klient ME-ID).
3. Välj en kontotyper som stöds. Du kan välja Konton endast i den här organisationskatalogen (enskild organisation) för den här upplevelsen.
4. Ställ in listrutan Omdirigerings-URI på ensidesprogram (SPA) och ange följande omdirigerings-URI: https://localhost/authentication/login-callback. Om du känner till omdirigerings-URI för produktion för Azure-standardvärd (till exempel azurewebsites.net) eller en anpassad domänvärd (till exempel contoso.com) kan du också lägga till omdirigerings-URI:n för produktion samtidigt som du anger localhost-omdirigerings-URI:n. Se till att inkludera portnumret för icke-:443 portar i eventuella omdirigerings-URI:er för produktion som du lägger till.
5. Den här artikeln förutsätter att appen är registrerad i en Microsoft Entra- klientorganisation. Om appen är registrerad i en Azure Active Directory B2C- klientorganisation visas kryssrutan Behörigheter>för att bevilja administratörsmedgivande till openid- och offline_access-behörigheter, och den är markerad. Avmarkera kryssrutan för att inaktivera inställningen. När du använder en Azure Active Directory- klientorganisation finns inte kryssrutan.
6. Välj Registrera.

Registrera appens ID (klient) Client (till exempel 11112222-bbbb-3333-cccc-4444dddd5555).

I Autentisering>Plattformkonfigurationer>Single-page-applikation:

1. Bekräfta att omdirigerings-URI:n för https://localhost/authentication/login-callback finns.
2. I avsnittet Implicit beviljande kontrollerar du att kryssrutorna för Åtkomsttoken och ID-token inte är markerade. Implicit tilldelning rekommenderas inte för Blazor-appar som använder MSAL v2.0 eller senare. Mer information finns i Secure ASP.NET Core Blazor WebAssembly.
3. De återstående standardvärdena för appen är acceptabla för den här upplevelsen.
4. Välj knappen Spara om du har gjort ändringar.

I API-behörigheter:

1. Bekräfta att appen har behörigheten Microsoft Graph>User.Read.
2. Välj Lägg till en behörighet följt av Mina API:er.
3. Välj Server API-appen från kolumnen Name (till exempel Blazor Server ME-ID). Du måste vara ägare till appregistreringen (och API-appregistreringen om det är en separat app) för att kunna se API:et i Mina API:er i Azure-portalen. Mer information finns i Tilldela programägare (Microsoft Entra-dokumentation).
4. Öppna listan API.
5. Aktivera åtkomst till API:et (till exempel API.Access).
6. Välj Lägg till behörigheter.
7. Välj knappen Bevilja administratörsmedgivande för {KLIENTNAMN}. Välj Ja för att bekräfta.

Skapa Blazor-appen

I en tom mapp ersätter du platshållarna i följande kommando med informationen som registrerats tidigare och kör kommandot i ett kommandogränssnitt:

dotnet new blazorwasm -au SingleOrg --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI GUID}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {PROJECT NAME} --tenant-id "{TENANT ID}"

Den utdataplats som anges med alternativet -o|--output skapar en projektmapp om den inte finns och blir en del av projektets namn. Undvik att använda bindestreck (-) i appnamnet som bryter bildandet av OIDC-appidentifieraren (se föregående VARNING).

Kör appen

Kör appen från Server-projektet. När du använder Visual Studio, gör antingen följande:

• Välj listrutepilen bredvid knappen Kör. Öppna Konfigurera startprojekt från listrutan. Välj alternativet Enstaka startprojekt. Bekräfta eller ändra startprojektet till projekt Server.

• Bekräfta att Server projektet är markerat i Solution Explorer innan du startar appen med någon av följande metoder:

  • Välj knappen Kör.
  • Använd Felsök>Börja Felsök från menyn.
  • Tryck på F5.

• I ett kommandogränssnitt navigerar du till Server projektmappen för lösningen. Kör kommandot dotnet watch (eller dotnet run).

Konfigurera User.Identity.Name

Vägledningen i det här avsnittet täcker valfri fyllning av User.Identity.Name med värdet från name-kravet.

API:et för Server-appen fyller User.Identity.Name med värdet från http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name kravtyp (till exempel bbbb0000-cccc-1111-dddd-2222eeee3333@contoso.onmicrosoft.com).

Så här konfigurerar du appen för att ta emot värdet från name anspråkstyp:

• Lägg till ett namnområde för Microsoft.AspNetCore.Authentication.JwtBearer i filen Program:

  using Microsoft.AspNetCore.Authentication.JwtBearer;
  

• Konfigurera TokenValidationParameters.NameClaimType för JwtBearerOptions.

  builder.Services.Configure<JwtBearerOptions>(
      JwtBearerDefaults.AuthenticationScheme, options =>
      {
          options.TokenValidationParameters.NameClaimType = "name";
      });
  

Delar av lösningen

I det här avsnittet beskrivs de delar av en lösning som genereras från Blazor WebAssembly-projektmallen och beskriver hur lösningens Client- och Server-projekt konfigureras som referens. Det finns ingen specifik vägledning att följa i det här avsnittet för ett grundläggande arbetsprogram om du har skapat appen med hjälp av vägledningen i avsnittet Genomgång. Vägledningen i det här avsnittet är användbar för att uppdatera en app för att autentisera och auktorisera användare. En alternativ metod för att uppdatera en app är dock att skapa en ny app från vägledningen i avsnittet Genomgång och flytta appens komponenter, klasser och resurser till den nya appen.

appsettings.json konfiguration

Det här avsnittet gäller lösningens Server app.

Filen appsettings.json innehåller alternativen för att konfigurera JWT-ägarhanteraren som används för att verifiera åtkomsttoken. Lägg till följande AzureAd konfigurationsavsnitt:

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "{TENANT DOMAIN}",
    "TenantId": "{TENANT ID}",
    "ClientId": "{SERVER API APP CLIENT ID}",
    "CallbackPath": "/signin-oidc",
    "Scopes": "{SCOPES}"
  }
}

Example:

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "contoso.onmicrosoft.com",
    "TenantId": "aaaabbbb-0000-cccc-1111-dddd2222eeee",
    "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "CallbackPath": "/signin-oidc",
    "Scopes": "API.Access"
  }
}

Autentiseringspaket

Det här avsnittet gäller lösningens Server app.

Stödet för att autentisera och auktorisera anrop till ASP.NET Core-webb-API:er med Microsofts identitetsplattform tillhandahålls av Microsoft.Identity.Web-paketet.

Den Server appen för en värdbaserad Blazor lösning som skapats från Blazor WebAssembly-mallen innehåller Microsoft.Identity.Web.UI-paketet. Paketet lägger till användargränssnitt för användarautentisering i webbappar och används inte av Blazor ramverket. Om den Server appen inte används för att autentisera användare direkt är det säkert att ta bort paketreferensen från Server-appens projektfil.

Stöd för autentiseringstjänst

Det här avsnittet gäller lösningens Server app.

Metoden AddAuthentication konfigurerar autentiseringstjänster i appen och konfigurerar JWT Bearer-hanteraren som standardautentiseringsmetod. Metoden AddMicrosoftIdentityWebApi konfigurerar tjänster för att skydda webb-API:et med Microsoft identity platform v2.0. Den här metoden förväntar sig ett AzureAd avsnitt i appens konfiguration med nödvändiga inställningar för att initiera autentiseringsalternativ.

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAd"));

UseAuthentication och UseAuthorization säkerställer att:

• Appen försöker parsa och verifiera token på inkommande begäranden.
• Alla begäranden som försöker komma åt en skyddad resurs utan rätt autentiseringsuppgifter misslyckas.

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

WeatherForecast styrenhet

Det här avsnittet gäller lösningens Server app.

WeatherForecast-kontrollen (Controllers/WeatherForecastController.cs) exponerar ett skyddat API med [Authorize]-attributet tillämpat på kontrollen. Det är viktigt att förstå:

• Attributet [Authorize] i den här API-kontrollanten är det enda som skyddar api:et från obehörig åtkomst.
• Attributet [Authorize] som används i Blazor WebAssembly-appen fungerar bara som ett tips till appen om att användaren ska ha behörighet för att appen ska fungera korrekt.

[Authorize]
[ApiController]
[Route("[controller]")]
[RequiredScope(RequiredScopesConfigurationKey = "AzureAd:Scopes")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        ...
    }
}

wwwroot/appsettings.json konfiguration

Det här avsnittet gäller lösningens Client app.

Konfigurationen tillhandahålls av wwwroot/appsettings.json-filen:

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

Example:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/e86c78e2-...-918e0565a45e",
    "ClientId": "11112222-bbbb-3333-cccc-4444dddd5555",
    "ValidateAuthority": true
  }
}

Autentiseringspaket

Det här avsnittet gäller lösningens Client app.

När en app skapas för att använda arbets- eller skolkonton (SingleOrg) får appen automatiskt en paketreferens för Microsoft Authentication Library (Microsoft.Authentication.WebAssembly.Msal). Paketet innehåller en uppsättning primitiver som hjälper appen att autentisera användare och hämta token för att anropa skyddade API:er.

Om du lägger till autentisering i en app lägger du till Microsoft.Authentication.WebAssembly.Msal-paketet manuellt i appen.

Paketet Microsoft.Authentication.WebAssembly.Msal lägger transitivt till paketet Microsoft.AspNetCore.Components.WebAssembly.Authentication i appen.

Stöd för autentiseringstjänst

Det här avsnittet gäller lösningens Client app.

Stöd för HttpClient-instanser har lagts till och inkluderar åtkomsttoken för att göra begäranden till Server-appen.

Program I filen:

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

Platshållaren {PROJECT NAME} är projektnamnet när lösningen skapas. Om du till exempel anger ett projektnamn för BlazorSample skapas en namngiven HttpClient av BlazorSample.ServerAPI.

Stödfunktioner för autentisering av användare är registrerade i tjänstcontainern med utbyggnadsmetoden AddMsalAuthentication som tillhandahålls av Microsoft.Authentication.WebAssembly.Msal-paketet. Den här metoden konfigurerar de tjänster som krävs för att appen ska interagera med Identity Provider (IP).

Program I filen:

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

Metoden AddMsalAuthentication accepterar ett återanrop för att konfigurera de parametrar som krävs för att autentisera en app. De värden som krävs för att konfigurera appen kan hämtas från Azure Portal ME-ID konfiguration när du registrerar appen.

Åtkomsttokensomfång

Det här avsnittet gäller lösningens Client app.

De förvalda åtkomsttokensomfången representerar listan över åtkomsttokensomfången som är:

• Ingår i inloggningsbegäran.
• Används för att etablera en åtkomsttoken omedelbart efter autentiseringen.

Ytterligare omfång kan läggas till efter behov i Program-filen:

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

Ange ytterligare omfång med AdditionalScopesToConsent:

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

Exempel på standardomfång för åtkomsttoken:

options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "api://00001111-aaaa-2222-bbbb-3333cccc4444/API.Access");

Mer information finns i följande avsnitt i artikeln Ytterligare scenarier:

• Begär ytterligare åtkomsttoken
• Bifoga tokens till utgående begäranden

Inloggningsläge

Det här avsnittet gäller lösningens Client app.

Ramverket använder som standard popup-inloggningsläge och återgår till omdirigeringsinloggningsläge om ett popup-fönster inte kan öppnas. Konfigurera MSAL att använda omdirigeringsinloggningsläge genom att ange egenskapen LoginMode för MsalProviderOptions till redirect:

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

Standardinställningen är popupoch strängvärdet är inte skiftlägeskänsligt.

Importerar fil

Det här avsnittet gäller lösningens Client app.

Namnområdet Microsoft.AspNetCore.Components.Authorization görs tillgängligt i hela appen via _Imports.razor-filen:

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

Indexsida

Det här avsnittet gäller lösningens Client app.

Sidan Index (wwwroot/index.html) innehåller ett skript som definierar AuthenticationService i JavaScript. AuthenticationService hanterar lågnivåinformationen för OIDC-protokollet. Appen anropar internt metoder som definierats i skriptet för att utföra autentiseringsåtgärderna.

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

Appkomponent

Det här avsnittet gäller lösningens Client app.

Komponenten App (App.razor) liknar den App komponent som finns i Blazor Server appar:

• Komponenten CascadingAuthenticationState hanterar att exponera AuthenticationState för resten av appen.
• Komponenten AuthorizeRouteView ser till att den aktuella användaren har behörighet att komma åt en viss sida eller på annat sätt renderar RedirectToLogin komponenten.
• Komponenten RedirectToLogin hanterar omdirigering av obehöriga användare till inloggningssidan.

På grund av ändringar mellan versioner av ASP.NET Core visas inte Razor markup för App-komponenten (App.razor) i det här avsnittet. Om du vill kontrollera komponentens markering för en viss version använder du antingen av följande metoder:

• Skapa en app som är konfigurerad för autentisering från standardprojektmallen Blazor WebAssembly för den version av ASP.NET Core som du planerar att använda. Granska komponenten App (App.razor) i den genererade appen.

• Granska komponenten App (App.razor) i referenskälla. Välj versionen från grenväljaren och sök efter komponenten i ProjectTemplates-mappen på lagringsplatsen eftersom App komponentens plats har ändrats under åren.

  Note

  Dokumentationslänkar till .NET-referenskällan läser vanligtvis in lagringsplatsens standardgren, vilket representerar den aktuella utvecklingen för nästa version av .NET. Om du vill välja en tagg för en specifik version använder du listrutan Välj bland grenar eller taggar. Mer information finns i Så här väljer du en versionstagg för ASP.NET Core-källkod (dotnet/AspNetCore.Docs #26205).

RedirectToLogin-komponent

Det här avsnittet gäller lösningens Client app.

Komponenten RedirectToLogin (RedirectToLogin.razor):

• Hanterar omdirigering av obehöriga användare till inloggningssidan.
• Den aktuella URL:en som användaren försöker komma åt underhålls för att användaren ska kunna återvända till den sidan om autentiseringen lyckas med:
  • navigeringshistoriktillståndet i ASP.NET Core i .NET 7 eller senare.
  • En frågesträng i ASP.NET Core i .NET 6 eller tidigare.

Granska komponenten RedirectToLogin i referenskälla. Platsen för komponenten ändrades över tid, så använd GitHub-sökverktyg för att hitta komponenten.

Inloggningssökvägen kan anpassas av appen (RemoteAuthenticationApplicationPathsOptions.LogInPathramverksstandarder (dotnet/aspnetcore referenskälla)). Projektmallens komponent använder standardinloggningssökvägen RedirectToLoginauthentication/loginför .

Om en app anpassar inloggningssökvägen använder du någon av följande metoder:

• Matcha sökvägen i den hårdkodade strängen i komponenten RedirectToLogin .

• Mata in RemoteAuthenticationOptions för att hämta det konfigurerade värdet. Anta till exempel den här metoden när du anpassar sökvägen med AddApiAuthorization. Lägg till följande direktiv överst i komponenten RedirectToLogin :

  @using Microsoft.Extensions.Options
  @inject IOptionsSnapshot<RemoteAuthenticationOptions<ApiAuthorizationProviderOptions>> RemoteOptions
  

  Ändra komponentens omdirigering i OnInitialized -metoden:

  - Navigation.NavigateToLogin("authentication/login");
  + Navigation.NavigateToLogin(RemoteOptions.Get(Options.DefaultName)
  +     .AuthenticationPaths.LogInPath);
  

  Note

  Om andra sökvägar skiljer sig från projektmallens sökvägar eller ramverkets standardsökvägar bör de hanteras på samma sätt.

LoginDisplay-komponent

Det här avsnittet gäller lösningens Client app.

Komponenten LoginDisplay (LoginDisplay.razor) återges i komponenten MainLayout (MainLayout.razor) och hanterar följande beteenden:

• För autentiserade användare:
  • Visar det aktuella användarnamnet.
  • Erbjuder en länk till användarprofilsidan i ASP.NET Core Identity.
  • Erbjuder en knapp för att logga ut från appen.
• För anonyma användare:
  • Erbjuder möjligheten att registrera.
  • Erbjuder alternativet att logga in.

På grund av ändringar i ramverket i olika versioner av ASP.NET Core visas inte Razor-markup för LoginDisplay-komponenten i det här avsnittet. Om du vill kontrollera komponentens markering för en viss version använder du antingen av följande metoder:

• Skapa en app som är konfigurerad för autentisering från standardprojektmallen Blazor WebAssembly för den version av ASP.NET Core som du planerar att använda. Granska LoginDisplay komponenten i den genererade appen.

• Granska komponenten LoginDisplay i referenskälla. Platsen för komponenten ändrades över tid, så använd GitHub-sökverktyg för att hitta komponenten. Mallinnehållet för Hosted lika med true används.

  Note

  Dokumentationslänkar till .NET-referenskällan läser vanligtvis in lagringsplatsens standardgren, vilket representerar den aktuella utvecklingen för nästa version av .NET. Om du vill välja en tagg för en specifik version använder du listrutan Välj bland grenar eller taggar. Mer information finns i Så här väljer du en versionstagg för ASP.NET Core-källkod (dotnet/AspNetCore.Docs #26205).

Autentiseringskomponent

Det här avsnittet gäller lösningens Client app.

Sidan som skapas av komponenten Authentication (Pages/Authentication.razor) definierar de vägar som krävs för att hantera olika autentiseringssteg.

Komponenten RemoteAuthenticatorView:

• Tillhandahålls av paketet Microsoft.AspNetCore.Components.WebAssembly.Authentication.
• Hanterar att utföra lämpliga åtgärder i varje fas av autentiseringen.

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

<RemoteAuthenticatorView Action="@Action" />

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

FetchData-komponent

Det här avsnittet gäller lösningens Client app.

Komponenten FetchData visar hur du:

• Tilldela en åtkomsttoken.
• Använd åtkomsttoken för att anropa ett skyddat resurs-API i appen Server.

I @attribute [Authorize]-direktivet anges för Blazor WebAssembly auktoriseringssystem att användaren måste ha behörighet för att kunna besöka den här komponenten. Förekomsten av attributet i Client-appen förhindrar inte att API:et på servern anropas utan rätt autentiseringsuppgifter. Den Server-applikationen måste också använda [Authorize] på lämpliga slutpunkter för att skydda dem korrekt.

IAccessTokenProvider.RequestAccessToken tar hand om att begära en åtkomsttoken som kan läggas till i begäran för att anropa API:et. Om token cachelagras eller om tjänsten kan etablera en ny åtkomsttoken utan användarinteraktion lyckas tokenbegäran. Annars misslyckas begäran om token med en AccessTokenNotAvailableException, som fångas i en try-catch-sats.

För att kunna hämta den faktiska token som ska inkluderas i begäran måste appen kontrollera att begäran lyckades genom att anropa tokenResult.TryGetToken(out var token).

Om begäran lyckades fylls tokenvariabeln i med åtkomsttoken. Egenskapen AccessToken.Value för token exponerar den bokstavliga strängen som ska inkluderas i begäranderubriken Authorization.

Om token inte kunde etableras utan användarinteraktion, vilket resulterade i en misslyckad begäran:

• ASP.NET Core i .NET 7 eller senare: Appen navigerar till AccessTokenResult.InteractiveRequestUrl med den angivna AccessTokenResult.InteractionOptions för att tillåta uppdatering av åtkomsttoken.
• ASP.NET Core i .NET 6 eller tidigare: Tokenresultatet innehåller en omdirigerings-URL. Om du navigerar till den här URL:en kommer användaren till inloggningssidan och tillbaka till den aktuella sidan efter en lyckad autentisering.

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

Användning av en Azure Active Directory B2C-tenant

Om appen är registrerad i en Azure Active Directory B2C- klientorganisation, enligt beskrivningen i Självstudie: Skapa en Azure Active Directory B2C-klientorganisation men följer riktlinjerna i den här artikeln hanteras app-ID-URI:n på olika sätt av ME-ID.

Du kan kontrollera hyresgästtypen för en befintlig hyresgäst genom att välja länken Hantera hyresgäster längst upp på ME-ID organisation Översikt. Granska värdet i kolumnen klienttyp för organisationen. Det här avsnittet gäller appar som följer riktlinjerna i den här artikeln men som är registrerade i en Azure Active Directory B2C- klientorganisation.

I stället för att app-ID-URI:n matchar formatet api://{SERVER API APP CLIENT ID OR CUSTOM VALUE}har app-ID-URI formatet https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}. Den här skillnaden påverkar Client- och Server appkonfigurationer:

• För server-API-appen anger du Audience i appens inställningsfil (appsettings.json) så att den matchar appens målgrupp (app-ID-URI) som tillhandahålls av Azure-portalen utan avslutande snedstreck:

  "Audience": "https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}"
  

  Example:

  "Audience": "https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444"
  

• I den Program filen i Client-appen anger du målgruppen för omfånget (app-ID-URI) så att den matchar server-API-appens målgrupp:

  options.ProviderOptions.DefaultAccessTokenScopes
      .Add("https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}/{DEFAULT SCOPE}");
  

  I föregående omfång är app-ID:ns URI/målgrupp den https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE} delen av värdet, som inte innehåller ett avslutande snedstreck (/) och inte innehåller omfångsnamnet ({DEFAULT SCOPE}).

  Example:

  options.ProviderOptions.DefaultAccessTokenScopes
      .Add("https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444/API.Access");
  

  I föregående omfång är app-ID:ns URI/målgrupp den https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444 delen av värdet, som inte innehåller ett avslutande snedstreck (/) och inte innehåller omfångsnamnet (API.Access).

Användning av en anpassad app-ID-URI

Om app-ID-URI:n är ett anpassat värde måste du manuellt uppdatera standardåtkomsttokens omfångs-URI i Client-appen och lägga till målgruppen i Server appens ME-ID konfiguration.

Exempel på app-ID-URI för urn://custom-app-id-uri och ett omfångsnamn för API.Access:

• Filen Program för Client-appen:

  options.ProviderOptions.DefaultAccessTokenScopes.Add(
      "urn://custom-app-id-uri/API.Access");
  

• I appsettings.json i Server-appen lägger du till en Audience post med endast app-ID-URI:n och inget avslutande snedstreck:

  "Audience": "urn://custom-app-id-uri"
  

Troubleshoot

Logging

Information om hur du aktiverar felsökning eller spårningsloggning för Blazor WebAssembly autentisering finns i avsnittet autentiseringsloggning på klientsidani ASP.NET Core-loggning Blazor med artikelversionsväljaren inställd på ASP.NET Core i .NET 7 eller senare.

Vanliga fel

• Felkonfiguration av appen eller Identity-leverantör (IP)

  De vanligaste felen orsakas av felaktig konfiguration. Följande är några exempel:

  • Beroende på kraven i scenariot förhindrar en saknad eller felaktig utfärdare, instans, klient-ID, klientdomän, klient-ID eller omdirigerings-URI en app från att autentisera klienter.
  • Felaktiga omfång för begäran hindrar klienter från att komma åt serverwebb-API-slutpunkter.
  • Felaktiga eller saknade server-API-behörigheter hindrar klienter från att komma åt serverwebb-API-slutpunkter.
  • Köra appen på en annan port än vad som har konfigurerats i omdirigerings-URI:n för IP-adressens appregistrering. Observera att en port inte krävs för Microsoft Entra-ID och en app som körs på en localhost utvecklingstestningsadress, men appens portkonfiguration och porten där appen körs måste matcha för icke-localhost adresser.

  Konfigurationsavsnitt i den här artikelns vägledning visar exempel på rätt konfiguration. Kontrollera noggrant varje avsnitt i artikeln som letar efter felkonfiguration av appar och IP-adresser.

  Om konfigurationen verkar vara korrekt:

  • Analysera applikationsloggar.

  • Granska nätverkstrafiken mellan klientappen och IP- eller serverappen med webbläsarens utvecklarverktyg. Ofta returneras ett exakt felmeddelande eller ett meddelande med en ledtråd till vad som orsakar problemet till klienten av IP- eller serverappen efter en begäran. Vägledning för utvecklarverktyg finns i följande artiklar:

    • Google Chrome (Google-dokumentation)
    • Microsoft Edge
    • Mozilla Firefox (Mozilla-dokumentation)

  • För versioner av Blazor där en JSON-webbtoken (JWT) används avkodar du innehållet i token som används för att autentisera en klient eller komma åt ett webb-API för servrar, beroende på var problemet uppstår. Mer information finns i Granska innehållet i en JSON-webbtoken (JWT).

  Dokumentationsteamet svarar på dokumentfeedback och buggar i artiklar (öppna ett problem från Den här sidan feedbackavsnittet) men kan inte tillhandahålla produktsupport. Det finns flera offentliga supportforum som hjälper dig att felsöka en app. Vi rekommenderar följande:

  • Stack Overflow (tagg: blazor)
  • ASP.NET Core Slack Team
  • Blazor Gitter

  Föregående forum ägs eller kontrolleras inte av Microsoft.

  För rapporter om icke-säkerhetsrelaterade, icke-känsliga och icke-konfidentiella reproducerbara ramverksfel öppna ett problem med ASP.NET Core-produktenheten. Skapa inte ett ärende med produktteamet förrän du noggrant har undersökt orsaken till problemet och inte kan lösa det själv, inte heller med hjälp av communityn i ett offentligt supportforum. Produktenheten kan inte felsöka enskilda appar som har brutits på grund av enkel felkonfiguration eller användningsfall som rör tjänster från tredje part. Om en rapport är känslig eller konfidentiell eller beskriver en potentiell säkerhetsbrist i produkten som cyberattacker kan utnyttja kan du läsa Rapportering av säkerhetsproblem och buggar (dotnet/aspnetcore GitHub-lagringsplats).

• Obehörig klient för ME-ID

  info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Auktoriseringen misslyckades. Dessa krav uppfylldes inte: DenyAnonymousAuthorizationRequirement: Kräver en autentiserad användare.

  Inloggningsåteranropsfel från ME-ID:

  • Fel: unauthorized_client
  • Beskrivning: AADB2C90058: The provided application is not configured to allow public clients.

  Så här löser du felet:

  1. Gå till -appens manifest i Azure-portalen.
  2. Ange attributet allowPublicClient till null eller true.

Cookies och webbplatsdata

Cookies och webbplatsdata kan sparas mellan appuppdateringar och störa testning och felsökning. Rensa följande när du gör ändringar i appkoden, ändringar av användarkonton med providern eller konfigurationsändringar för providerappen:

• Cookies för användarinloggning
• Appcookies
• Cachad och lagrad webbplatsdata

En metod för att förhindra kvardröjande cookies och webbplatsdata från att störa testning och felsökning är att:

• Konfigurera en webbläsare
  • Använd en webbläsare för testning som du kan konfigurera för att ta bort alla cookie och platsdata varje gång webbläsaren stängs.
  • Kontrollera att webbläsaren stängs manuellt eller av IDE för ändringar i appen, testanvändaren eller providerkonfigurationen.
• Använd ett anpassat kommando för att öppna en webbläsare i InPrivate- eller Incognito-läge i Visual Studio:
  • Öppna dialogrutan Bläddra med från knappen Kör i Visual Studio.
  • Välj knappen Lägg till.
  • Ange sökvägen till webbläsaren i fältet Program. Följande exekverbara filvägar är typiska installationsplatser för Windows 10. Om webbläsaren är installerad på en annan plats eller om du inte använder Windows 10 anger du sökvägen till webbläsarens körbara fil.
    • 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
  • I fältet Argument anger du det kommandoradsalternativ som webbläsaren använder för att öppna i InPrivate- eller Inkognitoläge. Vissa webbläsare kräver appens URL.
    • Microsoft Edge: Använd -inprivate.
    • Google Chrome: Använd --incognito --new-window {URL}, där platshållaren för {URL} är url:en som ska öppnas (till exempel https://localhost:5001).
    • Mozilla Firefox: Använd -private -url {URL}, där platshållaren {URL} är url:en som ska öppnas (till exempel https://localhost:5001).
  • Ange ett namn i fältet Vänligt namn. Till exempel Firefox Auth Testing.
  • Välj knappen OK.
  • Om du vill undvika att behöva välja webbläsarprofilen för varje iteration av testning med en app anger du profilen som standard med knappen Ange som standard.
  • Kontrollera att webbläsaren är stängd av IDE för alla ändringar i appen, testanvändaren eller providerkonfigurationen.

Appuppgraderingar

En fungerande app kan misslyckas omedelbart efter att ha uppgraderat .NET SDK på utvecklingsdatorn eller ändrat paketversioner i appen. I vissa fall kan inkonsekventa paket orsaka problem med en app vid större uppgraderingar. De flesta av dessa problem kan åtgärdas genom att följa dessa instruktioner:

1. Rensa det lokala systemets NuGet-paketcacheminnen genom att köra dotnet nuget locals all --clear från ett kommandogränssnitt.
2. Ta bort projektets mappar bin och obj.
3. Återställa och återskapa projektet.
4. Ta bort alla filer i distributionsmappen på servern innan du distribuerar om appen.

Inspektera användaren

Följande User komponent kan användas direkt i appar eller fungera som grund för ytterligare anpassning.

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

Granska innehållet i en JSON-webbtoken (JWT)

Om du vill avkoda en JSON-webbtoken (JWT) använder du Microsofts jwt.ms-verktyg. Värden i användargränssnittet lämnar aldrig webbläsaren.

Exempelkodad JWT (förkortad för visning):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Exempel på JWT-avkodad av verktyget för en app som autentiserar mot 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]

Ytterligare resurser

• Konfigurera appens utgivardomän
• Microsoft Entra ID app-manifest: identifierUris-attribut
• ASP.NET Core Blazor WebAssembly ytterligare säkerhetsscenarier
• Skapa en anpassad version av JavaScript-biblioteket Authentication.MSAL
• oautentiserade eller obehöriga webb-API-begäranden i en app med en säker standardklient
• ASP.NET Core Blazor WebAssembly med Microsoft Entra ID-grupper och roller (.NET 5 till .NET 7)
• Microsofts identitetsplattform och Microsoft Entra-ID med ASP.NET Core
• dokumentation om Microsofts identitetsplattform
• Snabbstart: Registrera ett program med Microsofts identitetsplattform
• Metodtips för säkerhet för programegenskaper i Microsoft Entra ID