Azure Active Directory B2C: personalizzare l'interfaccia utente di Azure AD B2CAzure Active Directory B2C: Customize the Azure AD B2C user interface (UI)

L'esperienza utente rappresenta l'aspetto più importante in un'applicazione rivolta ai clienti.User experience is paramount in a customer facing application. L'utente può accrescere le dimensioni della sua base di clienti grazie alla creazione di esperienze utente con l'aspetto del marchio.Grow your customer base by crafting user experiences with the look and feel of your brand. Azure Active Directory B2C (Azure AD B2C) permette di personalizzare le pagine di iscrizione, accesso, modifica del profilo e reimpostazione della password con controllo Pixel Perfect.Azure Active Directory B2C (Azure AD B2C) lets you customize sign-up, sign-in, profile editing, and password reset pages with pixel-perfect control.

Nota

La funzionalità di personalizzazione dell'interfaccia utente delle pagine descritta in questo articolo non si applica al criterio di solo accesso, alla pagina di reimpostazione della password associata e ai messaggi di posta elettronica di verifica.The page UI customization feature described in this article does not apply to the sign-in only policy, its accompanying password reset page, and verification emails. Queste funzionalità usano invece la funzionalità di branding aziendale.These features use the company branding feature instead.

Analogamente, se un utente avvia un criterio di modifica del profilo prima dell'accesso, l'utente verrà reindirizzato a una pagina che può essere personalizzata tramite la funzionalità di branding aziendale.Similarly, if a user intiates an edit profile policy before signing in, the user will be redirected to a page that can be customized using the company branding feature.

Questo articolo include gli argomenti seguenti:This article covers the following topics:

  • Funzionalità di personalizzazione dell'interfaccia utente della pagina.The page UI customization feature.
  • Strumento per il caricamento di contenuti HTML nell'archivio BLOB di Azure per l'uso con la funzionalità di personalizzazione dell'interfaccia utente delle pagine.A tool for uploading HTML content to Azure Blob Storage for use with the page UI customization feature.
  • Elementi dell'interfaccia utente utilizzati da Azure AD B2C che è possibile personalizzare utilizzando fogli CSS (Cascading Style Sheets).The UI elements used by Azure AD B2C that you can customize using Cascading Style Sheets (CSS).
  • Procedure consigliate per l'utilizzo di questa funzionalità.Best practices when exercising this feature.

Funzionalità di personalizzazione dell'interfaccia utente della paginaThe page UI customization feature

È possibile personalizzare l'aspetto delle pagine di iscrizione, accesso, reimpostazione della password e modifica del profilo visualizzate dagli utenti, tramite la configurazione di criteri.You can customize the look and feel of customer sign-up, sign-in, password reset, and profile-editing pages (by configuring policies). Gli utenti possono usufruire di un'esperienza fluida durante lo spostamento tra l'applicazione e le pagine gestite da Azure AD B2C.Your customers get a seamless experience when navigating between your application and pages served by Azure AD B2C.

A differenza di altri servizi con opzioni dell'interfaccia utente, Azure AD B2C utilizza un approccio moderno e semplice per la personalizzazione dell'interfaccia utente.Unlike other services where UI options, Azure AD B2C uses a simple and modern approach to UI customization.

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 fase di esecuzione, il contenuto viene caricato da un URL specificato in un criterio.At run-time, content is loaded from a URL that you specify in a policy. È possibile specificare URL diversi per pagine diverse.You can specify different URLs for different pages. Dopo che il contenuto dell'URL viene unito con un frammento HTML inserito da Azure AD B2C, la pagina viene visualizzata al cliente.After content loaded from your URL is merged with an HTML fragment inserted from Azure AD B2C, the page is displayed to your customer. Operazioni da eseguire:All you need to do is:

  1. Creare contenuto HTML5 ben formato con un elemento <div id="api"></div> vuoto, inserito all'interno di <body>.Create well-formed HTML5 content with an empty <div id="api"></div> element located somewhere in the <body>. Questo elemento corrisponde al punto in cui viene inserito il contenuto di Azure AD B2C.This element marks where the Azure AD B2C content is inserted.
  2. Ospitare il contenuto in un endpoint HTTPS in cui è consentita la condivisione CORS.Host your content on an HTTPS endpoint (with CORS allowed). Notare che i metodi di richiesta GET e OPTIONS devono essere abilitati quando si configura CORS.Note both GET and OPTIONS request methods must be enabled when configuring CORS.
  3. Usare CSS per applicare uno stile agli elementi dell'interfaccia utente inseriti da Azure AD B2C.Use CSS to style the UI elements that Azure AD B2C inserts.

