Usare Microsoft Authentication Library per JavaScript per usare Azure AD B2C

Microsoft Authentication Library per JavaScript (MSAL.js) consente agli sviluppatori JavaScript di autenticare gli utenti con identità locali e social usando Azure Active Directory B2C (Azure AD B2C).

Usando Azure AD B2C come servizio di gestione delle identità, è possibile personalizzare e controllare il modo in cui i clienti eseguono l'iscrizione, l'accesso e la gestione dei profili quando usano le applicazioni.

Azure AD B2C consente anche di personalizzare l'interfaccia utente che l'applicazione visualizza durante il processo di autenticazione.

Tipi e scenari di app supportati

MSAL.js consente alle applicazioni a pagina singola di accedere agli utenti con Azure AD B2C usando il flusso del codice di autorizzazione con concessione PKCE . Con MSAL.js e Azure AD B2C:

• Gli utenti possono eseguire l'autenticazione con le identità di social networking e locali.
• Gli utenti possono essere autorizzati ad accedere alle risorse protette di Azure AD B2C (ma non alle risorse protette di Microsoft Entra).
• Gli utenti non possono ottenere token per le API Microsoft (ad esempio, l'API Microsoft Graph) usando autorizzazioni delegate.
• Gli utenti con privilegi di amministratore possono ottenere token per le API Microsoft (ad esempio, l'API Microsoft Graph) usando autorizzazioni delegate.

Per altre informazioni, vedere Uso di Azure AD B2C

Passaggi successivi

Seguire il tutorial per:

• Effettua l'accesso degli utenti con Azure AD B2C in un'applicazione a pagina singola
• Chiamare un'API Web protetta da Azure AD B2C

⚠️ Prima di iniziare, assicurarsi di comprendere come inizializzare un oggetto app e usare risorse e ambiti. È anche consigliabile acquisire familiarità generale con Azure AD B2C. Per altre informazioni, vedere la documentazione di B2C .

MSAL.js supporta l'autenticazione con identità social (Microsoft, Google, Facebook e così via), aziendali (ADFS, Salesforce e così via) e locali (archiviate nella directory di Azure AD B2C) tramite Azure AD B2C (in breve, B2C). Quando si sviluppano app B2C con MSAL.js, è necessario tenere presenti alcuni dettagli importanti.

Fatti rapidi

Con B2C:

• Gli utenti possono eseguire l'autenticazione con le proprie identità di social networking.
• Gli utenti possono essere autorizzati ad accedere a risorse protette di B2C (ma non a risorse protette di Microsoft Entra).
• Gli utenti non possono ottenere token per le API di Microsoft (ad esempio, MS API Graph) usando autorizzazioni delegate.
• Le applicazioni possono ottenere token per le API Microsoft usando le autorizzazioni dell'applicazione (scenari di gestione utenti).

Configurazione app B2C

Di seguito è riportato un esempio di configurazione dell'app B2C:

const msalConfig = {
  auth: {
    clientId: "<your-clientID>",
    authority: "https://<your-tenant>.b2clogin.com/<your-tenant>.onmicrosoft.com/<your-policyID>",
    knownAuthorities: ["<your-tenant>.b2clogin.com"] // array of URIs that are known to be valid
  }
}

const apiConfig = {
  b2cScopes: ["https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"],
  webApiUri: "<your-api-uri>" // e.g. "https://fabrikamb2chello.azurewebsites.net/hello"
};

const loginRequest = {
  scopes: [ "openid", "offline_access" ]
}

const tokenRequest = {
  scopes: apiConfig.b2cScopes // e.g. "https://<your-tenant>.onmicrosoft.com/<your-api>/<your-scope>"
}

Endpoint Microsoft Entra vs B2C

Una differenza fondamentale tra i tenant di Microsoft Entra ID e i tenant di Azure AD B2C sono gli endpoint.

Un tenant di Microsoft Entra ID:

• Contiene solo endpoint Microsoft Entra (login.microsoftonline.com/*).
• Espone un singolo endpoint di token (login.microsoftonline.com/.../token).
• Microsoft Entra endpoint consentono di ottenere i token per:
  • Le applicazioni protette da Microsoft Entra ID.
  • Microsoft API, ad esempio MS API Graph.

Un tenant B2C :

• Contiene gli endpoint di Microsoft Entra ID e di Azure AD B2C (login.microsoftonline.com/* e <your-domain>.b2clogin.com/*).
• Espone endpoint di token separati per ogni (login.microsoftonline.com/.../token, <your-domain>.b2clogin.com/.../token).
• Gli endpoint B2C consentono di ottenere i token per:
  • Le applicazioni protette da B2C.

Autorizzazioni B2C e autorizzazioni delegate

Le autorizzazioni delegate specificano l'accesso basato sull'ambito usando l'autorizzazione interattiva dell'utente connesso. Queste autorizzazioni vengono presentate alla risorsa (ad esempio, l'API Web, MS API Graph e così via) in fase di esecuzione come scp attestazioni nel token di accesso del client.

L'autenticazione B2C di un utente non può essere usata per autorizzare a Microsoft Entra app protette o api Microsoft (protette anche da Microsoft Entra ID). Di conseguenza, quando si usa MSAL.js, non è possibile usare l'endpoint <your-tenant>.b2clogin.com/.../token per ottenere un token per MS API Graph.

Autorizzazioni OpenID Connect

L'eccezione alla regola precedente deriva da un set speciale di ambiti noti come autorizzazioni OIDC ( OpenID Connect ), che include openid e profile. Un'altra autorizzazione speciale è offline_access, che consente all'app di accedere a risorse per conto dell'utente per un periodo di tempo prolungato (usando un token di aggiornamento). MSAL.js fornirà openid, profile e offline_access per impostazione predefinita durante le richieste loginPopup() e loginRedirect().

Microsoft Entra'autenticazione in un tenant B2C

Quando si utilizza l'endpoint login.microsoftonline.com senza specificare alcun parametro policyID con un tenant B2C, si accede agli endpoint Microsoft Entra del tenant B2C. Solo in questo caso è possibile ottenere token per le risorse MS API Graph, utilizzando il contesto dell'utente connesso.

Autorizzazioni per applicazioni e B2C

Le autorizzazioni dell'applicazione specificano l'accesso in base al ruolo usando le credenziali o l'identità dell'applicazione client. Queste autorizzazioni vengono presentate alla risorsa in fase di esecuzione come roles attestazioni nel token di accesso del client.

Scenari di gestione utenti

Gli login.microsoftonline.com endpoint possono comunque essere usati per qualsiasi lavoro in background, non interattivo sulla gestione di utenti e attributi, anche se sono specifici di B2C. Quando si crea una registrazione dell'applicazione per un'app che userà la concessione delle credenziali client per gestire le risorse B2C usando MS API Graph, è necessario selezionare gli ambiti API Graph per cui l'app di gestione deve ottenere l'autorizzazione (vedere la documentazione per altre informazioni). Aspetti da tenere presenti:

• Per ottenere le autorizzazioni dell'applicazione, è necessario eseguire l'autenticazione dell'applicazione (usando la concessione delle credenziali client).
• Per ottenere le autorizzazioni delegate, è necessario eseguire l'autenticazione utente con un account amministratore.
• Le app di gestione vengono in genere registrate come destinatari di tipo 1 o tipo 2 (vedere di seguito).

Altri argomenti

Tipi di gruppo di destinatari e B2C e account

Durante la registrazione dell'applicazione, viene richiesto di selezionare un gruppo di destinatari. Il tipo di pubblico selezionato indica il tipo di autenticazione a cui è destinato.

Acquisizione di un token di accesso per la propria API

Esistono due modi per acquisire un token di accesso per la propria API:

1. Richiedi il tuo clientId come ambito:

msal.loginRedirect({
    scopes: ["client_Id"]
});

Altre informazioni sono disponibili qui

2. Esporre il proprio ambito personalizzato nella registrazione dell'app e richiedere questo ambito:

msal.loginRedirect({
    scopes: ["api://clientId/customScope.Read"]
});

Esperienza B2C e disconnessione

La disconnessione reimposta lo stato di single sign-on dell'utente con Azure AD B2C, ma potrebbe non disconnettere l'utente dalla sessione del proprio provider di identità social. Se l'utente seleziona lo stesso provider di identità durante un accesso successivo, potrebbe eseguire di nuovo l'autenticazione senza immettere le credenziali. Qui il presupposto è che, se un utente vuole disconnettersi dall'applicazione, non significa necessariamente che voglia disconnettersi dal proprio account di social networking (ad esempio Facebook).

B2C e flusso di invito

MSAL.js elabora solo i token richiesti in origine. Se il flusso richiede l'invio di un collegamento che può usare per iscriversi, è necessario assicurarsi che il collegamento punti all'app, non direttamente al servizio B2C. Un flusso di invito di esempio è il seguente:

1. L'utente fa clic sul collegamento all'app
2. L'app chiama msal.loginRedirect e include id_token_hint nel extraQueryParameters

    msal.loginRedirect({
        scopes: ["example_scope"],
        extraQueryParameters: {'id_token_hint': your_id_token_hint}
    });

3. L'app viene reindirizzata al servizio B2C in cui l'utente immette credenziali/iscrizione
4. Il servizio B2C reindirizza di nuovo all'app che chiama await msal.handleRedirectPromise() per elaborare la risposta e salvare i token

Utilizzo di B2C e iframe

Azure AD B2C offre un'esperienza di accesso incorporata, che consente di eseguire il rendering di un'interfaccia utente di accesso personalizzata in un iframe. Poiché MSAL impedisce il reindirizzamento in iframe per impostazione predefinita, è necessario impostare l'opzione di configurazione allowRedirectInIframe su true per poter usare questa funzionalità. Per altre considerazioni sull'uso di iframe, vedere: Uso di MSAL nelle app iframe