Personalizzare l'interfaccia utente di un percorso utente con criteri personalizzatiCustomize the UI of a user journey with Custom Policies

Nota

I criteri personalizzati sono disponibili in anteprima pubblica.Custom policies are in public preview.

I criteri personalizzati sono stati progettati principalmente per professionisti della gestione delle identità che devono affrontare scenari complessi.Custom policies are designed primarily for identity pros who need to address complex scenarios. Per la maggior parte degli scenari è consigliabile usare i criteri predefiniti di Azure Active Directory B2C.For most scenarios, we recommend that you use Azure Active Directory B2C built-in policies. I criteri predefiniti sono più facili da impostare per la configurazione.Built-in policies are easier to set up for your configuration. È possibile usare i criteri predefiniti e i criteri personalizzati nello stesso tenant di Azure Active Directory B2C.You can use built-in and custom policies in the same Azure Active Directory B2C tenant. Per altre informazioni, vedere la panoramica dei criteri personalizzati.To learn more, see the overview of custom policies.

Nota

Questo articolo descrive in modo approfondito come funziona la personalizzazione dell'interfaccia utente e come abilitarla con i criteri personalizzati B2C, usando il framework di esperienza di gestione delle identitàThis article is an advanced description of how UI customization works and how to enable with B2C Custom policies, using the Identity Experience Framework

Un'esperienza utente integrata è fondamentale per qualsiasi soluzione Business to Consumer.A seamless user experience is key for any business-to-consumer solution. Per esperienza utente integrata si intende un'esperienza, con un dispositivo o un browser, in cui il percorso di un utente nel servizio non sia distinguibile dal quello del servizio clienti usato.By seamless user experience, we mean an experience, whether on device or browser, where a user’s journey through our service cannot be distinguished from that of the customer service they are using.

Informazioni sulla modalità CORS per la personalizzazione dell'interfaccia utenteUnderstand the CORS way for UI customization

Azure AD B2C consente di personalizzare l'aspetto dell'esperienza utente nelle diverse pagine che possono essere potenzialmente rese disponibili e visualizzate da Azure AD B2C tramite i criteri personalizzati.Azure AD B2C allows you to customize the look-and-feel of user experience (UX) on the various pages that can be potentially served and displayed by Azure AD B2C via your custom policies.

A tale scopo, Azure AD B2C esegue il codice nel browser del cliente e usa il moderno approccio standard Condivisione risorse tra le origini (CORS) per caricare il contenuto personalizzato da un determinato URL che punta ai modelli HTML5/CSS, come si specifica in un criterio personalizzato.For that purpose, Azure AD B2C runs code in your consumer's browser and uses the modern and standard approach Cross-Origin Resource Sharing (CORS) to load custom content from a specific URL that you specify in a custom policy to point to your HTML5/CSS templates. CORS è un meccanismo che consente alle risorse limitate, ad esempio i tipi di carattere, in una pagina Web di essere richieste da un altro dominio esterno al dominio da cui la risorsa è stata originata.CORS is a mechanism that allows restricted resources, like fonts, on a web page to be requested from another domain outside the domain from which the resource originated.

Rispetto alla precedente modalità tradizionale, in cui le pagine modello sono di proprietà della soluzione, nella quale si inserivano testo e immagini limitati e il controllo del layout e dell'aspetto era limitato al punto che non era semplice raggiungere un'esperienza integrata, la modalità CORS supporta HTML5 e CSS e consente di:Compared to the old traditional way, where template pages are owned by the solution where you provided limited text and images, where limited control of layout and feel was offered leading to more than difficulties to achieve a seamless experience, the CORS way supports HTML5 and CSS and allow you to:

  • Ospitare il contenuto e inserire nella soluzione i controlli usando lo script lato client.Host the content and the solution injects its controls using client side script.
  • Avere il controllo completo di ogni pixel del layout e dell'aspetto.Have full control over every pixel of layout and feel.