Esempio di base di codice HTML personalizzatoA basic example of customized HTML

L'esempio seguente rappresenta il contenuto HTML di base che è possibile usare per testare questa funzionalità.The following example is the most basic HTML content that you can use to test this capability. Utilizzare lo strumento di supporto per caricare e configurare il contenuto nell'archivio di BLOB di Azure.Use the helper tool to upload and configure this content on your Azure Blob storage. È quindi possibile verificare che i pulsanti di base, senza stili e i campi del modulo in ogni pagina siano visualizzati e funzionali.You can then verify that the basic, non-stylized buttons & form fields on each page are displayed and functional.

<!DOCTYPE html>
<html>
    <head>
        <title>!Add your title here!</title>
    </head>
    <body>
        <div id="api"></div>   <!-- Leave this element empty because Azure AD B2C will insert content here. -->
    </body>
</html>

Provare la funzionalità di personalizzazione dell'interfaccia utenteTest out the UI customization feature

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 che carica e configura il contenuto di esempio nell'archiviazione BLOB di Azure.We've provided you a helper tool that uploads and configures sample content on your Azure Blob storage.

Nota

È possibile ospitare il contenuto dell'interfaccia utente in qualsiasi punto: in server Web, reti CDN, AWS S3, sistemi di condivisione file e così via. A condizione di avere contenuto ospitato in un endpoint HTTPS disponibile pubblicamente con CORS abilitato, è possibile iniziare.You can host your UI content anywhere: on web servers, CDNs, AWS S3, file sharing systems, etc. As long as the content is hosted on a publicly available HTTPS endpoint with CORS enabled, you are good to go. L'archivio BLOB di Azure viene usato solo a scopo illustrativo.We are using Azure Blob storage for illustrative purposes only.

Frammenti dell'interfaccia utente incorporati da Azure AD B2CThe UI fragments embedded by Azure AD B2C

Nelle sezioni seguenti sono riportati i frammenti HTML5 che Azure AD B2C unisce nell'elemento <div id="api"></div> che si trova nel contenuto.The following sections list the HTML5 fragments that Azure AD B2C merges into the <div id="api"></div> element located in your content. Non inserire questi frammenti nel contenuto HTML5.Do not insert these fragments in your HTML 5 content. Il servizio Azure AD B2C li inserisce in fase di esecuzione.The Azure AD B2C service inserts them in at run-time. Usare i frammenti come riferimento quando si progettano fogli CSS (Cascading Style Sheet) personalizzati.Use these fragments as a reference when designing your own Cascading Style Sheets (CSS).

Frammento inserito nella "Pagina di selezione del provider di identità"Fragment inserted into the "Identity provider selection page"

Questa pagina contiene un elenco dei provider di identità che l'utente può scegliere durante la procedura di iscrizione o di accesso.This page contains a list of identity providers that the user can choose from during sign-up or sign-in. Questi pulsanti includono provider di identità basati su social network, ad esempio Facebook e Google+, oppure account locali (basati sull'indirizzo di posta elettronica o sul nome utente).These buttons include social identity providers such as Facebook and Google+, or local accounts (based on email address or user name).

