Azure Active Directory B2C: strumento di supporto per la dimostrazione della funzionalità di personalizzazione dell'interfaccia utente della paginaAzure Active Directory B2C: A helper tool used to demonstrate the page user interface (UI) customization feature

Questo articolo è complementare all' articolo principale sulla personalizzazione dell'interfaccia utente in Azure Active Directory (Azure AD) B2C.This article is a companion to the main UI customization article in Azure Active Directory (Azure AD) B2C. I passaggi seguenti descrivono come verificare la funzionalità di personalizzazione dell'interfaccia utente delle pagine usando il contenuto HTML e CSS di esempio fornito.The following steps describe how to exercise the page UI customization feature by using sample HTML and CSS content that we've provided.

Ottenere un tenant di Azure AD B2CGet an Azure AD B2C tenant

Per poter eseguire la personalizzazione, è necessario prima ottenere un tenant Azure Active Directory B2C qualora non sia ancora disponibile.Before you can customize anything, you will need to get an Azure AD B2C tenant if you don't already have one.

Creare un criterio di iscrizione o accessoCreate a sign-up or sign-in policy

Il contenuto di esempio reso disponibile può essere usato per personalizzare due pagine in criteri iscrizione o accesso: la pagina di accesso unificata e la pagina di attributi autocertificati.The sample content we've provided can be used to customze two pages in a sign-up or sign-in policy: the unified sign-in page and the self-asserted attributes page. Quando si creano criteri di iscrizione o di accesso, aggiungere l'account locale (indirizzo di posta elettronica), Facebook, Google e Microsoft come provider di identità.When creating your sign-up or sign-in policy, add Local Account (email address), Facebook, Google, and Microsoft as Identity providers. Questi sono gli unici provider di identità che verranno accettati dal contenuto HTML di esempio fornito.These are the only IDPs that our sample HTML content will accept. È anche possibile aggiungere un subset di questi provider di identità se necessario.You can also add a subset of these IDPs if you wish.

Registrare un'applicazioneRegister an application

Sarà necessario registrare un'applicazione nel tenant B2C da usare per l'esecuzione del criterio.You will need to register an application in your B2C tenant that can be used to execute your policy. Dopo la registrazione dell'applicazione, sono disponibili alcune opzioni da usare per l'effettiva esecuzione dei criteri di iscrizione:After registering your application, you have a few options that you can use to actually run your sign-up policy:

Personalizzare il criterioCustomize your policy

Per personalizzare l'aspetto dei criteri, è necessario prima creare file HTML e CSS usando le convenzioni specifiche di Azure AD B2C.To customize the look and feel of your policy, you need to first create HTML and CSS files using the specific conventions of Azure AD B2C. È quindi possibile caricare il contenuto statico in un percorso disponibile pubblicamente in modo che Azure Active Directory B2C possa accedervi,You can then upload your static content to a publicly available location so that Azure AD B2C can access it. ad esempio un server Web dedicato, un archivio BLOB di Azure, una rete per la distribuzione di contenuti di Azure o qualsiasi altro provider di servizi di hosting di risorse statiche.This could be your own dedicated web server, Azure Blob Storage, Azure Content Delivery Network, or any other static resource-hosting provider. Come unici requisiti, è necessario che il contenuto sia disponibile su HTTPS e sia accessibile tramite CORS.The only requirements are that your content is available over HTTPS and can be accessed by using CORS. Dopo aver esposto il contenuto statico sul Web, è possibile modificare il criterio in modo che punti a questo percorso e presenti il contenuto ai clienti.Once you've exposed your static content on the web, you can edit your policy to point to this location and present that content to your customers. L'articolo principale sulla personalizzazione dell'interfaccia utente descrive in dettaglio il funzionamento della funzionalità di personalizzazione di Azure Active Directory B2C.The main UI customization article describes in detail how the Azure AD B2C customization feature works.