È possibile inserire un numero illimitato di pagine contenuto creando file HTML5/CSS secondo le esigenze.You can provide as many content pages as you like by crafting HTML5/CSS files as appropriate.

Nota

Per motivi di sicurezza non è attualmente possibile usare JavaScript per la personalizzazione.For security reasons, the use of JavaScript is currently blocked for customization. Per sbloccare JavaScript, è necessario usare un nome di dominio per il tenant Azure AD B2C.To unblock JavaScript, use of a custom domain name for your Azure AD B2C tenant is needed.

In ogni modello HTML5/CSS si inserisce un elemento anchor, che corrisponde all'elemento <div id=”api”> necessario nella pagina HTML o contenuto, come illustrato più avanti.In each of your HTML5/CSS templates, you provide an anchor element, which corresponds to the required <div id=”api”> element in the HTML or the content page as illustrate hereafter. Azure AD B2C richiede che tutte le pagine contenuto abbiano questo specifico elemento div.Azure AD B2C requires that all content pages have this specific div.

<!DOCTYPE html>
<html>
  <head>
    <title>Your page content’s tile!</title>
  </head>
  <body>
    <div id="api"></div>
  </body>
</html>

Il contenuto relativo ad Azure AD B2C per la pagina verrà inserito in questo div, mentre il resto della pagina può essere controllato dall'utente.Azure AD B2C-related content for the page will be injected into this div, while the rest of the page is yours to control. Il codice JavaScript di Azure AD B2C effettua il pull del contenuto e inserisce il codice HTML in questo specifico elemento div.The Azure AD B2C’s JavaScript code pulls in your content and injects our HTML into this specific div element. Azure AD B2C inserisce i controlli seguenti secondo le esigenze: controllo di scelta account, controlli di accesso, controlli a più fattori (attualmente basati sul telefono) e controlli di raccolta di attributi.Azure AD B2C injects the following controls as appropriate: account chooser control, login controls, multi-factor (currently phone-based) controls, and attribute collection controls. Azure AD B2C assicura che tutti i controlli siano conformi a HTML5 e accessibili, che tutti i controlli possano essere completamente personalizzati con stili e che la versione di un controllo non regredisca.Azure AD B2C ensures that all the controls are HTML5 compliant and accessible, all the controls can be fully styled, and that a control version will not regress.

Il contenuto unito viene infine visualizzato dal cliente come documento dinamico.The merged content is eventually displayed as the dynamic document to your consumer.

Per assicurarsi che tutto funzioni come previsto, è necessario:To ensure of the above works as expected, you must:

  • Assicurarsi che il contenuto sia conforme a HTML5 e accessibileEnsure your content is HTML5 compliant and accessible
  • Assicurarsi che il server di contenuti sia abilitato per CORS.Ensure your content server is enabled for CORS.
  • Rendere disponibile il contenuto tramite HTTPS.Serve content over HTTPS.
  • Usare URL assoluti, ad esempio https://yourdomain/content per tutti i collegamenti e il contenuto CSS.Use absolute URLS such as https://yourdomain/content for all links and CSS content.

Suggerimento

Per verificare che CORS sia abilitato per il sito su cui si ospita il contenuto e per testare le richieste CORS, è possibile usare il sito http://test-cors.org/.To verify that the site you are hosting your content on has CORS enabled and test CORS requests, you can use the site http://test-cors.org/. Da questo sito è semplicemente possibile inviare la richiesta CORS a un server remoto (per verificare se CORS è supportato) oppure a un server di test (per esplorare determinate funzionalità di CORS).Thanks to this site, you can simply either send the CORS request to a remote server (to test if CORS is supported), or send the CORS request to a test server (to explore certain features of CORS).

Suggerimento

Il sito http://enable-cors.org/ costituisce anche una risorsa più che utile per CORS.The site http://enable-cors.org/ also constitutes a more than useful resources on CORS.