<div id="api" data-name="IdpSelections">
    <div class="intro">
         <p>Sign up</p>
    </div>

    <div>
        <ul>
            <li>
                <button class="accountButton" id="FacebookExchange">Facebook</button>
            </li>
            <li>
                <button class="accountButton" id="GoogleExchange">Google+</button>
            </li>
            <li>
                <button class="accountButton" id="SignUpWithLogonEmailExchange">Email</button>
            </li>
        </ul>
    </div>
</div>

Frammento inserito nella "pagina di iscrizione dell'account locale"Fragment inserted into the "Local account sign-up page"

Questa pagina contiene un modulo per eseguire l'iscrizione dell'account locale in base a un indirizzo e-mail o a un nome utente.This page contains a form for local account sign-up 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.

<div id="api" data-name="SelfAsserted">
    <div class="intro">
        <p>Create your account by providing the following details</p>
    </div>

    <div id="attributeVerification">
        <div class="errorText" id="passwordEntryMismatch" style="display: none;">The password entry fields do not match. Please enter the same password in both fields and try again.</div>
        <div class="errorText" id="requiredFieldMissing" style="display: none;">A required field is missing. Please fill out all required fields and try again.</div>
        <div class="errorText" id="fieldIncorrect" style="display: none;">One or more fields are filled out incorrectly. Please check your entries and try again.</div>
        <div class="errorText" id="claimVerificationServerError" style="display: none;"></div>
        <div class="attr" id="attributeList">
            <ul>
                <li>
                    <div class="attrEntry validate">
                        <div>
                            <div class="verificationInfoText" id="email_intro" style="display: inline;">Verification is necessary. Please click Send button.</div>
                            <div class="verificationInfoText" id="email_info" style="display:none">Verification code has been sent to your inbox. Please copy it to the input box below.</div>
                            <div class="verificationSuccessText" id="email_success" style="display:none">E-mail address verified. You can now continue.</div>
                            <div class="verificationErrorText" id="email_fail_retry" style="display:none">Incorrect code, try again.</div>
                            <div class="verificationErrorText" id="email_fail_no_retry" style="display:none">Exceeded number of retries you need to send new code.</div>
                            <div class="verificationErrorText" id="email_fail_server" style="display:none">Server error, please try again</div>
                            <div class="verificationErrorText" id="email_incorrect_format" style="display:none">Incorect format.</div>
                        </div>

                    <div class="helpText show">This information is required</div>
                        <label>Email</label>
                        <input id="email" class="textInput" type="text" placeholder="Email" required="" autofocus=""><a href="javascript:void(0)" onclick="selfAssertedClient.showHelp('Email address that can be used to contact you.');" class="tiny">What is this?</a>

                    <div class="buttons verify" claim_id="email">
                        <div id="email_ver_wait" class="working" style="display: none;"></div>
                            <label id="email_ver_input_label" for="email_ver_input" style="display: none;">Verification code</label>
                            <input id="email_ver_input" type="text" placeholder="Verification code" style="display:none">
                            <button id="email_ver_but_send" class="sendButton" type="button" style="display: inline;">Send verification code</button>
                            <button id="email_ver_but_verify" class="verifyButton" type="button" style="display:none">Verify code</button>
                            <button id="email_ver_but_resend" class="sendButton" type="button" style="display:none">Send new code</button>
                            <button id="email_ver_but_edit" class="editButton" type="button" style="display:none">Change e-mail</button>
                            <button id="email_ver_but_default" class="defaultButton" type="button" style="display:none">Default</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="attrEntry">
                        <div class="helpText">8-16 characters, containing 3 out of 4 of the following: Lowercase characters, uppercase characters, digits (0-9), and one or more of the following symbols: @ # $ % ^ &amp; * - _ + = [ ] { } | \ : ' , ? / ` ~ " ( ) ; .This information is required</div>
                        <label>Enter password</label>
                        <input id="password" class="textInput" type="password" placeholder="Enter password" pattern="^((?=.*[a-z])(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])|(?=.*[a-z])(?=.*\d)(?=.*[^A-Za-z0-9])|(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]))([A-Za-z\d@#$%^&amp;*\-_+=[\]{}|\\:',?/`~&quot;();!]|\.(?!@)){8,16}$" title="8-16 characters, containing 3 out of 4 of the following: Lowercase characters, uppercase characters, digits (0-9), and one or more of the following symbols: @ # $ % ^ &amp; * - _ + = [ ] { } | \ : ' , ? / ` ~ &quot; ( ) ; ." required=""><a href="javascript:void(0)" onclick="selfAssertedClient.showHelp('Enter password');" class="tiny">What is this?</a>
                    </div>
                </li>
                <li>
                    <div class="attrEntry">
                        <div class="helpText"> This information is required</div>
                        <label>Reenter password</label>
                        <input id="reenterPassword" class="textInput" type="password" placeholder="Reenter password" pattern="^((?=.*[a-z])(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])|(?=.*[a-z])(?=.*\d)(?=.*[^A-Za-z0-9])|(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]))([A-Za-z\d@#$%^&amp;*\-_+=[\]{}|\\:',?/`~&quot;();!]|\.(?!@)){8,16}$" title=" " required=""><a href="javascript:void(0)" onclick="selfAssertedClient.showHelp('Reenter password');" class="tiny">What is this?</a>
                    </div>
                </li>
                <li>
                    <div class="attrEntry">
                        <div class="helpText">This information is required</div>
                        <label>Name</label>
                        <input id="displayName" class="textInput" type="text" placeholder="Name" required=""><a href="javascript:void(0)" onclick="selfAssertedClient.showHelp('Your display name.');" class="tiny">What is this?</a>
                    </div>
                </li>
                <li>
                    <div class="attrEntry">
                        <div class="helpText"></div>
                        <label>Gender</label>
                        <input id="extension_Gender_F" name="extension_Gender" type="radio" value="F" autofocus="">
                        <label for="extension_Gender_F">Female</label>
                        <input id="extension_Gender_M" name="extension_Gender" type="radio" value="M">
                        <label for="extension_Gender_M">Male</label>
                        <a href="javascript:void(0)" onclick="selfAssertedClient.showHelp('');" class="tiny">What is this?</a>
                    </div>
                </li>
                <li>
                    <div class="attrEntry">
                        <div class="helpText"></div>
                        <label>Loyalty number</label>
                        <input id="extension_MemNum" class="textInput" type="text" placeholder="Loyalty number"><a href="javascript:void(0)" onclick="selfAssertedClient.showHelp('Membership number');" class="tiny">What is this?</a>
                    </div>
                </li>
                <li>
                    <div class="attrEntry">
                        <div class="helpText"></div>
                        <label>State</label>
                        <select class="dropdown_single" id="state">
                            <option style="display:none" disabled="disabled" value="placeholder" selected="">State</option>
                            <option value="WA">Washington</option>
                            <option value="NY">New York</option>
                            <option value="CA">California</option>
                        </select>
                        <a href="javascript:void(0)" onclick="selfAssertedClient.showHelp('Your residential state or province.');" class="tiny">What is this?</a>
                    </div>
                </li>
                <li>
                    <div class="attrEntry">
                        <div class="helpText">This information is required</div>
                        <label>Zip code</label>
                        <input id="postalCode" class="textInput" type="text" placeholder="Zip code" required=""><a href="javascript:void(0)" onclick="selfAssertedClient.showHelp('The postal code of your address.');" class="tiny">What is this?</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="buttons"> <button id="continue" disabled="">Create</button> <button id="cancel">Cancel</button></div>
    </div>
    <div class="verifying-modal">
        <div class="preloader"> <img src="https://login.microsoftonline.com/static/img/win8loader.gif" alt="Please wait"></div>
        <div id="verifying_blurb"></div>
    </div>