A fini di questa esercitazione, il contenuto di esempio è stato già creato ed è ospitato in Archiviazione BLOB di Azure.For the purposes of this tutorial, we've already created some sample content and hosted it on Azure Blob Storage. Si tratta di una personalizzazione di base del tema della società fittizia "Wingtip Toys".The sample content is a very basic customization in the theme of our fictional company, "Wingtip Toys". Per provarlo nel proprio criterio, seguire questa procedura:To try it out in your own policy, follow these steps:

  1. Accedere al proprio tenant nel portale di Azure e passare al pannello delle funzionalità B2C.Sign in to your tenant on the Azure portal and navigate to the B2C features blade.
  2. Fare clic su Sign-up or sign-in policies (Criteri di iscrizione o di accesso) e quindi sul criterio, ad esempio "b2c_1_sign_up_sign_in").Click Sign-up or sign-in policies and then click your policy (for example, "b2c_1_sign_up_sign_in").
  3. Fare clic su Page UI customization (Personalizzazione dell'interfaccia utente della pagina) e quindi Pagina unificata per l'iscrizione o l'accesso.Click Page UI customization and then Unified sign-up or sign-in page.
  4. Impostare l'opzione Usa pagina personalizzata su .Toggle the Use custom page switch to Yes. Nel campo Custom page URI (URI pagina personalizzata) immettere https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/unified.html.In the Custom page URI field, enter https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/unified.html. Fare clic su OK.Click OK.
  5. Fare clic su Pagina di iscrizione dell'account locale.Click Local account sign-up page. Impostare l'interruttore Use custom template (Usa modello personalizzato) su .Toggle the Use custom template switch to Yes. Nel campo Custom page URI (URI pagina personalizzata) immettere https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/selfasserted.html.In the Custom page URI field, enter https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/selfasserted.html.
  6. Ripetere lo stesso passaggio per Pagina di iscrizione all'account di social networking.Repeat the same step for the Social account sign-up page. Fare clic su OK due volte per chiudere i pannelli di personalizzazione dell'interfaccia utente.Click OK twice to close the UI customization blades.
  7. Fare clic su Save.Click Save.

È ora possibile provare il criterio personalizzato.Now you can try out your customized policy. È possibile usare la propria applicazione o Azure AD B2C Playground, se lo si vuole, oppure fare semplicemente clic sul comando Esegui adesso nel pannello dei criteri.You can use your own application or the Azure AD B2C playground if you want to, but you can also simply click the Run Now command in the policy blade. Selezionare l'applicazione nella casella a discesa e scegliere l'URI di reindirizzamento appropriato.Select your application in the drop-down box and choose the appropriate redirect URI. Fare clic sul pulsante Esegui adesso .Click the Run now button. Verrà visualizzata una nuova scheda del browser in cui è possibile eseguire l'esperienza utente di iscrizione per l'applicazione con il nuovo contenuto.A new browser tab will open and you can run through the user experience of signing up for your application with the new content in place!

Caricare il contenuto di esempio in Archiviazione BLOB di AzureUpload the sample content to Azure Blob Storage

Se si desidera usare Archiviazione BLOB di Azure per ospitare il contenuto della pagina, è possibile creare il proprio account di archiviazione e usare lo strumento B2C helper per caricare i file.If you would like to use Azure Blob Storage to host your page content, you can create your own storage account and use our B2C helper tool to upload your files.

Creare un account di archiviazioneCreate a storage account

  1. Accedere al portale di Azure.Sign in to the Azure portal.
  2. Fare clic su + Nuovo > Dati e archiviazione > Account archiviazione.Click + New > Data + Storage > 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.
  3. Specificare un Nome da assegnare all'account di archiviazione (ad esempio, "contoso") e selezionare le opzioni appropriate in Piano tariffario, Gruppo di risorse e Sottoscrizione.Provide a Name for the storage account (for example, "contoso") and pick the appropriate selections for Pricing tier, Resource group and 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 Crea.Click Create.
  4. 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.
  5. Nella sezione Riepilogo fare clic su Contenitori e quindi su + Aggiungi.In the Summary section, click Containers, and then click + Add.
  6. Specificare un valore in Nome per il contenitore, ad esempio "b2c", e quindi selezionare BLOB come Tipo di accesso.Provide a Name for the container (for example, "b2c") and select Blob as the Access type. Fare clic su OK.Click OK.
  7. Il contenitore appena creato verrà visualizzato nell'elenco nel pannello BLOB .The container that you created will appear in the list on the Blobs blade. Prendere nota dell'URL del contenitore, che dovrebbe avere un aspetto simile al seguente: https://contoso.blob.core.windows.net/b2c.Write down the URL of the container; for example, it should look similar to https://contoso.blob.core.windows.net/b2c. Chiudere il pannello BLOB .Close the Blobs blade.
  8. Nel pannello dell'account di archiviazione fare clic su Chiavi e prendere nota dei valori dei campi Nome account di archiviazione e Chiave di accesso primaria.On the storage account blade, click Keys and write down the values of the Storage Account Name and Primary Access Key fields.

Nota

Chiave di accesso primaria è una credenziale di sicurezza importante.Primary Access Key is an important security credential.

Scaricare lo strumento helper e i file di esempioDownload the helper tool and sample files

È possibile scaricare lo strumento helper di archiviazione BLOB di Azure e i file di esempio come file con estensione zip qui oppure clonarlo da GitHub:You can download the Azure Blob Storage helper tool and sample files as a .zip file or clone it from GitHub:

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

Questo repository contiene una directory sample_templates\wingtip , che include file HTML, CSS e immagini di esempio.This repository contains a sample_templates\wingtip directory, which contains example HTML, CSS, and images. Affinché questi modelli facciano riferimento al proprio account di archiviazione BLOB di Azure, è necessario modificare i file HTML.For these templates to reference your own Azure Blob Storage account, you will need to edit the HTML files. Aprire unified.html e selfasserted.html e sostituire tutte le istanze di https://localhost con l'URL del proprio contenitore di cui si è preso nota nei passaggi precedenti.Open unified.html and selfasserted.html and replace any instances of https://localhost with the URL of your own container that you wrote down in the previous steps. È necessario usare il percorso assoluto dei file HTML, perché in questo caso l'HTML verrà gestito da Azure AD, nel dominio https://login.microsoftonline.com.You must use the absolute path of the HTML files because in this case, the HTML will be served by Azure AD, under the domain https://login.microsoftonline.com.

Caricare i file di esempioUpload the sample files

Nello stesso repository decomprimere B2CAzureStorageClient.zip ed eseguire il file B2CAzureStorageClient.exe in esso contenuto.In the same repository, unzip B2CAzureStorageClient.zip and run the B2CAzureStorageClient.exe file within. 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. Se è stata eseguita la procedura descritta precedentemente, i file HTML e CSS punteranno all'account di archiviazione.If you followed the steps above, the HTML and CSS files will now be pointing to your storage account. Si noti che il nome dell'account di archiviazione è la parte che precede blob.core.windows.net, ad esempio contoso.Note that the name of your storage account is the part that precedes blob.core.windows.net; for example, contoso. È possibile verificare che il contenuto sia stato caricato correttamente, provando ad accedere a https://{storage-account-name}.blob.core.windows.net/{container-name}/wingtip/unified.html da un browser.You can verify that the content has been uploaded correctly by trying to access https://{storage-account-name}.blob.core.windows.net/{container-name}/wingtip/unified.html on a browser. Usare anche http://test-cors.org/ per assicurarsi che il contenuto sia ora abilitato per la Condivisione di risorse tra origini (CORS)Also use http://test-cors.org/ to make sure that the content is now CORS enabled. e cercare "XHR status: 200" nel risultato.(Look for "XHR status: 200" in the result.)

Personalizzare di nuovo il criterioCustomize your policy, again

Dopo aver caricato il contenuto di esempio nell'account di archiviazione, è necessario modificare il criterio di iscrizione in modo che faccia riferimento a tale contenuto.Now that you've uploaded the sample content to your own storage account, you must edit your sign-up policy to reference it. Ripetere i passaggi a partire dalla sezione "Personalizzare il criterio" più indietro, questa volta usando gli URL del proprio account di archiviazione.Repeat the steps from the "Customize your policy" section above, this time using your own storage account's URLs. Il percorso del file unified.html sarà ad esempio <url-of-your-container>/wingtip/unified.html.For instance, the location of your unified.html file would be <url-of-your-container>/wingtip/unified.html.

È ora possibile usare il pulsante Esegui adesso o la propria applicazione per eseguire nuovamente il criterio.Now you can use the Run Now button or your own application to execute your policy again. Il risultato dovrebbe essere lo stesso, poiché in entrambi i casi sono stati usati gli stessi file HTML e CSS di esempio.The result should look almost exactly the same--you used the same sample HTML and CSS in both cases. I criteri tuttavia fanno ora riferimento alla propria istanza di archiviazione BLOB di Azure e si è liberi di modificare e caricare di nuovo i file in base alle proprie esigenze.However, your policies are now referencing your own instance of Azure Blob Storage, and you are free to edit and upload the files again as you please. Per altre informazioni sulla personalizzazione dei file HTML e CSS, fare riferimento all' articolo principale sulla personalizzazione dell'interfaccia utente.For more information on customizing the HTML and CSS, refer to the main UI customization article.