Condividi tramite

Configurare le opzioni di autenticazione in un'applicazione a pagina singola usando Azure AD 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.

Prima di iniziare, acquisire familiarità con l'articolo seguente: Configurare l'autenticazione in un'applicazione Web di esempio.

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 un dominio personalizzato e l'ID tenant nell'URL di autenticazione, seguire le indicazioni in Abilitare domini personalizzati. Trovare l'oggetto di configurazione di Microsoft Authentication Library (MSAL) e modificare le autorità e le autorità noteAuthorities 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"],
      ...
    },
  ...
}

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 usa un criterio personalizzato, aggiungere l'attestazione di input necessaria, come descritto in Configurare l'accesso diretto.

  2. Creare un oggetto per archiviare il login_hint e passare questo oggetto al metodo MSAL loginPopup().

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

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 un oggetto per archiviare extraQueryParameters e passare questo oggetto al metodo MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

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 un oggetto per archiviare extraQueryParameters e passare questo oggetto al metodo MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

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 un oggetto per archiviare extraQueryParameters e passare questo oggetto al metodo MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

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 un profilo tecnico dell'hint per il token ID.

  2. Creare un oggetto per archiviare extraQueryParameters e passare questo oggetto al metodo MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Proteggere il reindirizzamento della disconnessione

Dopo la disconnessione, l'utente viene reindirizzato all'URI specificato nel post_logout_redirect_uri parametro , indipendentemente dagli URL di risposta specificati per l'applicazione. Tuttavia, se viene passato un valore valido id_token_hint e l'opzione Richiedi token ID nelle richieste di disconnessione è attivata, Azure AD B2C verifica che il valore di corrisponda a uno degli URI di reindirizzamento configurati dell'applicazione prima di post_logout_redirect_uri eseguire il reindirizzamento. Se non è stato configurato alcun URL di risposta corrispondente per l'applicazione, viene visualizzato un messaggio di errore e l'utente non viene reindirizzato.

Per supportare un URI di reindirizzamento di disconnessione protetto, seguire questa procedura:

  1. Creare una variabile accessibile a livello globale per archiviare .id_token

    let id_token = "";

  2. Nella funzione MSAL handleResponse analizzare l'oggetto id_token dall'oggetto authenticationResult nella id_token variabile .

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. signOut Nella funzione aggiungere il id_token_hint parametro all'oggetto logoutRequest.

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

Nell'esempio precedente, il post_logout_redirect_uri passato alla richiesta di disconnessione sarà nel formato : https://your-app.com/. Questo URL deve essere aggiunto all'URL di risposta della registrazione dell'applicazione.

Abilitare la disconnessione singola

La disconnessione singola in Azure AD B2C usa la disconnessione del canale front-channel OpenId Connect per effettuare richieste di disconnessione a tutte le applicazioni a cui l'utente ha eseguito l'accesso tramite Azure AD B2C.

Queste richieste di disconnessione vengono effettuate dalla pagina di disconnessione di Azure AD B2C, in un Iframe nascosto. Iframe effettuano richieste HTTP a tutti gli endpoint di disconnessione del canale front-channel registrati per le app registrate da Azure AD B2C come connesso.

L'endpoint di disconnessione per ogni applicazione deve chiamare il metodo logout() MSAL . È anche necessario configurare in modo esplicito MSAL per l'esecuzione all'interno di un Iframe in questo scenario impostando allowRedirectInIframe su true.

L'esempio di codice seguente imposta allowRedirectInIframe su true:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Passaggi successivi

Altre informazioni sulle opzioni di configurazioneMSAL.js.