</div>

Frammento inserito nella "Pagina di iscrizione all'account di social networking"Fragment inserted into the ""Social account sign-up page"

Questa pagina potrebbe essere visualizzata quando si effettua l'iscrizione usando un account esistente di un provider di identità basato su social network, ad esempio Facebook o Google+.This page may appear when signing up using an existing account from a social identity provider such as Facebook or Google+. Viene utilizzata quando è necessario raccogliere informazioni aggiuntive dall'utente finale con un modulo di iscrizione.It is used when additional information must be collected from the end user using a sign-up form. Questa pagina è simile alla pagina di iscrizione dell'account locale (mostrata nella sezione precedente), ad eccezione dei campi di immissione della password.This page is similar to the local account sign-up page (shown in the previous section) with the exception of the password entry fields.

Frammento inserito nella "Pagina unificata per l'iscrizione o l'accesso"Fragment inserted into the "Unified sign-up or sign-in page"

Questa pagina gestisce sia l'iscrizione che l'accesso dei clienti, che possono usare provider di identità basati su social network, come Facebook o Google+, o account locali.This page handles both sign-up & sign-in of customers, who can use social identity providers such as Facebook or Google+, or local accounts.

<div id="api" data-name="Unified">
        <div class="social" role="form">
               <div class="intro">
                       <h2>Sign in with your social account</h2>
               </div>
               <div class="options">
                       <div><button class="accountButton firstButton" id="MicrosoftAccountExchange" tabindex="1">msa</button></div>
                       <div><button class="accountButton" id="FacebookExchange" tabindex="1">fb</button></div>
               </div>
        </div>
        <div class="divider">
               <h2>OR</h2>
        </div>
        <div class="localAccount" role="form">
               <div class="intro">
                       <h2>Sign in with your existing account</h2>
               </div>
               <div class="error pageLevel" aria-hidden="true" style="display: none;">
                       <p role="alert"></p>
               </div>
               <div class="entry">
                       <div class="entry-item">
                               <label for="logonIdentifier">Email Address</label> 
                               <div class="error itemLevel" aria-hidden="true" style="display: none;">
                                      <p role="alert"></p>
                               </div>
                               <input type="email" id="logonIdentifier" name="LogonIdentifier" pattern="^[a-zA-Z0-9.!#$%&amp;’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" placeholder="LogonIdentifier" value="" tabindex="1">
                       </div>
                       <div class="entry-item">
                               <div class="password-label"> <label for="password">Password</label><a id="forgotPassword" tabindex="2">Forgot your password?</a></div>
                               <div class="error itemLevel" aria-hidden="true" style="display: none;">
                                      <p role="alert"></p>
                               </div>
                               <input type="password" id="password" name="Password" placeholder="Password" tabindex="1">
                       </div>
                       <div class="working"></div>
                       <div class="buttons"> <button id="next" tabindex="1">Sign in</button> </div>
               </div>
               <div class="divider">
                       <h2>OR</h2>
               </div>
               <div class="create">
                       <p>Don't have an account?<a id="createAccount" tabindex="1">Sign up now</a> </p>
               </div>
        </div>