Grazie a questo approccio basato su CORS, gli utenti finali avranno quindi esperienze coerenti nell'applicazione e nelle pagine rese disponibili da Azure AD B2C.Thanks to this CORS-based approach, the end users will then have consistent experiences between your application and the pages served by Azure AD B2C.

Creare un account di archiviazioneCreate a storage account

Come prerequisito, è necessario creare un account di archiviazione.As a prerequisite, you need to create a storage account. Per creare un account di archiviazione BLOB di Azure è necessaria una sottoscrizione di Azure.You will need an Azure subscription to create an Azure Blob Storage account. È possibile registrarsi per una versione di valutazione gratuita nel sito Web di Azure.You can sign up a free trial at the Azure website.

  1. Aprire una sessione del browser e passare al portale di Azure.Open a browsing session and navigate to the Azure portal.
  2. Accedere con le credenziali amministrative.Sign in with your administrative credentials.
  3. Fare clic su Nuovo > Dati e archiviazione > Account di archiviazione.Click New > Data + Storage > Storage account. Viene aperto un pannello Crea account di archiviazione.A Create storage account blade opens up.
  4. In Nome specificare un nome per l'account di archiviazione, ad esempio contoso369b2c.In Name, provide a name for the storage account, for example, contoso369b2c. Questo valore più avanti verrà indicato come storageAccountName.This value will be later referred as to storageAccountName.
  5. Impostare le selezioni appropriate per il piano tariffario, il gruppo di risorse e la sottoscrizione.Pick the appropriate selections for the pricing tier, the resource group and the subscription. Verificare che l'opzione Aggiungi alla Schermata iniziale sia selezionata.Make sure that you have the Pin to Startboard option checked. Fare clic su Create.Click Create.
  6. Tornare alla schermata iniziale e fare clic sull'account di archiviazione appena creato.Go back to the Startboard and click the storage account that you just created.
  7. Nella sezione Servizi fare clic su BLOB.In the Services section, click Blobs. Viene aperto un pannello Servizio BLOB.A Blob service blade opens up.
  8. Fare clic su + Contenitore.Click + Container.
  9. In Nome specificare un nome per il contenitore, ad esempio b2c.In Name, provide a name for the container, for example, b2c. Questo valore più avanti verrà indicato come containerName.This value will be later referred to as containerName.
  10. Selezionare BLOB come Tipo di accesso.Select Blob as the Access type. Fare clic su Crea.Click Create.
  11. Il contenitore appena creato verrà visualizzato nell'elenco nel pannello Servizio BLOB.The container that you created will appear in the list on the Blob service blade.
  12. Chiudere il pannello BLOB .Close the Blobs blade.
  13. Nel pannello Account di archiviazione fare clic sull'icona Chiave.On the storage account blade, click the Key icon. Viene aperto un pannello Chiavi di accesso.An Access keys blade opens up.
  14. Annotare il valore di key1.Write down the value of key1. Questo valore più avanti verrà indicato come key1.This value will be later referred as key1.

Download dello strumento di supportoDownloading the helper tool

  1. Scaricare lo strumento di supporto da GitHub.Download the helper tool from GitHub.
  2. Salvare il file B2C-AzureBlobStorage-Client-master.zip nel computer locale.Save the B2C-AzureBlobStorage-Client-master.zip file on your local machine.
  3. Estrarre il contenuto del file B2C-AzureBlobStorage-Client-master.zip nel disco locale, ad esempio nella cartella UI-Customization-Pack.Extract the content of the B2C-AzureBlobStorage-Client-master.zip file on your local disk, for example under the UI-Customization-Pack folder. Verrà creata una cartella B2C-AzureBlobStorage-Client-master.This will create a B2C-AzureBlobStorage-Client-master folder underneath.
  4. Aprire tale cartella ed estrarre il contenuto del file di archivio B2CAzureStorageClient.zip.Open that folder and extract the content of the archive file B2CAzureStorageClient.zip within it.

