Azure Active Directory B2C: configurare la personalizzazione dell'interfaccia utente in un criterio personalizzatoAzure Active Directory B2C: Configure UI customization in a custom policy

Nota

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

I criteri personalizzati sono stati progettati principalmente per fare fronte a scenari complessi.Custom policies are designed primarily 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.

Dopo aver completato questo articolo si avrà un criterio personalizzato per l'iscrizione e l'accesso con il proprio marchio e aspetto.After you complete this article, you will have a sign-up and sign-in custom policy with your brand and appearance. Con Azure Active Directory B2C (Azure AD B2C) si ottiene il controllo quasi completo del contenuto HTML e CSS presentato agli utenti.With Azure Active Directory B2C (Azure AD B2C), you get nearly full control of the HTML and CSS content that's presented to users. Quando si usa un criterio personalizzato, si configura la personalizzazione dell'interfaccia utente in XML anziché usare i controlli nel portale di Azure.When you use a custom policy, you configure UI customization in XML instead of using controls in the Azure portal.

prerequisitiPrerequisites

Prima di iniziare, completare Introduzione ai criteri personalizzati.Before you begin, complete Getting started with custom policies. È necessario disporre di un criterio personalizzato di lavoro per l'iscrizione e l'accesso con account locali.You should have a working custom policy for sign-up and sign-in with local accounts.

Personalizzazione dell'interfaccia utente della paginaPage UI customization

Con la funzionalità di personalizzazione dell'interfaccia utente della pagina, è possibile definire l'aspetto di qualsiasi criterio personalizzato.By using the page UI customization feature, you can customize the look and feel of any custom policy. È anche possibile mantenere la coerenza visiva e del marchio tra l'applicazione e Azure AD B2C.You can also maintain brand and visual consistency between your application and Azure AD B2C.

Ecco come funziona: Azure AD B2C esegue il codice nel browser del cliente e usa un approccio moderno denominato Condivisione di risorse tra le origini (CORS).Here's how it works: Azure AD B2C runs code in your customer's browser and uses a modern approach called Cross-Origin Resource Sharing (CORS). In primo luogo, specificare un URL nel criterio personalizzato con contenuto HTML personalizzato.First, you specify a URL in the custom policy with customized HTML content. Azure AD B2C unisce elementi dell'interfaccia utente con il contenuto HTML caricato dall'URL e quindi visualizza la pagina al cliente.Azure AD B2C merges UI elements with the HTML content that's loaded from your URL and then displays the page to the customer.

Creare il contenuto HTML5Create your HTML5 content

Creare il contenuto HTML con il nome del marchio del prodotto nel titolo.Create HTML content with your product's brand name in the title.

  1. Copiare il frammento di codice HTML seguente.Copy the following HTML snippet. Si tratta di codice HTML5 ben formato con un elemento vuoto denominato <div id="api"></div> posizionato tra i tag <body>.It is well-formed HTML5 with an empty element called <div id="api"></div> located within the <body> tags. Questo elemento indica il punto in cui deve essere inserito il contenuto di Azure AD B2C.This element indicates where Azure AD B2C content is to be inserted.

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

    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.

  2. Incollare il frammento di codice copiato in un editor di testo e quindi salvare il file con il nome customize-ui.html.Paste the copied snippet in a text editor, and then save the file as customize-ui.html.

Creare un account di archiviazione BLOB di AzureCreate an Azure Blob storage account

Nota

In questo articolo verrà usato l'archivio BLOB di Azure per ospitare il contenuto.In this article, we use Azure Blob storage to host our content. È possibile scegliere di ospitare il contenuto in un server Web, ma è necessario abilitare la condivisione di risorse tra le origini (CORS) nel server Web.You can choose to host your content on a web server, but you must enable CORS on your web server.

Per ospitare il contenuto HTML nell'archivio Blob, seguire questa procedura:To host this HTML content in Blob storage, do the following:

  1. Accedere al portale di Azure.Sign in to the Azure portal.
  2. Nel menu Hub selezionare Nuovo > Archiviazione > Account di archiviazione.On the Hub menu, select New > Storage > Storage account.
  3. Immettere un nome unico per l'account di archiviazione.Enter a unique Name for your storage account.
  4. Per Modello di distribuzione è possibile lasciare Resource Manager.Deployment model can remain Resource Manager.
  5. Modificare Tipo di Account in archiviazione BLOB.Change Account Kind to Blob storage.
  6. Per Prestazioni è possibile lasciare Standard.Performance can remain Standard.
  7. Per Replica è possibile lasciare RA-GRS.Replication can remain RA-GRS.
  8. Per Livello di accesso è possibile lasciare Frequente.Access tier can remain Hot.
  9. Per Crittografia del servizio di archiviazione è possibile lasciare Disabilitata.Storage service encryption can remain Disabled.
  10. Selezionare una sottoscrizione per l'account di archiviazione.Select a Subscription for your storage account.
  11. Creare un gruppo di risorse o selezionarne uno esistente.Create a Resource group or select an existing one.
  12. Selezionare la posizione geografica dell'account di archiviazione.Select the Geographic location for your storage account.
  13. Fare clic su Crea per creare l'account di archiviazione.Click Create to create the storage account.
    Quando la distribuzione è terminata, il pannello dell'account di archiviazione si aprirà automaticamente.After the deployment is completed, the Storage account blade opens automatically.