</div>

Frammento inserito nella "Pagina dell'autenticazione a più fattori"Fragment inserted into the "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.

<div id="api" data-name="Phonefactor">
    <div id="phonefactor_initial">
        <div class="intro">
            <p>Enter a number below that we can send a code via SMS or phone to authenticate you.</p>
        </div>
        <div class="errorText" id="errorMessage" style="display:none"></div>
        <div class="phoneEntry" id="phoneEntry">
            <div class="phoneNumber">
                <select id="countryCode" style="display:inline-block">
                    <option value="+93">Afghanistan (+93)</option>
                    <!-- Not all country codes listed -->
                    <option value="+44">United Kingdom (+44)</option>
                    <option value="+1" selected="">United States (+1)</option>
                    <!-- Not all country codes listed -->
                </select>
            </div>
            <div class="phoneNumber">
                <input type="text" id="localNumber" style="display:inline-block" placeholder="Phone number">
            </div>
        </div>
        <div id="codeVerification" style="display:none">
            <div>
                <p>Enter your verification code below, or <button id="retryCode" class="textButton">send a new code</button></p>
                <input type="text" id="verificationCode" placeholder="Verification code">
            </div>
        </div>
        <div class="buttons">
            <button id="verifyCode" class="sendInitialCodeButton">Send Code</button>
            <button id="verifyPhone" style="display:inline-block">Call Me</button>
            <button id="cancel" style="display:inline-block">Cancel</button>
        </div>
    </div>
    <div class="dialing-modal">
        <div class="preloader"> <img src="https://login.microsoftonline.com/static/img/win8loader.gif" alt="Please wait"></div>
        <div id="dialing_blurb"></div><div id="dialing_number"></div>
    </div>
