Dela via

Konfigurera autentiseringsalternativ i ett Angular program med hjälp av Azure Active Directory B2C

  • Artikel

Den här artikeln beskriver hur du kan anpassa och förbättra autentiseringsupplevelsen för Azure Active Directory B2C (Azure AD B2C) för din Angular ensidesprogram (SPA).

Förutsättningar

Bekanta dig med artikeln Konfigurera autentisering i ett Angular SPA eller Aktivera autentisering i din egen Angular SPA.

Inloggnings- och utloggningsbeteende

Du kan konfigurera ensidesappen så att den loggar in användare med MSAL.js på två sätt:

  • Popup-fönster: Autentiseringen sker i ett popup-fönster och programmets tillstånd bevaras. Använd den här metoden om du inte vill att användarna ska flytta sig från programsidan under autentiseringen. Det finns dock kända problem med popup-fönster i Internet Explorer.
    • Om du vill logga in med popup-fönster använder du metoden i src/app/app.component.ts klassen loginPopup .
    • src/app/app.module.ts I klassen anger du attributet interactionType till InteractionType.Popup.
    • Om du vill logga ut med popup-fönster använder logoutPopup du metoden i src/app/app.component.ts klassen . Du kan också konfigurera logoutPopup att omdirigera huvudfönstret till en annan sida, till exempel startsidan eller inloggningssidan, när utloggningen har slutförts genom att skicka mainWindowRedirectUri som en del av begäran.
  • Omdirigering: Användaren omdirigeras till Azure AD B2C för att slutföra autentiseringsflödet. Använd den här metoden om användarna har webbläsarbegränsningar eller principer där popup-fönster är inaktiverade.
    • Om du vill logga in med omdirigering använder loginRedirect du metoden i src/app/app.component.ts klassen .
    • src/app/app.module.ts I klassen anger du attributet interactionType till InteractionType.Redirect.
    • Om du vill logga ut med omdirigering använder logoutRedirect du metoden i src/app/app.component.ts klassen . Konfigurera den URI som den ska omdirigeras till efter en utloggning genom att ange postLogoutRedirectUri. Du bör lägga till den här URI:n som en omdirigerings-URI i programregistreringen.

Följande exempel visar hur du loggar in och loggar ut:

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

MSAL-Angular-biblioteket har tre inloggningsflöden: interaktiv inloggning (där en användare väljer inloggningsknappen), MSAL Guard och MSAL Interceptor. MSAL Guard- och MSAL Interceptor-konfigurationerna börjar gälla när en användare försöker komma åt en skyddad resurs utan en giltig åtkomsttoken. I sådana fall tvingar MSAL-biblioteket användaren att logga in.

Följande exempel visar hur du konfigurerar MSAL Guard och MSAL Interceptor för inloggning med ett popup-fönster eller omdirigering:

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

Fyll i inloggningsnamnet i förväg

Under en inloggningsanvändarresa kan din app riktas mot en viss användare. När en app riktar sig till en användare kan den i auktoriseringsbegäran login_hint ange frågeparametern med användarens inloggningsnamn. Azure AD B2C fyller automatiskt i inloggningsnamnet och användaren behöver bara ange lösenordet.

Gör följande för att fylla i inloggningsnamnet i förväg:

  1. Om du använder en anpassad princip lägger du till det inkommande anspråk som krävs enligt beskrivningen i Konfigurera direkt inloggning.
  2. Skapa eller använd ett befintligt PopupRequest konfigurationsobjekt eller RedirectRequest MSAL-konfigurationsobjekt.
  3. loginHint Ange attributet med motsvarande inloggningstips.

Följande kodfragment visar hur du skickar parametern för inloggningstips. De använder bob@contoso.com som attributvärde.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

Förmarkera en identitetsprovider

Om du har konfigurerat inloggningsresan för ditt program för att inkludera sociala konton, till exempel Facebook, LinkedIn eller Google, kan du ange parametern domain_hint . Den här frågeparametern ger ett tips om Azure AD B2C om den sociala identitetsprovider som ska användas för inloggning. Om programmet till exempel anger går inloggningsflödet domain_hint=facebook.comdirekt till Facebook-inloggningssidan.

Om du vill omdirigera användare till en extern identitetsprovider gör du följande:

  1. Kontrollera domännamnet för din externa identitetsprovider. Mer information finns i Omdirigera inloggning till en social provider.
  2. Skapa eller använd ett befintligt PopupRequest konfigurationsobjekt eller RedirectRequest MSAL-konfigurationsobjekt.
  3. domainHint Ange attributet med motsvarande domäntips.

Följande kodfragment visar hur du skickar domäntipsparametern. De använder facebook.com som attributvärde.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

Ange användargränssnittsspråket

Språkanpassning i Azure AD B2C gör att ditt användarflöde kan hantera en mängd olika språk som passar dina kunders behov. Mer information finns i Språkanpassning.