Creare un contenitoreCreate a container

Per creare un contenitore pubblico nell'archivio BLOB seguire questa procedura:To create a public container in Blob storage, do the following:

  1. Fare clic sulla scheda Panoramica.Click the Overview tab.
  2. Fare clic su Contenitore.Click Container.
  3. Per Nome digitare $root.For Name, type $root.
  4. Impostare Tipo di accesso su BLOB.Set Access type to Blob.
  5. Fare clic su $root per aprire il nuovo contenitore.Click $root to open the new container.
  6. Fare clic su Carica.Click Upload.
  7. Fare clic sull'icona della cartella accanto a Selezionare un file.Click the folder icon next to Select a file.
  8. Passare al file customize-ui.html creato in precedenza nella sezione Personalizzazione dell'interfaccia utente della pagina.Go to customize-ui.html, which you created earlier in the Page UI customization section.
  9. Fare clic su Carica.Click Upload.
  10. Selezionare il BLOB customize-ui.html caricato.Select the customize-ui.html blob that you uploaded.
  11. Accanto a URL fare clic su Copia.Next to URL, click Copy.
  12. Incollare l'URL copiato in un browser e andare al sito.In a browser, paste the copied URL, and go to the site. Se il sito non è accessibile, assicurarsi che il tipo di accesso del contenitore sia impostato su BLOB.If the site is inaccessible, make sure the container access type is set to blob.

Configurare CORSConfigure CORS

Configurare l'archivio BLOB per la condivisione di risorse tra le origini (CORS) seguendo questa procedura:Configure Blob storage for Cross-Origin Resource Sharing by doing the following:

Nota

Si desidera provare le funzionalità di personalizzazione dell'interfaccia utente usando il codice HTML e il contenuto CSS?Want to try out the UI customization feature by using our sample HTML and CSS content? È stato fornito uno strumento di supporto semplice che carica e configura il contenuto di esempio nell'account di archiviazione BLOB.We've provided a simple helper tool that uploads and configures our sample content on your Blob storage account. Se si usa lo strumento, passare a Modificare i criteri personalizzati di iscrizione o di accesso.If you use the tool, skip ahead to Modify your sign-up or sign-in custom policy.

  1. Nel pannello Archiviazione aprire CORS in Impostazioni.On the Storage blade, under Settings, open CORS.
  2. Fare clic su Aggiungi.Click Add.
  3. Per Origini consentite digitare un asterisco (*).For Allowed origins, type an asterisk (*).
  4. Nell'elenco a discesa Verbi consentiti selezionare GET e OPZIONI.In the Allowed verbs drop-down list, select both GET and OPTIONS.
  5. Per Intestazioni consentite digitare un asterisco (*).For Allowed headers, type an asterisk (*).
  6. Per Intestazioni esposte digitare un asterisco (*).For Exposed headers, type an asterisk (*).
  7. Per Tempo trascorso massimo (secondi), digitare 200.For Maximum age (seconds), type 200.
  8. Fare clic su Aggiungi.Click Add.

Testare CORSTest CORS

Verificare che tutte le operazioni preliminari siano state completate seguendo questa procedura:Validate that you're ready by doing the following:

  1. Passare al sito Web www.test-cors.org e quindi incollare l'URL nella casella Remote URL (URL remoto).Go to the www.test-cors.org website, and then paste the URL in the Remote URL box.
  2. Fare clic su Send Request (Invia richiesta).Click Send Request.
    Se si riceve un messaggio d'errore, verificare che le impostazioni CORS siano corrette.If you receive an error, make sure that your CORS settings are correct. Potrebbe anche essere necessario cancellare la cache del browser o aprire una sessione di esplorazione anonima premendo Ctrl+Maiusc+P.You might also need to clear your browser cache or open an in-private browsing session by pressing Ctrl+Shift+P.

Modificare i criteri personalizzati di iscrizione o di accessoModify your sign-up or sign-in custom policy

Sotto il tag <TrustFrameworkPolicy> di primo livello dovrebbe essere presente il tag <BuildingBlocks>.Under the top-level <TrustFrameworkPolicy> tag, you should find <BuildingBlocks> tag. All'interno dei tag <BuildingBlocks> aggiungere un tag <ContentDefinitions> copiando l'esempio seguente.Within the <BuildingBlocks> tags, add a <ContentDefinitions> tag by copying the following example. Sostituire your_storage_account con il nome del proprio account di archiviazione.Replace your_storage_account with the name of your storage account.

<BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.idpselections">
      <LoadUri>https://{your_storage_account}.blob.core.windows.net/customize-ui.html</LoadUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:idpselection:1.0.0</DataUri>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