</div>

Frammento inserito nella "Pagina di errore"Fragment inserted into the ""Error page"

<div id="api" class="error-page-content" data-name="GlobalException">
    <h2>Sorry, but we're having trouble signing you in.</h2>
    <div class="error-page-help">We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, please try again.</div>
    <div class="error-page-messagedetails">Your administrator hasn't provided any contact details.</div>
    <div class="error-page-messagedetails">
        <div class="error-page-correlationid">Correlation ID:1c4f0397-c6e4-4afe-bf74-42f488f2f15f</div>
        <div>Timestamp:2015-09-14 23:22:35Z</div>
        <div class="error-page-detail">AADB2C90065: A B2C client-side error 'Access is denied.' has occurred requesting the remote resource.</div>
    </div>
</div>

Localizzazione del contenuto HTMLLocalizing your HTML content

È possibile localizzare il contenuto HTML attivando la "personalizzazione del linguaggio".You can localize your HTML content by turning on 'Language customization'. L'abilitazione di questa funzionalità consente ad Azure AD B2C di inoltrare il parametro Open ID Connect, ui-locales, all'endpoint.Enabling this feature allows Azure AD B2C to forward the Open ID Connect parameter, ui-locales, to your endpoint. Il server di contenuti può utilizzare questo parametro per fornire pagine HTML personalizzate specifiche del linguaggio.Your content server can use this parameter to provide customized HTML pages that are language-specific.

Aspetti da ricordare durante la fase di creazione del contenutoThings to remember when building your own content

Se si prevede di usare la funzionalità di personalizzazione dell'interfaccia utente della pagina, fare riferimento alle procedure consigliate seguenti:If you are planning to use the page UI customization feature, review the following best practices:

  • Non copiare il contenuto predefinito di Azure AD B2C né provare a modificarlo.Don't copy the Azure AD B2C's default content and attempt to modify it. È preferibile creare il contenuto HTML5 da zero e usare il contenuto predefinito come riferimento.It is best to build your HTML5 content from scratch and to use default content as reference.
  • Per motivi di sicurezza, non è consentito includere codice JavaScript nel contenuto.For security reasons, we don't allow you to include any JavaScript in your content. La maggior parte degli elementi necessari dovrebbe già essere disponibile.Most of what you need should be available out of the box. In caso contrario, usare UserVoice per richiedere nuove funzionalità.If not, use User Voice to request new functionality.
  • Versioni di browser supportate:Supported browser versions:
    • Internet Explorer 11, 10, EdgeInternet Explorer 11, 10, Edge
    • Supporto limitato per Internet Explorer 9, 8Limited support for Internet Explorer 9, 8
    • Google Chrome 42.0 e versioni successiveGoogle Chrome 42.0 and above
    • Mozilla Firefox 38.0 e versioni successiveMozilla Firefox 38.0 and above