Caricare i file di esempio di UI-Customization-PackUpload the UI-Customization-Pack sample files

  1. Usando Esplora risorse, passare alla cartella B2C-AzureBlobStorage-Client-master nella cartella UI-Customization-Pack creata nella sezione precedente.Using Windows Explorer, navigate to the folder B2C-AzureBlobStorage-Client-master located under the UI-Customization-Pack folder created in the previous section.
  2. Eseguire il file B2CAzureStorageClient.exe.Run the B2CAzureStorageClient.exe file. Questo programma caricherà semplicemente tutti i file nella directory specificata per l'account di archiviazione e abiliterà l'accesso CORS per tali file.This program will simply upload all the files in the directory that you specify to your storage account, and enable CORS access for those files.
  3. Quando richiesto, specificare: a.When prompted, specify: a. Il nome dell'account di archiviazione, storageAccountName, ad esempio contoso369b2c.The name of your storage account, storageAccountName, for example contoso369b2c. b.b. La chiave di accesso primaria dell'archivio BLOB di Azure, key1, ad esempio contoso369b2c.The primary access key of your azure blob storage, key1, for example contoso369b2c. c.c. Il nome del contenitore dell'archivio BLOB del servizio di archiviazione, containerName, ad esempio b2c.The name of your storage blob storage container, containerName, for example b2c. d.d. Il percorso dei file di esempio dello starter pack, ad esempio ..\B2CTemplates\wingtiptoys.The path of the Starter-Pack sample files, for example ..\B2CTemplates\wingtiptoys.

Se la procedura precedente è stata eseguita, i file HTML5 e CSS di UI-Customization-Pack per la società fittizia wingtiptoys punteranno così all'account di archiviazione.If you followed the steps above, the HTML5 and CSS files of the UI-Customization-Pack for the fictitious company wingtiptoys will now be pointing to your storage account. Per verificare che il contenuto sia stato caricato correttamente, aprire il pannello del contenitore correlato nel portale di Azure.You can verify that the content has been uploaded correctly by opening the related container blade in the Azure portal. In alternativa, per verificare che il contenuto sia stato caricato correttamente, accedere alla pagina da un browser.You can alternatively verify that the content has been uploaded correctly by accessing the page from a browser. Per altre informazioni, vedere Azure Active Directory B2C: strumento di supporto per la dimostrazione della funzionalità di personalizzazione dell'interfaccia utente della pagina.For more information, see Azure Active Directory B2C: A helper tool used to demonstrate the page user interface (UI) customization feature.

Assicurarsi che CORS sia abilitato per l'account di archiviazioneEnsure the storage account has CORS enabled

La condivisione di risorse tra le origini (CORS) deve essere abilitata nell'endpoint in modo che Azure AD B2C Premium possa caricare il contenuto.CORS (Cross-Origin Resource Sharing) must be enabled on your endpoint for Azure AD B2C Premium to load your content. Infatti il contenuto è ospitato in un dominio diverso dal dominio da cui Azure AD B2C Premium renderà disponibile la pagina.This is because your content is hosted on a different domain than the domain Azure AD B2C Premium will be serving the page from.

