Condividi tramite

Personalizzare l'interfaccia utente con i modelli HTML in 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.

Prima di iniziare, utilizza il selettore Scegli un tipo di criterio nella parte superiore di questa pagina per scegliere il tipo di criterio che si sta configurando. Azure Active Directory B2C offre due metodi per definire il modo in cui gli utenti interagiscono con le applicazioni: tramite flussi utenti predefiniti o tramite criteri completamente configurabili. I passaggi necessari in questo articolo sono diversi per ogni metodo.

La marchiatura e la personalizzazione dell'interfaccia utente che Azure Active Directory B2C (Azure AD B2C) visualizza ai vostri clienti aiuta a fornire un'esperienza utente coerente nella vostra applicazione. Queste esperienze includono l'iscrizione, l'accesso, la modifica del profilo e la reimpostazione della password. Questo articolo presenta i metodi di personalizzazione dell'interfaccia utente.

Suggerimento

Se si desidera modificare solo il logo banner, l'immagine di sfondo e il colore di sfondo delle pagine del flusso utente, è possibile provare la funzionalità di personalizzazione dell'azienda .

Panoramica di HTML e CSS personalizzati

Azure AD B2C esegue il codice nel browser del cliente usando Cross-Origin Resource Sharing (CORS). In fase di esecuzione, il contenuto viene caricato da un URL specificato nel flusso utente o nei criteri personalizzati. Ogni pagina dell'esperienza utente carica il contenuto dall'URL specificato per tale pagina. Dopo che il contenuto viene caricato dall'URL, viene unito a un frammento HTML inserito da Azure AD B2C e quindi la pagina viene visualizzata al cliente.

Margine personalizzato del contenuto della pagina

Contenuto della pagina HTML personalizzata

Creare una pagina HTML con il proprio marchio per rendere disponibile il contenuto della pagina personalizzata. Questa pagina può essere una pagina *.html statica o una pagina dinamica come .NET, Node.jso PHP, tuttavia, Azure B2C non supporta alcun motore di visualizzazione. Il rendering lato server della pagina dinamica deve essere effettuato da un'applicazione web dedicata.

Il contenuto della pagina personalizzata può contenere qualsiasi elemento HTML, incluso CSS e JavaScript, ma non può includere elementi non sicuri come iframe. L'unico elemento obbligatorio è un elemento div con id impostato su api, ad esempio questo <div id="api"></div> all'interno della pagina HTML.

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

Personalizzare le pagine predefinite Azure AD B2C

Invece di creare da zero il contenuto personalizzato della pagina, puoi personalizzare il contenuto predefinito della pagina di Azure AD B2C.

La tabella seguente elenca il contenuto di pagina predefinito fornito da Azure AD B2C. Scaricare i file e usarli come punto di partenza per creare pagine personalizzate. Vedere Modelli di esempio per informazioni su come scaricare e usare i modelli di esempio.

Pagina Descrizione Modelli
Iscrizione unificata o accesso Questa pagina gestisce il processo di iscrizione e accesso dell'utente. Gli utenti possono usare provider di identità aziendali, provider di identità di social networking, ad esempio Facebook, account Microsoft o account locali. Classico, Blu oceano e Grigio ardesia.
Accesso esclusivo La pagina di accesso è nota anche come selezione del provider di identità. Gestisce l'accesso dell'utente con l'account locale o i provider di identità federati. Usare questa pagina per consentire l'accesso senza la possibilità di iscriversi. Ad esempio, prima che l'utente possa modificare il proprio profilo. Classico, Blu oceano e Grigio ardesia.
Auto-dichiarato La maggior parte delle interazioni in Azure AD B2C in cui si prevede che l'utente fornisca l'input sono auto-dichiarate. Ad esempio, una pagina di iscrizione, una pagina di accesso o una pagina di reimpostazione della password. Usare questo modello come contenuto di pagina personalizzato per una pagina di iscrizione di un account social, una pagina di iscrizione a un account locale, una pagina di accesso all'account locale, la reimpostazione della password, il profilo di modifica, la pagina di blocco e altro ancora. La pagina autocertificata può contenere vari controlli di input, ad esempio una casella di input di testo, una casella di immissione della password, un pulsante di opzione, caselle a discesa a selezione singola e caselle di controllo a selezione multipla. Classico, Blu oceano e Grigio ardesia.
Autenticazione a più fattori In questa pagina gli utenti possono verificare i numeri di telefono (usando testo o voce) durante l'iscrizione o l'accesso. Classico, Blu oceano e Grigio ardesia.
Errore Questa pagina viene visualizzata quando viene rilevata un'eccezione o un errore. Classico, Blu oceano e Grigio ardesia.

