Personalizzare l'interfaccia utente di Azure AD B2C per i portali

Articolo
01/08/2024

Nota

A partire da ottobre 2022, i portali Power Apps sono denominati Power Pages.
Questo argomento si applica a funzionalità legacy. Per le informazioni più recenti, vai alla Documentazione di Microsoft Power Pages.

Azure AD B2C supporta la personalizzazione dell'interfaccia utente per l'esperienza di registrazione e accesso. Con questa funzionalità puoi configurare il tenant Azure AD B2C con una pagina di registrazione e accesso personalizzata creata all'interno del tuo portale. In questo articolo imparerai come creare e configurare una pagina Web di registrazione/accesso personalizzata con codice HTML di esempio nei portali da utilizzare con l'autenticazione Azure AD B2C.

Nota

Queste istruzioni consentono anche di configurare l'interfaccia utente Azure AD B2C per i siti Power Pages. Altre informazioni: Cos'è Power Pages?.

Prerequisiti

Prima di iniziare, assicurati di aver configurato l'autenticazione Azure AD B2C per il tuo portale con i passaggi automatico, o manuale. Avrai bisogno di utilizzare questa configurazione Azure AD B2C per personalizzare l'interfaccia utente per i portali seguendo questi passaggi.

Passaggio 1: Creare un modello Web

Apri l'app Gestione portali.
Dal riquadro di sinistra, in Contenuto, seleziona Modelli Web.
Seleziona Nuovo.
Immetti Nome, ad esempio Pagina personalizzata Azure AD B2C.
Per Sito Web, seleziona il sito Web del portale.

