Condividi tramite

Configurare le opzioni di autenticazione in un'applicazione Angular usando Azure Active Directory B2C

  • Articolo

Questo articolo descrive come personalizzare e migliorare l'esperienza di autenticazione di Azure Active Directory B2C (Azure AD B2C) per l'applicazione a pagina singola Angular.

Prerequisiti

Acquisire familiarità con l'articolo Configurare l'autenticazione in un'applicazione a pagina singola di Angular o Abilitare l'autenticazione nel proprio Angular SPA.

Comportamento di accesso e disconnesso

È possibile configurare l'applicazione a pagina singola per l'accesso degli utenti con MSAL.js in due modi:

  • Finestra popup: l'autenticazione avviene in una finestra popup e lo stato dell'applicazione viene mantenuto. Usare questo approccio se non si vuole che gli utenti si spostino dalla pagina dell'applicazione durante l'autenticazione. Tuttavia, esistono problemi noti con le finestre popup in Internet Explorer.
    • Per accedere con le finestre popup, nella src/app/app.component.ts classe usare il loginPopup metodo .
    • src/app/app.module.ts Nella classe impostare l'attributo interactionType su InteractionType.Popup.
    • Per disconnettersi con le finestre popup, nella src/app/app.component.ts classe usare il logoutPopup metodo . È anche possibile configurare logoutPopup per reindirizzare la finestra principale a una pagina diversa, ad esempio la home page o la pagina di accesso, dopo il completamento della disconnessione passando mainWindowRedirectUri come parte della richiesta.
  • Reindirizzamento: l'utente viene reindirizzato ad Azure AD B2C per completare il flusso di autenticazione. Usare questo approccio se gli utenti hanno vincoli del browser o criteri in cui le finestre popup sono disabilitate.
    • Per accedere con reindirizzamento, nella src/app/app.component.ts classe usare il loginRedirect metodo .
    • src/app/app.module.ts Nella classe impostare l'attributo interactionType su InteractionType.Redirect.
    • Per disconnettersi con reindirizzamento, nella src/app/app.component.ts classe usare il logoutRedirect metodo . Configurare l'URI a cui deve essere reindirizzato dopo la disconnessione impostando postLogoutRedirectUri. È necessario aggiungere questo URI come URI di reindirizzamento nella registrazione dell'applicazione.

L'esempio seguente illustra come accedere e disconnettersi:

//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: '/',
  });
}

La libreria di Angular MSAL include tre flussi di accesso: accesso interattivo (in cui un utente seleziona il pulsante di accesso), MSAL Guard e MSAL Interceptor. Le configurazioni MSAL Guard e MSAL Interceptor diventano effettive quando un utente tenta di accedere a una risorsa protetta senza un token di accesso valido. In questi casi, la libreria MSAL forza l'accesso dell'utente.

Gli esempi seguenti illustrano come configurare MSAL Guard e MSAL Interceptor per l'accesso con una finestra popup o un reindirizzamento:

// 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]
    ])
  })

Precompilare il nome di accesso

Durante un percorso utente di accesso, l'app potrebbe avere come destinazione un utente specifico. Quando un'app è destinata a un utente, può specificare nella richiesta di autorizzazione il login_hint parametro di query con il nome di accesso dell'utente. Azure AD B2C popola automaticamente il nome di accesso e l'utente deve fornire solo la password.

Per prepopopolare il nome di accesso, eseguire le operazioni seguenti:

  1. Se si usano criteri personalizzati, aggiungere l'attestazione di input necessaria come descritto in Configurare l'accesso diretto.
  2. Creare o usare un oggetto di configurazione MSAL esistente PopupRequestRedirectRequest .
  3. Impostare l'attributo con l'hint loginHint di accesso corrispondente.

I frammenti di codice seguenti illustrano come passare il parametro hint di accesso. Vengono usati bob@contoso.com come valore dell'attributo.

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

Pre-selezionare un provider di identità

Se la procedura di accesso per l'applicazione è stata configurata per includere gli account di social networking, ad esempio Facebook, LinkedIn o Google, è possibile specificare il parametro domain_hint. Questo parametro di query fornisce un hint ad Azure AD B2C sul provider di identità di social networking che deve essere usato per l'accesso. Ad esempio, se l'applicazione specifica domain_hint=facebook.com, il flusso di accesso passa direttamente alla pagina di accesso di Facebook.

Per reindirizzare gli utenti a un provider di identità esterno, eseguire le operazioni seguenti:

  1. Controllare il nome di dominio del provider di identità esterno. Per altre informazioni, vedere Reindirizzare l'accesso a un provider di social networking.
  2. Creare o usare un oggetto di configurazione MSAL esistente PopupRequestRedirectRequest .
  3. Impostare l'attributo con l'hint domainHint di dominio corrispondente.

I frammenti di codice seguenti illustrano come passare il parametro dell'hint di dominio. Vengono usati facebook.com come valore dell'attributo.

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

Specificare la lingua dell'interfaccia utente