Hosting del contenuto della pagina

Quando si usano file HTML e CSS personalizzati per personalizzare l'interfaccia utente, ospitare il contenuto dell'interfaccia utente in qualsiasi endpoint HTTPS disponibile pubblicamente che supporta CORS. Ad esempio, Archiviazione BLOB di Azure, Azure App Services, server Web, reti per la distribuzione dei contenuti (CDN), AWS S3 o sistemi di condivisione file.

Linee guida per l'uso di contenuto pagina personalizzato

  • Usare un URL assoluto quando si includono risorse esterne come file multimediali, CSS e JavaScript nel file HTML.

  • Usando il layout di pagina versione 1.2.0 e successive, è possibile aggiungere l'attributo data-preload="true" nei tag HTML per controllare l'ordine di caricamento per CSS e JavaScript. Con data-preload="true", la pagina viene costruita prima di essere visualizzata all'utente. Questo attributo aiuta a evitare che la pagina sfarfalli precaricando il file CSS, senza che l'HTML non stilizzato venga visualizzato all'utente. Il frammento di codice HTML seguente mostra l'uso del data-preload tag .

    <link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>

  • È consigliabile iniziare con il contenuto della pagina predefinito e compilarlo sopra.

  • È possibile includere JavaScript nel contenuto personalizzato.

  • Le versioni del browser supportate sono:

    • Internet Explorer 11, 10 e Microsoft Edge
    • Supporto limitato per Internet Explorer 9 e 8
    • Google Chrome 42.0 e versioni successive
    • Mozilla Firefox 38.0 e versioni successive
    • Safari per iOS e macOS, versione 12 e successive

  • A causa di restrizioni di sicurezza, Azure AD B2C non supporta gli elementi HTML frame, iframe o form.

Localizzare il contenuto

È possibile localizzare il contenuto HTML abilitando la personalizzazione language nel tenant di AD B2C Azure. L'abilitazione di questa funzionalità consente Azure AD B2C di impostare l'attributo della lingua della pagina HTML e passare il parametro OpenID Connect ui_locales all'endpoint.

Approccio a modello singolo

Durante il caricamento della pagina, Azure AD B2C imposta l'attributo della lingua della pagina HTML con la lingua corrente. Ad esempio: <html lang="en">. Per eseguire il rendering di stili diversi in base al linguaggio corrente, usare il selettore CSS :lang insieme alla definizione CSS.

L'esempio seguente definisce le classi seguenti:

  • imprint-en - Usato quando la lingua corrente è inglese.
  • imprint-de - Usato quando la lingua corrente è il tedesco.
  • imprint - Classe predefinita usata quando la lingua corrente non è inglese o tedesco.
.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

Gli elementi HTML seguenti vengono visualizzati in base al linguaggio della pagina:

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

Approccio multi-modello

La funzionalità di personalizzazione della lingua consente Azure AD B2C di passare il parametro OpenID Connect ui_locales all'endpoint. Il server di contenuto può usare questo parametro per fornire pagine HTML specifiche della lingua.

Annotazioni

Azure AD B2C non passa i parametri OpenID Connect, ad esempio ui_locales, alle pagine di eccezione.

Il contenuto può essere estratto da posizioni diverse in base alle impostazioni locali usate. Nell'endpoint abilitato per CORS si configura una struttura di cartelle per ospitare il contenuto per lingue specifiche. Chiamate quello giusto se usate il valore con caratteri jolly {Culture:RFC5646}.

Ad esempio, l'URI di pagina personalizzato potrebbe essere simile al seguente:

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

È possibile caricare la pagina in francese eseguendo il pull del contenuto da:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Guida dettagliata sul contenuto della pagina personalizzata

Ecco una panoramica del processo:

  1. Prepara un percorso per ospitare il contenuto della tua pagina personalizzata (un endpoint HTTPS abilitato per CORS accessibile pubblicamente).
  2. Scaricare e personalizzare un file di contenuto di pagina predefinito, ad esempio unified.html.
  3. Pubblica il contenuto della tua pagina personalizzata al tuo endpoint HTTPS disponibile pubblicamente.
  4. Impostare la condivisione di risorse tra le origini (CORS) per l'app Web.
  5. Indirizza la tua policy all'URI del contenuto della policy personalizzata.

Prerequisiti

1. Creare il contenuto HTML