Per Origine copia e incolla il seguente codice sorgente HTML del modello Web di esempio.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width", initial-scale="1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
      {{ page.title | h }}
    </title>
                        <link href={{ request.url | base }}/bootstrap.min.css rel="stylesheet">
                        <link href={{ request.url | base }}/theme.css rel="stylesheet">
                        <style>
                          .page-heading {
            padding-top: 20px;
      }
      .page-copy {
            margin-bottom: 40px;
      }
      .highlightError {
        border: 1px solid #cb2027!important;
        background-color: #fce8e8!important;
      }
      .attrEntry .error.itemLevel {
        display: none;
        color: #cb2027;
        font-size: .9em;
      }
      .error {
        color: #cb2027;
      }
      .entry {
        padding-top: 8px;
        padding-bottom: 0!important;
      }
      .entry-item {
        margin-bottom: 20px;
      }
      .intro {
        display: inline;
        margin-bottom: 5px;
      }
      .pageLevel {
          width: 293px;
          text-align: center;
          margin-top: 5px;
          padding: 5px;
          font-size: 1.1em;
          height: auto;
      }
      #panel, .pageLevel, .panel li, label {
          display: block;
      }
      #forgotPassword {
          font-size: .75em;
          padding-left: 5px;
      }
      #createAccount {
          margin-left: 5px;
      }
      .working {
          display: none;
          background: url(data:image/gif;base64,R0lGODlhbgAKAPMAALy6vNze3PTy9MTCxOTm5Pz6/Ly+vNTS1Pz+/�N0Jp6BUJ9EBIISAQAh+QQJCQAKACxRAAIABgAGAAAEE1ClYU4RIIMTdCaegVCfRASCEgEAOw==) no-repeat;
          height: 10px;
          width: auto;
      }
      .divider {
        margin-top: 20px;
        margin-bottom: 10px;
      }
      .divider h2 {
        display: table;
        white-space: nowrap;
        font-size: 1em;
        font-weight: 700;
      }
      .buttons {
        margin-top: 10px;
      }
      button {
            width:auto;
            min-width:50px;
            height:32px;
            margin-top:2px;
            -moz-border-radius:0;
            -webkit-border-radius:0;
            border-radius:0;
            background:#2672E6;
            border:1px solid #FFF;
            color:#fff;
            transition:background 1s ease 0s;
            font-size:100%;
            padding:0 2px
      }

      button:hover {
            background:#0F3E83;
            border:1px solid #3079ed;
            -moz-box-shadow:0 0 0;
            -webkit-box-shadow:0 0 0;
            box-shadow:0 0 0
      }
      .password-label label {
        display: inline-block;
        vertical-align: baseline;
      }
      img {
            border:0
      }
      .divider {
            margin-top:20px;
            margin-bottom:10px
      }
      .divider h2 {
            display:table;
            white-space:nowrap;
            font-size:1em;
            font-weight:700
      }
      .divider h2:after,.divider h2:before {
            border-top:1px solid #B8B8B8;
            content:'';
            display:table-cell;
            position:relative;
            top:.7em;
            width:50%
      }
      .divider h2:before {
            right:1.8%
      }
      .divider h2:after {
            left:1.8%
      }
      .verificationErrorText {
            color:#D63301
      }
      .options div {
            display:inline-block;
            vertical-align:top;
            margin-top:7px
      }
      .accountButton,.accountButton:hover {
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAh1BMVEX///9QUFBOTk5LS0tERERCQkI/Pz9ISEg6OjpGRkZNTU08PDyAgID09PSlpaWWlpZxcXFgYGBZWVlUVFT6+vrx8fHt7e3s7Ozo6Oji4uLJycnGxsa4uLiqqqqgoKCNjY2JiYmGhoZra2tmZmb7+/vu7u7d3d3U1NTNzc2+vr67u7usrKx7e3vprNQnAAAA8klEQVQ4y63Q127DMAxAUZpDwyMeSdqsNqu7/f/va6zahgGJKAr0vgk6DyQh+6V/BiTOOeNRA9zuAWBdM6WBlPDTvaUUoAuMrT0mgNvA1IJjQB3MKjACvp6DK0WAH+agtH8H9jQHLUUgz7Uhx8xOXzNESxirLCYA2mw8tacI5FyIYXq8A9ge2Qs6oTnw2e2ruho2rjBcXJ4ADh3jBOQLQnVhRFx2gNDZ4ACogbHXj/ft9Dj5AcgbJFu5AThQWuYBIGmgtAFQo4EFB+CPGthJAPypgY3BHsheA5UNwLyAvsYNoDyroKUe4EoFTQ/yDtTONvsGUJ8KTUYyH+UAAAAASUVORK5CYII=);
            background-repeat:no-repeat
      }
      .accountButton {
            border:1px solid #FFF;
            color:#FFF;
            margin-left:0;
            margin-right:2px;
            transition:background-color 1s ease 0s;
            -moz-border-radius:0;
            -webkit-border-radius:0;
            border-radius:0;
            text-align:center;
            word-wrap:break-word;
            height:34px;
            width:158px;
            padding-left:30px;
            background-color:#505050;
      }
      .accountButton:hover {
            background-color:#B9B9B9;
            border:1px solid #FFF;
            -moz-box-shadow:0 0 0;
            -webkit-box-shadow:0 0 0;
            box-shadow:0 0 0
      }
      .accountButton:focus {
            outline:gold solid 1px
      }
      #MicrosoftAccountExchange {
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAPFBMVEU1pe/////t+v4uoe5btvNixPVVwfUsoe9tyfXU7/y95vu24vrd9f5NtfLH6/ys3/o/sPE6qfD2/f+f2vnAysuQAAAAaElEQVQ4y93SORKAIAwFUEGCsoT1/nd1JkkDFhY24qt+8VMkk20lu6DAaVBOBsVKsuO8aYo08IqlYyxoRTQExfyKheRIgu5Yl4KoVhSUgNOhoiYRsmb5g2u+LtzXDNOhjKgoAZ9/8k8uZWsGqcIav5wAAAAASUVORK5CYII=);
            background-color:#33A7F2
      }
      #MicrosoftAccountExchange:hover {
            background-color:#ADDBF9
      }
      #GoogleExchange {
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEXcTkH////cTD/bSj3ZQDLYOyzaRDbeV0vbSDrZPS/66Obyv7rsnpfpkorjcWfgZlvXOCr++Pj5393haFz88/L88fD67Or319T1zsv1zsrxuLPuqaLuqKLoi4LlfXTgYlbWMyTWMiPwtrHwta/fXVH/sCIIAAAAmElEQVQ4y+2RyQ7DIBBDMcwAIXvovqXb/39jRaX0AEmr5px3tSV7PGLhX6TVRFpN61l9zPNS6kn9gDcXO67zDnCnO2BCiNIyMtgKKJgyY2zQ68JEDtqju0nFTcOsxPUMw1GDDUqt+tY51/YNVlhvacTgEfCDIY0Q/lkBSg4RaUmmDo4/JdMzHy1Q2ejMeCj6PrXQP5+1MI8X0Y4HL4c826EAAAAASUVORK5CYII=);
            background-color:#DC4E41
      }
      #GoogleExchange:hover {
            background-color:#F1B8B3
      }
      #TwitterExchange {
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAdVBMVEVgqd3///9Ypdtdp9xaptxSotpQodlNn9lWo9pUo9rX6Pa+2vGTw+iLvuZlqt79/P7K4PO62O+y0+6hyutysuD2+fzi7vne6/fT5PTE3fKs0O2lzeuZx+l7tuJqrd71+Pzz9vzn8PnQ4/SCueSAueNsrt9InNh7sQwBAAAAwklEQVQ4y92PRw6EMAwAXeIkdBbY3uv/n7gSAoLDD5hbPCPZgZVihEgYgNSUpmfS7bfbtHS2nReyL2Qoc+yp8ZRAwCEWjgGAPQ7sssKoAGsWBrrgyMZCwD77Uel+59E3Tt14xZ7qlY7BRf1CDgeMKMw8sBXGlKxWtLGvHCgkQ80m0YHpjjq4sQ74pn1mISLJVSAMiwJO98l/TWSNF1eGKzqKfZ7Vj0mnHHwodpP+WIYlZP373DTtVWxYr2FD3pOBdfIHhOAHYHQI9VgAAAAASUVORK5CYII=);
            background-color:#60A9DD
      }
      #TwitterExchange:hover {
            background-color:#BFDCF1
      }
      #FacebookExchange {
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAaVBMVEU7W5z///85Wps3WJsiRo8xU5fw8vYyUpY0VZiAj70pS5OBkb0vUpb7+fwsTpTR1ud6irllerBPaqX09fnx8vfs7fSQoMZxg7VsgLNGY6FCX58ZP4v++/7r7vTZ3OupstGIlsFWcalDYaCK3qwDAAAAnklEQVQ4y+XQyw7CIBAFUBgc5VUoWGtb3/7/RyoYkyZAiSsXvdt7kstA/hRg/B0GpZ6byQ3Dw0NBaH+lMYRle3T0kwayACRdBrr/gnN+QtpQWv8cR4DswiUAjozlz4RdF8AmlnmwjaDQImoZwQkRedoToUS7D+ColGoTwQidx8oEQDMHN1MBva5MOL70SCHuE1TOhOpHrRt0FWAOP4IX8PsG2qEOR30AAAAASUVORK5CYII=);
            background-color:#3B5B9C
      }
      #FacebookExchange:hover {
            background-color:#B0BDD7
      }
      #LinkedInExchange {
            background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAb1BMVEUAe7b///8AdrMklscAc7EAeLUAcbB5ttifzeMqmckAdLIAaqz7+/6PxeAShr0CgLkAba4nmMctksTv9Puw1eij0OWGvNtfrNJNo80YjMAeib/D4vGt3Oy82+yfzOOCvtyJvdx3tddirtI/ncoxmMj9KsrQAAAAw0lEQVQ4y9WSVw7DIAxAG8CkjJDVzO5x/zMWk0RNJaB/kfo+sGUeCMvstgI4J7F9aS5NxSLnTWLpZVDgexTqIiycUNBhgTxRyCKPYJ3dl7sITCkO+FyLXaWU310DscASOesf3ahWChGJ5cb4ASO5Joiu2EegWEmZa1c3yUwOHmHNuQgJup4CgF8YlKpcMhKvkNmb1REz6hdetsyziIBldv8lpH8ouGm28zQFCu2SOSAXlJYGYCgpFThEMFPm/zCryja8Acy7CRfMrcKPAAAAAElFTkSuQmCC);
            background-color:#0077B5
      }
      #LinkedInExchange:hover {
            background-color:#99CAE1
      }
      #AmazonExchange {
            background-image:url(https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_156x32.png);
            background-color:#FFF;
            color:transparent
      }

      #next {
            -moz-user-select:none;
            user-select:none;
            cursor:pointer;
            width:auto;
            padding-left:10px;
            padding-right:10px;
            height:30.5px;
            -moz-border-radius:0;
           -webkit-border-radius:0;
            border-radius:0;
            background:#2672E6;
            border:1px solid #FFF;
            color:#fff;
            transition:background 1s ease 0s;
            font-size:100%
      }
      #next:hover {
            background:#0F3E83;
            border:1px solid #FFF;
            box-shadow:0 0 0
      }
      #next:hover,.accountButton:hover {
            -moz-box-shadow:0 0 0;
            -webkit-box-shadow:0 0 0;
            box-shadow:0 0 0;
      }
                        </style>
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <div class="visible-xs-block">
            {{ snippets["Mobile Header"] }}
          </div>
          <div class="visible-sm-block visible-md-block visible-lg-block navbar-brand">
            {{ snippets["Navbar Left"] }}
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="page-heading">
        <ul class="breadcrumb">
          <li>
            <a href={{ request.url | base }} title="Home">Home</a>
          </li>
          <li class="active">{{ page.title | h}}</li>
        </ul>
        {% include 'Page Header' %}
     </div>
     <div class="row">
      <div class="col-md-12">
        {% include 'Page Copy' %}
        <div id="api"></div>
      </div>
     </div>
    </div>
    <footer role="contentinfo">
      <div class="footer-top hidden-print">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-sm-12 col-xs-12 text-left">
               {{ snippets["About Footer"] }}
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12 text-right">
              <ul class="list-social-links">
                <li><a href=#><span class="sprite sprite-facebook_icon"></span></a></li>
                <li><a href=#><span class="sprite sprite-twitter_icon"></span></a></li>
                <li><a href=#><span class="sprite sprite-email_icon"></span></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom hidden-print">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-sm-12 col-xs-12 text-left">
               {{ snippets["Footer"] | liquid }}
            </div>
            <div class="col-md-8 col-sm-12 col-xs-12 text-left">
            </div>   
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>

