Share via

Snabbstart: Logga in användare i en ensidesapp (SPA) och anropa Microsoft Graph API med Blazor WebAssembly

  • Artikel

I den här snabbstarten används en exempelapp för Ensidesapp (SPA) för Blazor WebAssembly (WASM) för att visa hur du loggar in användare med hjälp av auktoriseringskodflödet med Proof Key for Code Exchange (PKCE) och anropar Microsoft Graph API. Exemplet använder Microsoft.Authentication.WebAssembly.MSAL för att hantera autentisering.

Förutsättningar

Registrera program- och postidentifierare

För att slutföra registreringen anger du ett namn för programmet, anger vilka kontotyper som stöds och lägger till en omdirigerings-URI. När programmets översiktsfönster har registrerats visas de identifierare som behövs i programmets källkod.

  1. Logga in på administrationscentret för Microsoft Entra.

  2. Om du har åtkomst till flera klienter använder du ikonen Inställningar på den översta menyn för att växla till den klientorganisation där du vill registrera programmet från menyn Kataloger + prenumerationer.

  3. Bläddra till Identitetsprogram>> Appregistreringar och välj Ny registrering.

  4. Ange ett namn för programmet, till exempel identity-client-spa.

  5. För Kontotyper som stöds väljer du Endast konton i den här organisationskatalogen. Om du vill ha information om olika kontotyper väljer du alternativet Hjälp mig .

  6. Välj Registrera.

    Skärmbild som visar hur du anger ett namn och väljer kontotypen i administrationscentret för Microsoft Entra.

  7. Programmets översiktsfönster visas när registreringen är klar. Registrera katalog-ID:t (klient)-ID:t och program-ID:t (klient) som ska användas i programmets källkod.

    Skärmbild som visar identifierarvärdena på översiktssidan i administrationscentret för Microsoft Entra.

    Kommentar

    Kontotyper som stöds kan ändras genom att referera till Ändra konton som stöds av ett program.

Lägga till en plattformsomdirigerings-URI

Följ dessa steg om du vill ange din apptyp för din appregistrering:

  1. Under Hantera väljer du Autentisering.
  2. På sidan Plattformskonfigurationer väljer du Lägg till en plattform och väljer sedan SPA-alternativet .
  3. För omdirigerings-URI :er anger du http://localhost:5000/authentication/login-callback.
  4. Välj Konfigurera för att spara ändringarna.

Klona eller ladda ned exempelprogrammet

Om du vill hämta exempelprogrammet kan du antingen klona det från GitHub eller ladda ned det som en .zip fil.

  • Om du vill klona exemplet öppnar du en kommandotolk och navigerar till den platsen där du vill skapa projektet och anger följande kommando:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet

  • Ladda ned filen .zip. Extrahera den till en filsökväg där namnets längd är färre än 260 tecken.

Konfigurera projektet

  1. I din IDE öppnar du projektmappen ms-identity-docs-code-dotnet/spa-blazor-wasm som innehåller exemplet.

  2. Öppna wwwroot/appsettings.json och uppdatera följande värden med informationen som registrerades tidigare i administrationscentret.

    {
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
    "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
    "ValidateAuthority": true
  }
}
    • Authority – Utfärdaren är en URL som anger en katalog som MSAL kan begära token från. Ersätt Enter_the_Tenant_Info_Here med det katalog-ID-värde (klientorganisation) som registrerades tidigare.
    • ClientId - Identifieraren för programmet, även kallad klienten. Ersätt texten inom citattecken med det program-ID-värde (klient-ID ) som registrerades tidigare.

Kör programmet och logga in

Kör projektet med en webbserver med hjälp av .NET:

  1. Starta servern genom att köra följande kommandon från projektkatalogen:

    dotnet run

  2. Kopiera url http :en som visas i terminalen, http://localhost:5000till exempel , och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.

  3. Följ stegen och ange nödvändig information för att logga in med ditt Microsoft-konto. Du kommer att begäras en e-postadress så att ett engångslösenord kan skickas till dig. Ange koden när du uppmanas att göra det.

  4. Programmet begär behörighet att behålla åtkomsten till data som du har gett den åtkomst till och logga in dig och läsa din profil. Välj Acceptera. Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.

    Skärmbild av Blazor WASM SPA-appen som visar resultatet av API-anropet.

Logga ut från programmet

  1. Hitta knappen Logga ut i det övre högra hörnet på sidan och välj den.
  2. Du uppmanas att välja ett konto att logga ut från. Välj det konto som du använde för att logga in.

Ett meddelande visas som anger att du har loggat ut. Nu kan du stänga webbläsarfönstret.

Se även