Om du vill ange önskat språk gör du följande:

  1. Konfigurera språkanpassning.
  2. Skapa eller använd ett befintligt PopupRequest konfigurationsobjekt eller RedirectRequest MSAL-konfigurationsobjekt med extraQueryParameters attribut.
  3. Lägg till parametern ui_locales med motsvarande språkkod till attributen extraQueryParameters .

Följande kodfragment visar hur du skickar domäntipsparametern. De använder es-es som attributvärde.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Skicka en anpassad frågesträngsparameter

Med anpassade principer kan du skicka en anpassad frågesträngsparameter. Ett bra användningsexempel är när du vill ändra sidinnehållet dynamiskt.

Om du vill skicka en anpassad frågesträngsparameter gör du följande:

  1. Konfigurera elementet ContentDefinitionParameters .
  2. Skapa eller använd ett befintligt PopupRequest konfigurationsobjekt eller RedirectRequest MSAL-konfigurationsobjekt med extraQueryParameters attribut.
  3. Lägg till den anpassade frågesträngsparametern, till exempel campaignId. Ange parametervärdet.

Följande kodfragment visar hur du skickar en anpassad frågesträngsparameter. De använder germany-promotion som attributvärde.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Skicka ett ID-tokentips

Ett förlitande part-program kan skicka en inkommande JSON-webbtoken (JWT) som en del av OAuth2-auktoriseringsbegäran. Den inkommande token är ett tips om användaren eller auktoriseringsbegäran. Azure AD B2C verifierar token och extraherar sedan anspråket.

Om du vill inkludera ett tokentips för ID i autentiseringsbegäran gör du följande:

  1. I din anpassade princip definierar du den tekniska profilen för ett ID-tokentips.
  2. Skapa eller använd ett befintligt PopupRequest konfigurationsobjekt eller RedirectRequest MSAL-konfigurationsobjekt med extraQueryParameters attribut.
  3. Lägg till parametern id_token_hint med motsvarande variabel som lagrar ID-token.

Följande kodfragment visar hur du definierar ett ID-tokentips:

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

Använda en anpassad domän

Genom att använda en anpassad domän kan du helt märka autentiserings-URL:en. Ur ett användarperspektiv finns användarna kvar på din domän under autentiseringsprocessen, i stället för att omdirigeras till Azure AD B2C b2clogin.com domännamn.

Om du vill ta bort alla referenser till "b2c" i URL:en kan du också ersätta ditt B2C-klientnamn, contoso.onmicrosoft.com, i URL:en för autentiseringsbegäran med ditt klientorganisations-ID-GUID. Du kan till exempel ändra https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ till https://account.contosobank.co.uk/<tenant ID GUID>/.

Om du vill använda din anpassade domän för ditt klientorganisations-ID i autentiserings-URL:en följer du anvisningarna i Aktivera anpassade domäner. Öppna MSAL-konfigurationsobjektet src/app/auth-config.ts och ändra authorities och knownAuthorities använd ditt anpassade domännamn och klientorganisations-ID.

Följande JavaScript visar MSAL-konfigurationsobjektet före ändringen:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

Följande JavaScript visar MSAL-konfigurationsobjektet efter ändringen:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

Konfigurera loggning

MSAL-biblioteket genererar loggmeddelanden som kan hjälpa dig att diagnostisera problem. Appen kan konfigurera loggning. Appen kan också ge dig anpassad kontroll över detaljnivån och om personliga data och organisationsdata loggas.

Vi rekommenderar att du skapar ett MSAL-loggningsåteranrop och tillhandahåller ett sätt för användare att skicka loggar när de har autentiseringsproblem. MSAL innehåller följande loggningsnivåer:

  • Fel: Något har gått fel och ett fel har genererats. Den här nivån används för att felsöka och identifiera problem.
  • Varning! Det har inte nödvändigtvis uppstått ett fel eller fel, men informationen är avsedd för diagnostik och för att identifiera problem.
  • Info: MSAL loggar händelser som är avsedda för informationsändamål och inte nödvändigtvis för felsökning.
  • Utförligt: Det här är standardnivån. MSAL loggar den fullständiga informationen om biblioteksbeteendet.

Som standard samlar MSAL-loggaren inte in några personliga data eller organisationsdata. Biblioteket ger dig möjlighet att aktivera loggning av personliga data och organisationsdata om du bestämmer dig för att göra det.

Konfigurera Angular loggning genom att konfigurera följande nycklar i src/app/auth-config.ts:

  • loggerCallback är återanropsfunktionen för loggare.
  • logLevel låter dig ange loggningsnivån. Möjliga värden: Error, Warning, Infooch Verbose.
  • piiLoggingEnabled möjliggör inmatning av personuppgifter. Möjliga värden: true eller false.

Följande kodfragment visar hur du konfigurerar MSAL-loggning:

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Nästa steg