Seleziona Salva e chiudi.

Passaggio 2: Creare un modello di pagina

Dal riquadro di sinistra, in Sito web, seleziona Modelli di pagina.
Seleziona Nuovo.
Immetti Nome, ad esempio Pagina personalizzata Azure AD B2C.
Per Sito Web, seleziona il sito Web del portale.
Seleziona Tipo come Modello Web.
Per Modello Web, seleziona il modello Web creato in precedenza nel passaggio 1.
Deseleziona Usa intestazione e piè di pagina sito Web.
Seleziona Salva e chiudi.

Passaggio 3: Creare una pagina Web

Dal riquadro di sinistra, in Contenuto, seleziona Pagine Web.
Seleziona Nuovo.
Immetti Nome, ad esempio Accedi.
Per Sito Web, seleziona il sito Web del portale.
Per Pagina padre seleziona Home.
Immetti URL parziale per la pagina Web, ad esempio azure-ad-b2c-sign-in.
Per Modello di pagina, seleziona il modello di pagina creato in precedenza nel passaggio 2.
Per Stato pubblicazione seleziona Pubblicato.
Seleziona Salva e chiudi.

Passaggio 4: Creare le impostazioni del sito

Le impostazioni del sito sono necessarie per configurare il protocollo CORS (Cross-Origin Resource Sharing) per consentire ad Azure AD B2C di richiedere la pagina personalizzata e di inserire l'interfaccia utente di accesso o di registrazione. Crea le impostazioni del sito seguenti.

