Dela via

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

  • Artikel

Den här snabbstarten använder ett exempel på ensidesapp (SPA) i Angular 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 Library för JavaScript 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:4200.
  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-javascript.git

  • 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-javascript/angular-spa som innehåller exemplet.

  2. Öppna src/app/app.module.ts och uppdatera följande värden med informationen som registrerades tidigare i administrationscentret.

    // Required for Angular multi-browser support
import { BrowserModule } from '@angular/platform-browser';

// Required for Angular
import { NgModule } from '@angular/core';

// Required modules and components for this application
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';
import { HomeComponent } from './home/home.component';

// HTTP modules required by MSAL
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

// Required for MSAL
import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
      clientId: "Enter_the_Application_Id_Here",
      // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
      authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
      // Must be the same redirectUri as what was provided in your app registration.
      redirectUri: "http://localhost:4200",
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE
    }
  });
}

// MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

// MSAL Guard is required to protect routes and require authentication before accessing protected routes
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return { 
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: ['user.read']
    }
  };
}

// Create an NgModule that contains the routes and MSAL configurations
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MsalModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }
    • clientId - Identifieraren för programmet, även kallad klienten. Ersätt texten inom citattecken med det program-ID-värde (klient-ID ) som registrerades tidigare.
    • 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.
    • redirectUri – Programmets omdirigerings-URI . Om det behövs ersätter du texten inom citattecken med den omdirigerings-URI som registrerades tidigare.

Kör programmet och logga in

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

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

    npm install
npm start

  2. Kopiera url https :en som visas i terminalen, https://localhost:4200till exempel , och klistra in den i ett webbläsaradressfält. 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 JavaScript-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.

Relaterat innehåll