La personalizzazione della lingua in Azure AD B2C consente al flusso utente di soddisfare diverse lingue in base alle esigenze dei clienti. Per altre informazioni, vedere Personalizzazione della lingua.

Per impostare la lingua preferita, eseguire le operazioni seguenti:

  1. Configurare la personalizzazione della lingua.
  2. Creare o usare un oggetto di configurazione MSAL esistente PopupRequestRedirectRequest con extraQueryParameters attributi.
  3. Aggiungere il ui_locales parametro con il codice di lingua corrispondente agli extraQueryParameters attributi.

I frammenti di codice seguenti illustrano come passare il parametro dell'hint di dominio. Vengono usati es-es come valore dell'attributo.

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

Passare un parametro di stringa di query personalizzato

Con i criteri personalizzati, è possibile passare un parametro di stringa di query personalizzato. Un buon esempio di caso d'uso è quando si vuole modificare dinamicamente il contenuto della pagina.

Per passare un parametro di stringa di query personalizzato, eseguire le operazioni seguenti:

  1. Configurare l'elemento ContentDefinitionParameters .
  2. Creare o usare un oggetto di configurazione MSAL esistente PopupRequestRedirectRequest con extraQueryParameters attributi.
  3. Aggiungere il parametro della stringa di query personalizzata, ad esempio campaignId. Impostare il valore del parametro.

I frammenti di codice seguenti illustrano come passare un parametro di stringa di query personalizzato. Vengono usati germany-promotion come valore dell'attributo.

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

Passare un hint per il token ID

Un'applicazione relying party può inviare un token JSON Web (JWT) in ingresso come parte della richiesta di autorizzazione OAuth2. Il token in ingresso è un hint per l'utente o la richiesta di autorizzazione. Azure AD B2C convalida il token e quindi estrae l'attestazione.

Per includere un hint per il token ID nella richiesta di autenticazione, eseguire le operazioni seguenti:

  1. Nei criteri personalizzati definire il profilo tecnico di un hint per il token ID.
  2. Creare o usare un oggetto di configurazione MSAL esistente PopupRequestRedirectRequest con extraQueryParameters attributi.
  3. Aggiungere il id_token_hint parametro con la variabile corrispondente che archivia il token ID.

I frammenti di codice seguenti illustrano come definire un hint per il token ID:

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

Usare un dominio personalizzato

Usando un dominio personalizzato, è possibile personalizzare completamente l'URL di autenticazione. Dal punto di vista dell'utente, gli utenti rimangono nel dominio durante il processo di autenticazione, anziché essere reindirizzati al nome di dominio di Azure AD B2C b2clogin.com.

Per rimuovere tutti i riferimenti a "b2c" nell'URL, è anche possibile sostituire il nome del tenant B2C, contoso.onmicrosoft.com, nell'URL della richiesta di autenticazione con il GUID dell'ID tenant. Ad esempio, è possibile passare https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ a https://account.contosobank.co.uk/<tenant ID GUID>/.

Per usare il dominio personalizzato per l'ID tenant nell'URL di autenticazione, seguire le indicazioni in Abilitare domini personalizzati. Aprire l'oggetto src/app/auth-config.ts di configurazione MSAL e modificare authorities e knownAuthorities usare il nome di dominio personalizzato e l'ID tenant.

Il codice JavaScript seguente mostra l'oggetto di configurazione MSAL prima della modifica:

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

Il codice JavaScript seguente mostra l'oggetto di configurazione MSAL dopo la modifica:

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

Configurare la registrazione

La libreria MSAL genera messaggi di log che consentono di diagnosticare i problemi. L'app può configurare la registrazione. L'app può anche fornire il controllo personalizzato sul livello di dettaglio e se i dati personali e dell'organizzazione vengono registrati.

È consigliabile creare un callback di registrazione MSAL e fornire agli utenti un modo per inviare i log quando hanno problemi di autenticazione. MSAL offre questi livelli di dettaglio della registrazione:

  • Errore: si è verificato un errore e è stato generato un errore. Questo livello viene usato per il debug e l'identificazione dei problemi.
  • Avviso: non si è necessariamente verificato un errore o un errore, ma le informazioni sono destinate alla diagnostica e ai problemi di individuazione.
  • Info: MSAL registra gli eventi destinati a scopi informativi e non necessariamente per il debug.
  • Dettagliato: si tratta del livello predefinito. MSAL registra i dettagli completi del comportamento della libreria.

Per impostazione predefinita, il logger MSAL non acquisisce dati personali o aziendali. La libreria offre l'opzione per abilitare la registrazione dei dati personali e dell'organizzazione se si decide di farlo.

Per configurare Angular registrazione, in src/app/auth-config.ts configurare le chiavi seguenti:

  • loggerCallback è la funzione callback del logger.
  • logLevel consente di specificare il livello di registrazione. Valori possibili: Error, Warning, Infoe Verbose.
  • piiLoggingEnabled abilita l'input dei dati personali. I valori possibili sono: true o false.

Il frammento di codice seguente illustra come configurare la registrazione MSAL:

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

Passaggi successivi