Nome	valore
HTTP/Access-Control-Allow-Methods	`GET, OPTIONS`
HTTP/Access-Control-Allow-Origin	`https://tenant-name.b2clogin.com` Ad esempio, se il nome del tenant è ContosoOrg, immetti `https://contosoorg.b2clogin.com`. Nota: puoi ottenere questo valore copiando la parte del nome di dominio dell'URL emittente. Assicurati di escludere la parte non di dominio del valore dell'URL dell'emittente—ad esempio, escludi —`/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0`.

Per creare le impostazioni del sito:

Dal riquadro di sinistra, in Sito web, seleziona Impostazioni sito.
Seleziona Nuovo.
Immetti Nome come elencato nella tabella sopra.
Per Sito Web, seleziona il sito Web del portale.
Immetti Valore come elencato nella tabella sopra.
Seleziona Salva e chiudi.

Per un elenco completo delle altre impostazioni di CORS, vedi Supporto del protocollo CORS.

Passaggio 5: configurazione di Azure

Accedi al portale di Azure.
Nell'angolo in alto a sinistra del portale di Azure, seleziona .
Seleziona Tutte le risorse.
Seleziona il tenant B2C.
Se non lo hai già fatto, seleziona Panoramica dal riquadro di sinistra.
Nella sezione centrale destra della schermata, seleziona Impostazioni di Azure Active Directory B2C per il tenant B2C.
Questa azione apre il tenant B2C in una scheda del browser separata.
Nella scheda del browser tenant B2C, in Criteri nel riquadro di sinistra seleziona Flussi di utenti.
Seleziona il flusso di utenti che hai creato per i portali. Ad esempio: B2C_1_Contoso.
Dal riquadro di sinistra, in Personalizza, seleziona Layout di pagina.
In Pagina di registrazione o accesso unificata, seleziona Sì per Usa il contenuto della pagina personalizzato.
Per URI pagina personalizzata, inserisci l'URL completo della pagina web personalizzata del tuo portale che hai creato nel passaggio 3.
Ad esempio, per la pagina denominata azure-ad-b2c-sign-in nel portalehttps://contoso.powerappsportals.com, utilizza l'URI della pagina personalizzata come https://contoso.powerappsportals.com/azure-ad-b2c-sign-in.

Il tuo tenant Azure AD B2C è ora configurato per usare la pagina personalizzata per l'esperienza di registrazione e accesso.

Vedi anche

Configurare il provider Azure AD B2C (anteprima)
Configurare il provider Azure AD B2C manualmente
Personalizzare l'interfaccia utente con modelli HTML in Azure AD B2C

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).

Personalizzare l'interfaccia utente di Azure AD B2C per i portali

Prerequisiti

Passaggio 1: Creare un modello Web

Passaggio 2: Creare un modello di pagina

Passaggio 3: Creare una pagina Web

Passaggio 4: Creare le impostazioni del sito

Passaggio 5: configurazione di Azure

Vedi anche

Commenti e suggerimenti

Risorse aggiuntive