Condividi tramite

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

Importante

A partire dal 1° maggio 2025, Azure AD B2C non sarà più disponibile per l'acquisto per i nuovi clienti. Altre informazioni sono disponibili nelle domande frequenti.

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 Angular o Abilitare l'autenticazione nell'applicazione a pagina singola Angular personalizzata.

Comportamento di accesso e disconnessione

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

  • Finestra popup: l'autenticazione viene eseguita 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. Esistono tuttavia problemi noti relativi alle finestre popup in Internet Explorer.
    • Per accedere con le finestre popup, nella src/app/app.component.ts classe usare il loginPopup metodo .
    • Nella classe src/app/app.module.ts, impostare l'attributo interactionType su InteractionType.Popup.
    • Per disconnettersi con 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 o criteri del browser in cui le finestre popup sono disabilitate.
    • Per accedere con reindirizzamento, nella src/app/app.component.ts classe usare il loginRedirect metodo .
    • Nella classe src/app/app.module.ts, impostare l'attributo interactionType su InteractionType.Redirect.
    • Per disconnettersi con reindirizzamento, nella classe src/app/app.component.ts usa il metodo logoutRedirect. Configurare l'URI a cui deve essere reindirizzato dopo la disconnessione impostando postLogoutRedirectUri. È consigliabile 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 ANGULAR di 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]
    ])
  })

Prepopolare 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 precompilare il nome di accesso, eseguire le operazioni seguenti:

  1. Se si usa un criterio personalizzato, aggiungere il claim di input richiesto come descritto in Configurare l'accesso diretto.
  2. Creare o utilizzare un oggetto di configurazione PopupRequest o RedirectRequest MSAL esistente.
  3. Impostare l'attributo con l'hint loginHint di accesso corrispondente.

I frammenti di codice seguenti illustrano come passare il parametro hint di accesso. Viene utilizzato 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"
    }
  },

Preselezionare un fornitore di identità

Se è stato configurato il percorso di accesso per l'applicazione per includere account di social networking, ad esempio Facebook, LinkedIn o Google, è possibile specificare il domain_hint parametro . Questo parametro di query fornisce un suggerimento ad Azure AD B2C sul provider di identità social che dovrebbe 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. Controlla 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 utilizzare un oggetto di configurazione PopupRequest o RedirectRequest MSAL esistente.
  3. Impostare l'attributo domainHint con il suggerimento di dominio corrispondente.

I frammenti di codice seguenti illustrano come passare il parametro hint di dominio. Viene utilizzato 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 PopupRequest o RedirectRequest 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 hint di dominio. Viene utilizzato 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 personalizzato della stringa di query

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 PopupRequest o RedirectRequest 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. Viene utilizzato 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"}
    }
  },

Fornire un suggerimento 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 suggerimento sull'utente o sulla 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 PopupRequest o RedirectRequest 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 per 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 offrire un controllo personalizzato sul livello di dettaglio e sulla registrazione dei dati personali e dell'organizzazione.

È consigliabile creare un callback di registrazione MSAL e consentire agli utenti di inviare i log in caso di problemi di autenticazione. MSAL offre questi livelli di dettagli di 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 al rilevamento dei problemi.
  • Info: MSAL registra gli eventi destinati a scopi informativi e non necessariamente per il debug.
  • Dettagliato: questo è il 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 la possibilità di abilitare la registrazione dei dati personali e dell'organizzazione se si decide di farlo.

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

  • loggerCallback è la funzione di callback del logger.
  • logLevel consente di specificare il livello di registrazione. Valori possibili: Error, WarningInfo, e 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

  • Last updated on