Abilitare le opzioni di autenticazione in un'app Web Node.js usando Azure Active Directory B2C

2025-05-08

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 abilitare, personalizzare e migliorare l'esperienza di autenticazione di Azure Active Directory B2C (Azure AD B2C) per l'applicazione Web Node.js.

Prima di iniziare, è importante acquisire familiarità con gli articoli seguenti:

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. Nella cartella principale del progetto, apri il file .env . Questo file contiene informazioni sul provider di identità di Azure AD B2C.

Nel file con estensione env eseguire le operazioni seguenti:

Sostituire tutte le istanze di tenant-name.b2clogin.com con il dominio personalizzato. Ad esempio, sostituire tenant-name.b2clogin.com, in login.contoso.com.
Sostituire tutte le istanze di tenant-name.onmicrosoft.com con l'ID tenant. Per altre informazioni, vedere Usare l'ID tenant.

La configurazione seguente mostra le impostazioni dell'app prima della modifica:

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://contoso.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

La configurazione seguente mostra le impostazioni dell'app dopo la modifica:

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://login.contoso.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

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:

Se stai usando una polizza personalizzata, aggiungere l'attestazione di input richiesta, come descritto in Configurare l'accesso diretto.
Trovare l'oggetto e impostare authCodeRequest l'attributo loginHint con l'hint di accesso.

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

authCodeRequest.loginHint = "bob@contoso.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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:

Controlla il nome di dominio del provider di identità esterno. Per altre informazioni, vedere Reindirizzare l'accesso a un provider di social networking.
Trovare l'oggetto e impostare authCodeRequest l'attributo domainHint con l'hint di dominio corrispondente.

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

authCodeRequest.domainHint = "facebook.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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:

Configurare la personalizzazione della lingua.
Trovare l'oggetto e impostare authCodeRequest l'attributo extraQueryParameters con il parametro aggiuntivo corrispondenteui_locales.

I frammenti di codice seguenti illustrano come passare il ui_locales parametro . Viene usato es-es come valore dell'attributo.

authCodeRequest.extraQueryParameters = {"ui_locales" : "es-es"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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:

Configurare l'elemento ContentDefinitionParameters .
Trovare l'oggetto e impostare authCodeRequest l'attributo extraQueryParameters con il parametro aggiuntivo corrispondente.

I frammenti di codice seguenti illustrano come passare il parametro della campaignId stringa di query personalizzata. Viene usato germany-promotion come valore dell'attributo.

authCodeRequest.extraQueryParameters = {"campaignId" : "germany-promotion"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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:

Nei tuoi criteri personalizzati, definisci un profilo tecnico del suggerimento del token ID.
Trovare l'oggetto e impostare authCodeRequest l'attributo extraQueryParameters con il parametro aggiuntivo corrispondenteid_token_hint.

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

authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)

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 la registrazione, in index.jsconfigurare le chiavi seguenti:

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:

 const confidentialClientConfig = {
    ...
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: msal.LogLevel.Verbose,
        }
    }
};

Passaggi successivi

Altre informazioni sulle opzioni di configurazioneMSAL.js.

Condividi tramite