Per verificare che CORS sia abilitato per la risorsa di archiviazione in cui si ospita il contenuto, procedere con i passaggi seguenti:To verify that the storage you are hosting your content on has CORS enabled, proceed with the following steps:

  1. Aprire una sessione del browser e passare alla pagina unified.html usando l'URL completo del percorso nell'account di archiviazione, https://<storageAccountName>.blob.core.windows.net/<containerName>/unified.html.Open a browsing session and navigate to the page unified.html using the full URL of its location in your storage account, https://<storageAccountName>.blob.core.windows.net/<containerName>/unified.html. Ad esempio, https://contoso369b2c.blob.core.windows.net/b2c/unified.html.For example, https://contoso369b2c.blob.core.windows.net/b2c/unified.html.
  2. Passare a http://test-cors.org. Questo sito consente di verificare che CORS sia abilitato per la pagina in uso.Navigate to http://test-cors.org. This site allows you to verify that the page you are using has CORS enabled.

  3. In Remote URL (URL remoto) immettere l'URL completo per il contenuto di unified.html e fare clic su Send Request (Invia richiesta).In Remote URL, enter the full URL for your unified.html content, and click Send Request.

  4. Verificare che l'output nella sezione Results (Risultati) contenga XHR status: 200 (Stato XHR: 200).Verify that the output in the Results section contains XHR status: 200. Questa impostazione indica che CORS è abilitato.This indicates that CORS is enabled. L'account di archiviazione ora includerà un contenitore BLOB denominato b2c nella spiegazione, contenente i modelli wingtiptoys seguenti dello starter pack.The storage account should now contain a blob container named b2c in our illustration that contains the following wingtiptoys templates from the Starter-Pack.

La tabella seguente descrive lo scopo delle pagine HTML5 precedenti.The following table describes the purpose of the above HTML5 pages.

Modello HTML5HTML5 template DescrizioneDescription
phonefactor.htmlphonefactor.html Questa pagina può essere usata come modello per una pagina di autenticazione a più fattori.This page can be used as a template for a multi-factor authentication page.
resetpassword.htmlresetpassword.html Questa pagina può essere usata come modello per una pagina Password dimenticata.This page can be used as a template for a forgot password page.
selfasserted.htmlselfasserted.html Questa pagina può essere usata come modello per una pagina di iscrizione all'account di social networking, una pagina di iscrizione dell'account locale o una pagina di accesso dell'account locale.This page can be used as a template for a social account sign-up page, a local account sign-up page, or a local account sign-in page.
unified.htmlunified.html Questa pagina può essere usata come modello per una pagina unificata per l'iscrizione o l'accesso.This page can be used as a template for a unified sign-up or sign-in page.
updateprofile.htmlupdateprofile.html Questa pagina può essere usata come modello per una pagina di aggiornamento del profilo.This page can be used as a template for a profile update page.

Per aggiungere un collegamento ai modelli HTML5/CSS al percorso utente, è possibile modificare direttamente un criterio personalizzato.You can add a link to your HTML5/CSS templates to your user journey by editing a custom policy directly.

I modelli HTML5/CSS da usare nel percorso utente devono essere specificati in un elenco di definizioni del contenuto che possono essere usate in tali percorsi utente.The custom HTML5/CSS templates to use in your user journey have to be specified in a list of content definitions that can be used in those user journeys. A tale scopo, un elemento XML facoltativo deve essere dichiarato nella sezione del file XML del criterio personalizzato.For that purpose, an optional XML element must be declared under the section of your custom policy XML file.

La tabella seguente descrive il set di ID definizione del contenuto riconosciuti dal motore di esperienza di gestione delle identità di Azure AD B2C e il tipo di pagine correlate.The following table describes the set of content definition ids recognized by the Azure AD B2C identity experience engine and the type of pages that relates to them.

