Dela via

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

  • Artikel

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 Making your application multi-tenant.

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.

Genomgång

Underavsnitten i genomgången förklarar hur du:

  • Skapa en klientorganisation 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 klientorganisation 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 i den här organisationskatalogen endast (enskild klientorganisation) 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 Active Azure 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)

Viktig

Om ett anpassat värde används för app-ID-URI:n krävs konfigurationsändringar för både Server och Client appar när apparna har skapats från Blazor WebAssembly-projektmallen. Mer information finns i avsnittet Användning av en anpassad app-ID-URI.

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 i den här organisationskatalogen endast (enskild klientorganisation) för den här upplevelsen.
  4. Ställ in listrutan Omdirigerings-URI till 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>Bevilja administratörsmedgivande till openid- och offline_access-behörigheter och är markerad. Avmarkera kryssrutan för att inaktivera inställningen. När du använder en Azure Active Directory- klientorganisation, visas inte kryssrutan.
  6. Välj Registrera.

Not

Att ange portnumret för en localhost ME-ID omdirigerings-URI krävs inte. Mer information finns i om begränsningar och restriktioner för omdirigerings-URI (svars-URL): Undantag för localhost (Entra-dokumentation).

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

I autentisering>plattform-konfigurationer>enkeltsidapplikation:

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

Viktig

Om du inte har behörighet att bevilja administratörsmedgivande till klientorganisationen i det sista steget i API-behörigheter konfiguration eftersom medgivande att använda appen delegeras till användare, måste du vidta följande ytterligare steg:

  • Appen måste använda en betrodd utgivardomän.
  • I konfigurationen för Server app i Azure-portalen väljer du Exponera ett API-. Under Auktoriserade klientprogramväljer du knappen för att Lägg till ett klientprogram. Lägg till Client-appens program-ID (klient)-ID (till exempel 11112222-bbbb-3333-cccc-4444dddd5555).

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

Varning

Undvik att använda bindestreck (-) i appnamnet {PROJECT NAME} som bryter bildandet av OIDC-appidentifieraren. Logik i Blazor WebAssembly-projektmallen använder projektnamnet för en OIDC-appidentifierare i lösningens konfiguration. Pascal-fall (BlazorSample) eller understreck (Blazor_Sample) är godtagbara alternativ. För mer information, se Bindestreck i ett värdbaserat Blazor WebAssembly projektnamn bryter OIDC-säkerhet (dotnet/aspnetcore #35337).

Platshållare Namn på Azure-portalen Exempel
{PROJECT NAME} — BlazorSample
{CLIENT APP CLIENT ID} Program-ID (klient) för Client-appen 11112222-bbbb-3333-cccc-4444dddd5555
{DEFAULT SCOPE} Omfångsnamn API.Access
{SERVER API APP CLIENT ID} Program-ID (klient) för Server API-appen 00001111-aaaa-2222-bbbb-3333cccc4444
{SERVER API APP ID URI GUID} Applikations-ID URI GUID 00001111-aaaa-2222-bbbb-3333cccc4444 (ENDAST matchande GUID, matchar {SERVER API APP CLIENT ID})
{TENANT DOMAIN} Primär-/utgivar-/klientdomän contoso.onmicrosoft.com
{TENANT ID} Katalog-ID (klientorganisation) aaaabbbb-0000-cccc-1111-dddd2222eeee

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

Viktig

Om ett anpassat värde används för app-ID-URI:n krävs konfigurationsändringar för både Server och Client appar när apparna har skapats från Blazor WebAssembly-projektmallen. Mer information finns i avsnittet Användning av en anpassad app-ID-URI.

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

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

Exempel:

{
  "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"
  }
}

Viktig

Om Server-appen är registrerad för att använda en anpassad app-ID-URI i ME-ID (inte i standardformatet api://{SERVER API APP CLIENT ID}) läser du avsnittet Användning av en anpassad app-ID-URI. Ändringar krävs i både Server och Client appar.

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.

Not

Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

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

Notera

När ett enda autentiseringsschema registreras används detta schema automatiskt som appens standardschema, och det är inte nödvändigt att ange schemat för AddAuthentication eller via AuthenticationOptions. Mer information finns i Översikt över ASP.NET Core Authentication och ASP.NET Core-meddelandet (aspnet/Meddelanden #490).

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

Exempel:

{
  "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.

Obs.

Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

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.

I filen Program:

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

I filen Program:

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

Not

AdditionalScopesToConsent kan inte etablera delegerade användarbehörigheter för Microsoft Graph via användargränssnittet för Microsoft Entra-ID-medgivande när en användare först använder en app som är registrerad i Microsoft Azure. Mer information finns i Använda Graph API med ASP.NET Core Blazor WebAssembly.

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:

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 System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}
@using {APPLICATION ASSEMBLY}.Shared

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.

    Obs

    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 rullgardinsmenyn Växla 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:

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

Not

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äxla 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).

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 förberedd för autentisering från standardprojektmallen Blazor WebAssembly för den version av ASP.NET Core du tänker använda. Granska LoginDisplay komponenten i den genererade appen.

  • Granska komponenten LoginDisplay i referenskällan för . 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.

    Not

    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äxla 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:

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

<RemoteAuthenticatorView Action="@Action" />

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

Not

Nullable reference types (NRTs) och .NET compiler null-state static analysis stöds i ASP.NET Core i .NET 6 eller senare. Innan släppet av ASP.NET Core i .NET 6, framträder typen string utan beteckningen för nolltyp (?).

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 tokenbegäran med en AccessTokenNotAvailableException, som fångas i en try-catch-instruktion.

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 literal strängen som ska inkluderas i Authorization-begäranshuvudet.

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 appens ID-URI 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 klienttyp kolumnvärde 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}"

    Exempel:

    "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}).

    Exempel:

    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.

Viktig

Följande konfiguration krävs inte när du använder standardapp-ID-URI:n för api://{SERVER API APP CLIENT ID}.

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

  • I Program-filen i 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"

Felsöka

Skogsavverkning

Information om hur du aktiverar felsökning eller spårningsloggning för Blazor WebAssembly autentisering finns i avsnittet autentiseringsloggning på klientsidan i ASP.NET Core Blazor loggning med artikelversionsväljaren inställd på ASP.NET Core 7.0 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 programloggar.

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

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

    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.

    Återanropsfel för inloggning 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
  • App-kakor
  • Cachelagrade och webbplatsdata sparade

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 Visual Studio-knappen Kör.
    • Välj knappen Lägg till.
    • Ange sökvägen till webbläsaren i fältet Program. Följande sökvä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 Core 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.

Not

Användning av paketversioner som inte är kompatibla med appens målramverk stöds inte. Information om ett paket finns i NuGet Gallery eller FuGet Package Explorer.

Kör Server-appen

När du testar och felsöker en värdbaserad Blazor WebAssemblylösningkontrollerar du att du kör appen från Server-projektet.

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