Creare un contenuto di pagina personalizzato con il nome del marchio del prodotto nel titolo.

  1. Copiare il frammento HTML seguente. È HTML5 ben formato con un elemento vuoto denominato <div id="api"></div> che si trova all'interno dei tag <corpo>. Questo elemento indica il punto in cui il contenuto di Azure AD B2C deve essere inserito.

    <!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

  2. Incollare il frammento di codice copiato in un editor di testo

  3. Usa CSS per applicare uno stile agli elementi dell'interfaccia utente che Azure AD B2C inserisce nella pagina. L'esempio seguente mostra un semplice file CSS che include anche le impostazioni per gli elementi HTML inseriti per l'iscrizione:

    h1 {
  color: blue;
  text-align: center;
}
.intro h2 {
  text-align: center;
}
.entry {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
.divider h2 {
  text-align: center;
}
.create {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}

  4. Salvare il file come customize-ui.html.

Annotazioni

Gli elementi del modulo HTML vengono rimossi a causa di restrizioni di sicurezza se si utilizza login.microsoftonline.com. Se si desidera utilizzare gli elementi del modulo HTML nel contenuto HTML personalizzato, usare b2clogin.com.

2. Creare un account di archiviazione BLOB Azure

In questo articolo, utilizziamo l'archiviazione BLOB di Azure per ospitare i nostri contenuti. È possibile scegliere di ospitare il contenuto in un server Web, ma è necessario abilitare CORS nel server Web.

Annotazioni

In un tenant di Azure AD B2C non è possibile effettuare il provisioning dell'archiviazione Blob. È necessario creare questa risorsa nel tenant Microsoft Entra.

Per ospitare il contenuto HTML nell'archiviazione BLOB, seguire questa procedura:

  1. Accedere al portale Azure.
  2. Se si ha accesso a più tenant, selezionare l'icona Settings nel menu in alto per passare al tenant Microsoft Entra ID dal menu Directories + subscriptions menu.
  3. Nel portale di Azure cercare e selezionare Account di archiviazione
  4. Seleziona + Crea.
  5. Seleziona una sottoscrizione per l'account di archiviazione.
  6. Creare un gruppo di risorse o selezionarne uno esistente.
  7. Inserisci un nome univoco dell'account di archiviazione per il tuo account di archiviazione.
  8. Selezionare la Regione geografica per il proprio account di archiviazione.
  9. Le prestazioni possono rimanere Standard.
  10. La ridondanza può rimanere l'archiviazione con ridondanza geografica (GRS)
  11. Selezionare Review + create e attendere alcuni secondi per Microsoft Entra ID eseguire una convalida.
  12. Selezionare Crea per creare l'account di archiviazione. Al termine della distribuzione, la pagina dell'account di archiviazione viene aperta automaticamente oppure è necessario selezionare Vai alla risorsa.

2.1 Creare un contenitore

Per creare un contenitore pubblico nell'archivio BLOB, seguire questa procedura:

  1. In Impostazioni nel menu all'estrema sinistra selezionare Configurazione.
  2. Abilitare Consenti l'accesso anonimo al BLOB.
  3. Seleziona Salva.
  4. In Archiviazione dati nel menu a sinistra selezionare Contenitori.
  5. Selezionare + Contenitore.
  6. In Nome immettere root. Il nome può essere un nome scelto, ad esempio contoso, ma in questo esempio viene usata la radice per semplicità.
  7. Per Livello di accesso pubblico selezionare BLOB. Selezionando l'opzione BLOB , si consente l'accesso in sola lettura pubblico anonimo per questo contenitore.
  8. Selezionare Crea per creare il contenitore.
  9. Selezionare root per aprire il nuovo contenitore.

2.2 Caricare i file di contenuto della pagina personalizzati

  1. Selezionare Carica.
  2. Selezionare l'icona della cartella accanto a Selezionare un file.
  3. Passare a e selezionare customize-ui.html, creato in precedenza nella sezione Personalizzazione dell'interfaccia utente della pagina.
  4. Se desideri caricare in una sottocartella, espandi Avanzate e inserisci un nome di cartella nella sezione Carica nella cartella.
  5. Selezionare Carica.
  6. Selezionare il blob customize-ui.html che hai caricato.
  7. A destra della casella di testo URL selezionare l'icona Copia negli Appunti per copiare l'URL negli Appunti.
  8. Nel Web browser passare all'URL copiato per verificare che il BLOB caricato sia accessibile. Se non è accessibile, ad esempio se si verifica un ResourceNotFound errore, assicurarsi che il tipo di accesso al contenitore sia impostato su BLOB.

3. Configurare CORS

Configurare l'archiviazione BLOB per la condivisione di risorse tra le origini seguendo questa procedura:

  1. Passa all'account di archiviazione.
  2. Nel menu a sinistra, in Impostazioni, selezionare Condivisione risorse (CORS).
  3. Per Origini consentite immettere https://your-tenant-name.b2clogin.com. Sostituire your-tenant-name con il nome del tenant di Azure AD B2C. Ad esempio: https://fabrikam.b2clogin.com. Usare tutte le lettere minuscole quando si immette il nome del tenant.
  4. Per Metodi consentiti selezionare sia GET che OPTIONS.
  5. Per Intestazioni consentite immettere un asterisco (*).
  6. Per Intestazioni esposte immettere un asterisco (*).
  7. Per Età massima immettere 200.
  8. Nella parte superiore della pagina selezionare Salva.

3.1 Testare CORS

Verificare di essere pronti eseguendo la procedura seguente:

  1. Ripetere il passaggio configura CORS. Per Origini consentite immettere https://www.test-cors.org
  2. Vai a www.test-cors.org
  3. Per la casella REMOTE URL (URL remoto ) incollare l'URL del file HTML. Ad esempio, https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
  4. Selezionare Invia richiesta. Il risultato deve essere XHR status: 200. Se viene visualizzato un errore, assicurarsi che le impostazioni CORS siano corrette. Potrebbe anche essere necessario cancellare la cache del browser o aprire una sessione di esplorazione privata premendo CTRL+MAIUSC+P.

Altre informazioni su come creare e gestire account di archiviazione Azure.

4. Aggiornare il flusso utente

  1. Se si ha accesso a più tenant, selezionare l'icona Impostazioni nel menu in alto per passare al tenant Azure AD B2C dal menu Directories + sottoscrizioni.
  2. Nel portale di Azure cercare e selezionare Azure AD B2C.
  3. Nel menu a sinistra selezionare Flussi utente e quindi selezionare il flusso utente B2C_1_signupsignin1 .
  4. Selezionare Layout di pagina e quindi in Pagina unificata di iscrizione o accesso selezionare Sì per Usa contenuto della pagina personalizzato.
  5. In URI pagina personalizzata, immettere l'URI per il file custom-ui.html annotato in precedenza.
  6. Nella parte superiore della pagina selezionare Salva.

5. Testare il flusso utente

  1. Nel tenant di Azure AD B2C selezionare Flussi utente e selezionare il flusso utente B2C_1_signupsignin1.
  2. Nella parte superiore della pagina selezionare Esegui flusso utente.
  3. Nel riquadro a destra selezionare il pulsante Esegui flusso utente .

Verrà visualizzata una pagina simile all'esempio seguente con gli elementi centrati in base al file CSS creato:

Web browser che mostra la pagina di iscrizione o accesso con elementi dell'interfaccia utente personalizzati

4. Modificare il file delle estensioni

Per configurare la personalizzazione dell'interfaccia utente, copiare ContentDefinition e i relativi elementi figlio dal file di base al file delle estensioni:

  1. Apri il file di base della politica. Ad esempio: SocialAndLocalAccounts/TrustFrameworkBase.xml. Questo file di base è uno dei file di criteri inclusi nel pacchetto di avvio dei criteri personalizzato, che è necessario ottenere nel prerequisito, Introduzione ai criteri personalizzati.

  2. Cercare e copiare l'intero contenuto dell'elemento ContentDefinitions .

  3. Aprire il file di estensione. Ad esempio, TrustFrameworkExtensions.xml. Cercare l'elemento BuildingBlocks. Se l'elemento non esiste, aggiungerlo.

  4. Incollare l'intero contenuto dell'elemento ContentDefinitions copiato come elemento figlio dell'elemento BuildingBlocks .

  5. Cercare l'elemento ContentDefinition che contiene Id="api.signuporsignin" nel codice XML copiato.

  6. Modificare il valore di LoadUri nell'URL del file HTML caricato nella risorsa di archiviazione. Ad esempio: https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

    I criteri personalizzati dovrebbero essere simili al frammento di codice seguente:

    <BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Signin and Signup</Item>
      </Metadata>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

  7. Salvare il file delle estensioni.

  8. Abilitare JavaScript

5. Caricare e testare i criteri personalizzati aggiornati

5.1 Caricare i criteri personalizzati

  1. Se si ha accesso a più tenant, selezionare l'icona Impostazioni nel menu in alto per passare al tenant Azure AD B2C dal menu Directories + sottoscrizioni.
  2. Cercare e selezionare Azure AD B2C.
  3. Sotto Politiche, selezionare Identity Experience Framework.
  4. Selezionare Carica criteri personalizzati.
  5. Caricare il file delle estensioni modificato in precedenza.

5.2 Testare i criteri personalizzati usando Esegui ora

  1. Selezionare i criteri caricati e quindi selezionare Esegui adesso.
  2. Dovrebbe essere possibile iscriversi usando un indirizzo di posta elettronica.

Configurare l'URI del contenuto della pagina personalizzata dinamica

Usando Azure AD B2C con criteri personalizzati, è possibile inviare un parametro nel percorso URL o una stringa di interrogazione. Passando il parametro all'endpoint HTML, è possibile modificare dinamicamente il contenuto della pagina. Ad esempio, è possibile modificare l'immagine di sfondo nella pagina di iscrizione o accesso di AD B2C Azure, in base a un parametro passato dall'applicazione Web o per dispositivi mobili. Il parametro può essere qualsiasi risolutore di attestazioni, come l'ID applicazione, l'ID lingua o un parametro personalizzato della stringa di query, ad esempio campaignId.

Invio di parametri della stringa di query

Per inviare i parametri della stringa di query, nella policy della relying party, aggiungere un elemento ContentDefinitionParameters come illustrato di seguito.

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

Nella definizione del contenuto modificare il valore di LoadUri in https://<app_name>.azurewebsites.net/home/unified. I criteri ContentDefinition personalizzati dovrebbero essere simili al frammento di codice seguente:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

Quando Azure AD B2C carica la pagina, effettua una chiamata all'endpoint server Web:

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=00001111-aaaa-2222-bbbb-3333cccc4444

URI contenuto pagina dinamica

Il contenuto può essere estratto da posizioni diverse in base ai parametri usati. Nell'endpoint abilitato per CORS configurare una struttura di cartelle per ospitare il contenuto. Ad esempio, è possibile organizzare il contenuto nella struttura seguente. Cartella radice/cartella per lingua/i tuoi file HTML. Ad esempio, l'URI di pagina personalizzato potrebbe essere simile al seguente:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C invia il codice ISO a due lettere per la lingua, fr per il francese:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Modelli di esempio

È possibile trovare modelli di esempio per la personalizzazione dell'interfaccia utente qui:

git clone https://github.com/azure-ad-b2c/html-templates

Questo progetto contiene i modelli seguenti:

Per usare l'esempio:

  1. Clonare il repository nel computer locale. Scegliere una cartella modello /AzureBlue, /MSA o /classic.

  2. Caricare tutti i file nella cartella modello e nella cartella /src, nell'archivio Blob come descritto nelle sezioni precedenti.

  3. Aprire quindi ogni \*.html file nella cartella modello. Sostituire quindi tutte le istanze degli https://login.microsoftonline.com URL con l'URL caricato nel passaggio 2. Per esempio:

    Da:

    https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF

    A:

    https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF

  4. Salvare i \*.html file e caricarli nell'archivio BLOB.

  5. Ora modifica la politica, puntando al file HTML, come indicato in precedenza.

  6. Se vengono visualizzati tipi di carattere, immagini o CSS mancanti, controllare i riferimenti nei criteri delle estensioni e nei \*.html file.

Dipendenza bootstrap nei modelli di esempio

I modelli di esempio usano Bootstrap 3.3.5, originati dalla rete CDN bootstrap ufficiale. Questa versione è stata convalidata e testata con Azure AD B2C.

I modelli fanno riferimento all'URL della rete CDN seguente per il CSS di Bootstrap:

https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css

La configurazione predefinita nei file HTML del modello include un elemento di collegamento simile all'esempio seguente:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

Per informazioni dettagliate sul download ufficiale di Bootstrap 3.3.5 e sulla rete CDN, vedere Introduzione a Bootstrap 3.3.

Sostituire il riferimento alla rete CDN

È possibile sostituire il riferimento alla rete CDN con la rete CDN interna dell'organizzazione o una copia ospitata localmente per soddisfare i requisiti di affidabilità, sicurezza o conformità.

Importante

I modelli vengono convalidati in modo specifico rispetto a Bootstrap 3.3.5. L'aggiornamento, il downgrade o la modifica della versione di Bootstrap potrebbero introdurre problemi di compatibilità con stili, layout o componenti.

Se si modifica la versione di Bootstrap, si è responsabili del completamento dei test di regressione per verificare che i modelli personalizzati funzionino correttamente con Azure AD B2C. Mantenere la versione convalidata a meno che non siano stati completati i test appropriati.

Usare risorse di branding aziendale in HTML personalizzato

Per usare gli asset di personalizzazione dell'azienda in un codice HTML personalizzato, aggiungere i tag seguenti all'esterno del <div id="api"> tag. L'origine dell'immagine viene sostituita con quella dell'immagine di sfondo e del logo banner.

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

Contenuti correlati

Scopri come abilitare il codice JavaScript lato client.

  • Last updated on