Caricare il criterio personalizzato aggiornatoUpload your updated custom policy

  1. Nel portale di Azure passare al contesto del tenant di Azure AD B2C e quindi aprire il pannello Azure AD B2C.In the Azure portal, switch into the context of your Azure AD B2C tenant, and then open the Azure AD B2C blade.
  2. Fare clic su Tutti i criteri.Click All Policies.
  3. Fare clic su Carica il criterio.Click Upload Policy.
  4. Caricare SignUpOrSignin.xml con il tag <ContentDefinitions> aggiunto in precedenza.Upload SignUpOrSignin.xml with the <ContentDefinitions> tag that you added previously.

Testare i criteri personalizzati tramite Esegui adessoTest the custom policy by using Run now

  1. Nel pannello Azure AD B2C passare a Tutti i criteri.On the Azure AD B2C blade, go to All policies.
  2. Selezionare il criterio personalizzato che è stato caricato e fare clic sul pulsante Esegui adesso.Select the custom policy that you uploaded, and click the Run now button.
  3. Dovrebbe essere possibile iscriversi usando un indirizzo di posta elettronica.You should be able to sign up by using an email address.

RiferimentiReference

È possibile trovare modelli di esempio per la personalizzazione dell'interfaccia utente qui:You can find sample templates for UI customization here:

git clone https://github.com/azureadquickstarts/b2c-azureblobstorage-client

La cartella sample_templates/wingtip contiene i file HTML seguenti:The sample_templates/wingtip folder contains the following HTML files:

Modello HTML5HTML5 template DESCRIZIONEDescription
phonefactor.htmlphonefactor.html Usare questo file come modello per una pagina di autenticazione a più fattori.Use this file as a template for a multi-factor authentication page.
resetpassword.htmlresetpassword.html Usare questo file come modello per una pagina Password dimenticata.Use this file as a template for a forgot password page.
selfasserted.htmlselfasserted.html Usare questo file 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.Use this file 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 Usare questo file come modello per una pagina unificata per l'iscrizione o l'accesso.Use this file as a template for a unified sign-up or sign-in page.
updateprofile.htmlupdateprofile.html Usare questo file come modello per una pagina di aggiornamento del profilo.Use this file as a template for a profile update page.

Nella sezione Modificare i criteri personalizzati di iscrizione o di accesso è stata configurata la definizione del contenuto per api.idpselections.In the Modify your sign-up or sign-in custom policy section, you configured the content definition for api.idpselections. Il set completo di ID di definizione del contenuto riconosciuti dal framework dell'esperienza di gestione delle identità di AD B2C e le relative descrizioni sono disponibili nella tabella seguente:The full set of content definition IDs that are recognized by the Azure AD B2C identity experience framework and their descriptions are in the following table:

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. Si tratta di provider di identità aziendali, provider di identità basati su social network, ad esempio Facebook e Google+, o account locali.These options are either enterprise identity providers, social identity providers such as Facebook and Google+, or local accounts.
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. Si tratta di provider di identità aziendali, provider di identità basati su social network, ad esempio Facebook e Google+, o account locali.These options are either enterprise identity providers, social identity providers such as Facebook and Google+, or local accounts.
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 must complete to initiate a password reset.
api.localaccountsigninapi.localaccountsignin Pagina di accesso dell'account locale.Local account sign-in page. Questa pagina contiene un modulo per eseguire l'accesso con un account locale basato su indirizzo di posta elettronica o nome utente.This page contains a sign-in form for 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 per eseguire l'iscrizione a un account locale basato su indirizzo di posta elettronica o nome utente.This page contains a sign-up form for 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 una casella per l'immissione di testo, una casella per l'immissione della password, un pulsante di opzione, caselle a discesa a selezione singola e caselle di controllo con selezione multipla.The form can contain various input controls, such as a text input box, a password entry box, a 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 (by 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 users must complete when they sign up by using an existing account from a social identity provider such as Facebook or Google+. Questa pagina è simile alla pagina di iscrizione dell'account di social networking illustrata in precedenza, a eccezione dei campi di immissione della password.This page is similar to the preceding social account sign-up page, except for the password entry fields.
api.selfasserted.profileupdateapi.selfasserted.profileupdate Pagina di aggiornamento del profilo.Profile update page. Questa pagina contiene un modulo che gli utenti possono usare per aggiornare il profilo.This page contains a form that users can use to update their profile. Questa pagina è simile alla pagina di iscrizione dell'account di social networking, a eccezione dei campi di immissione della password.This page is similar to the social account sign-up page, except for 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 the sign-up and sign-in of users, who can use enterprise identity providers, social identity providers such as Facebook or Google+, or local accounts.

Passaggi successiviNext steps

Per altre informazioni sugli elementi dell'interfaccia utente che è possibile personalizzare, vedere la guida di riferimento per la personalizzazione dell'interfaccia utente per i criteri predefiniti.For additional information about UI elements that can be customized, see reference guide for UI customization for built-in policies.