Dela via

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

Viktigt!

Från och med den 1 maj 2025 är Azure AD B2C inte längre tillgängligt att köpa för nya kunder. Läs mer i våra vanliga frågor och svar.

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 ditt Angular-ensidesprogram (SPA).

Förutsättningar

Bekanta dig med artikeln Konfigurera autentisering i ett Angular SPA eller Aktivera autentisering i ditt eget Angular SPA.

Inloggnings- och utloggningsbeteende

Du kan konfigurera ditt ensidesprogram för att logga 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 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, ställ in attributet interactionType på InteractionType.Popup.
    • Om du vill logga ut med popup-fönster använder du src/app/app.component.ts metoden i logoutPopup 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.
    • Använd metoden src/app/app.component.ts i loginRedirect-klassen för att logga in med omdirigering.
    • src/app/app.module.ts I klassen, ställ in attributet interactionType på InteractionType.Redirect.
    • För att logga ut med omdirigering, använd metoden src/app/app.component.ts i klassen logoutRedirect. 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 din programregistrering.

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 inloggningsresa kan din app rikta in sig på en specifik användare. När en app riktar sig mot 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 nödvändiga indataanspråket enligt beskrivningen i Konfigurera direkt inloggning.
  2. Skapa eller använda ett befintligt PopupRequest 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"
    }
  },

Avmarkera en identitetsprovider i förväg

Om du har konfigurerat inloggningsresan för ditt program så att det innehåller sociala konton, till exempel Facebook, LinkedIn eller Google, kan du ange parametern domain_hint . Den här frågeparametern ger ett tips till 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 Facebooks inloggningssida.

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ända ett befintligt PopupRequest 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.

Gör följande för att ange önskat språk:

  1. Konfigurera språkanpassning.
  2. Skapa eller använd ett befintligt PopupRequest 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 exempel på användningsfall är när du vill ändra sidinnehållet dynamiskt.

Gör följande för att skicka en anpassad frågesträngsparameter:

  1. Konfigurera elementet ContentDefinitionParameters .
  2. Skapa eller använd ett befintligt PopupRequest 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 partprogram 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.

Gör följande om du vill inkludera ett ID-tokentips i autentiseringsbegäran:

  1. I din anpassade policy definierar du den tekniska profilen för en ID-tokenledtråd.
  2. Skapa eller använd ett befintligt PopupRequest 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. Från 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 klient-ID GUID. Du kan till exempel ändra https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ till https://account.contosobank.co.uk/<tenant ID GUID>/.

Följ anvisningarna i Aktivera anpassade domäner om du vill använda din anpassade domän för ditt klient-ID i autentiserings-URL:en. Öppna src/app/auth-config.ts MSAL-konfigurationsobjektet och ändra authorities och knownAuthorities till att använda ditt anpassade domännamn och klient-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 loggfunktioner. 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 tillhandahåller följande nivåer av loggningsinformation:

  • 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 hitta 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: Detta ä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

  • Last updated on