ID definizione del contenutoContent definition id DescrizioneDescription
api.errorapi.error Pagina di errore.Error page. Questa pagina viene visualizzata quando viene rilevata un'eccezione o un errore.This page is displayed when an exception or an error is encountered.
api.idpselectionsapi.idpselections Pagina di selezione del provider di identità.Identity provider selection page. Questa pagina contiene un elenco dei provider di identità che l'utente può scegliere durante la procedura di accesso.This page contains a list of identity providers that the user can choose from during sign-in. Sono presenti provider di identità aziendali, provider di identità basati su social network, ad esempio Facebook e Google+, o account locali (basati su indirizzo di posta elettronica o nome utente).These are either enterprise identity providers, social identity providers such as Facebook and Google+, or local accounts (based on email address or user name).
api.idpselections.signupapi.idpselections.signup Selezione del provider di identità per l'iscrizione.Identity provider selection for sign-up. Questa pagina contiene un elenco dei provider di identità che l'utente può scegliere durante la procedura di iscrizione.This page contains a list of identity providers that the user can choose from during sign-up. Sono presenti provider di identità aziendali, provider di identità basati su social network, ad esempio Facebook e Google+, o account locali (basati su indirizzo di posta elettronica o nome utente).These are either enterprise identity providers, social identity providers such as Facebook and Google+, or local accounts (based on email address or user name).
api.localaccountpasswordresetapi.localaccountpasswordreset Pagina Password dimenticata.Forgot password page. Questa pagina contiene un modulo che l'utente deve compilare per avviare la reimpostazione della password.This page contains a form that the user has to fill to initiate their password reset.
api.localaccountsigninapi.localaccountsignin Pagina di accesso dell'account locale.Local account sign-in page. Questa pagina contiene un modulo di accesso che l'utente deve compilare per eseguire l'accesso con un account locale basato su indirizzo di posta elettronica o nome utente.This page contains a sign-in form that the user has to fill in when signing in with a local account that is based on an email address or a user name. Il modulo può contenere una casella di input di testo e una casella di immissione della password.The form can contain a text input box and password entry box.
api.localaccountsignupapi.localaccountsignup Pagina di iscrizione dell'account locale.Local account sign-up page. Questa pagina contiene un modulo di iscrizione che l'utente deve compilare per eseguire l'iscrizione a un account locale basato su indirizzo di posta elettronica o nome utente.This page contains a sign-up form that the user has to fill in when signing up for a local account that is based on an email address or a user name. Il modulo può contenere diversi controlli di input, ad esempio caselle per l'immissione di testo, caselle per l'immissione della password, pulsanti di opzione, caselle a discesa a selezione singola e caselle di controllo con selezione multipla.The form can contain different input controls such as text input box, password entry box, radio button, single-select drop-down boxes, and multi-select check boxes.
api.phonefactorapi.phonefactor Pagina dell'autenticazione a più fattori.Multi-factor authentication page. In questa pagina gli utenti possono verificare il proprio numero di telefono (tramite SMS o chiamata vocale) durante la procedura di iscrizione o di accesso.On this page, users can verify their phone numbers (using text or voice) during sign-up or sign-in.
api.selfassertedapi.selfasserted Pagina di iscrizione dell'account locale.Social account sign-up page. Questa pagina contiene un modulo di iscrizione che l'utente deve compilare per effettuare l'iscrizione usando un account esistente di un provider di identità basato su social network, ad esempio Facebook o Google+.This page contains a sign-up form that the user has to fill in when signing up using an existing account from a social identity provider such as Facebook or Google+. Questa pagina è simile alla precedente pagina di iscrizione dell'account locale, a eccezione dei campi di immissione della password.This page is similar to the above social account sign-up page with the exception of the password entry fields.
api.selfasserted.profileupdateapi.selfasserted.profileupdate Pagina di aggiornamento del profilo.Profile update page. Questa pagina contiene un modulo che l'utente può usare per aggiornare il profilo.This page contains a form that the user can use to update their profile. Questa pagina è simile alla precedente pagina di iscrizione dell'account locale, a eccezione dei campi di immissione della password.This page is similar to the above social account sign-up page with the exception of the password entry fields.
api.signuporsigninapi.signuporsignin Pagina unificata per l'iscrizione o l'accesso.Unified sign-up or sign-in page. Questa pagina consente di gestire sia l'iscrizione che l'accesso degli utenti, che possono usare provider di identità aziendali, provider di identità basati su social network come Facebook o Google+ o account locali.This page handles both sign-up & sign-in of users, who can use enterprise identity providers, social identity providers such as Facebook or Google+, or local accounts.

Passaggi successiviNext steps

Informazioni di riferimento: conoscere il funzionamento dei criteri personalizzati con il framework di esperienza di gestione delle identità in B2CReference: Understand how custom policies work with the Identity Experience Framework in B2C