Personalitza la interfície d'usuari Azure AD B2C per als portals

Azure Active Directory B2C (Azure AD B2C) admet la personalització de la interfície d'usuari per registrar-se i iniciar la sessió. Amb aquesta funció, podeu configurar Azure AD'inquilí B2C amb una pàgina d'inici de sessió i inici de sessió personalitzada creada a l'interior del vostre portal. En aquest article, obtindreu informació sobre com crear i configurareu una pàgina web d'inici de sessió / registre personalitzada amb HTML d'exemple als portals per utilitzar-la amb Azure AD autenticació B2C.

Requisits previs

Abans de començar, assegureu-vos que heu configurat l'autenticació de l'Azure AD B2C per al portal amb passos automàtics o manuals. Haureu d'utilitzar aquesta configuració Azure AD B2C per personalitzar la interfície d'usuari dels portals seguint els passos següents.

Pas 1: Crear una plantilla web

  1. Obriu l'aplicació Administració del portal.

  2. A la subfinestra esquerra, a Contingut, seleccioneu Plantilles web.

  3. Seleccioneu Crea.

  4. Introduïu Nom, com ara Azure AD pàgina personalitzada del B2C.

  5. Per a Lloc web, seleccioneu el lloc web del portal.

  6. Per a Font, copieu i enganxeu el codi HTML font de la plantilla web d'exemple.

    <!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>
    
  7. Seleccioneu Desa i tanca.

Pas 2: Crear una plantilla de pàgina

  1. A la subfinestra esquerra, a Lloc web, seleccioneu Plantilles de pàgina.

  2. Seleccioneu Crea.

  3. Introduïu Nom, com ara Azure AD pàgina personalitzada del B2C.

  4. Per a Lloc web, seleccioneu el lloc web del portal.

  5. Seleccioneu Tipus com a Plantilla web.

  6. A Plantilla web, seleccioneu la plantilla web que heu creat al pas 1.

  7. Desmarqueu Utilitza capçalera i peu de pàgina de lloc web.

  8. Seleccioneu Desa i tanca.

Pas 3: Crear una pàgina web

  1. A la subfinestra esquerra, a Contingut, seleccioneu Pàgines web.

  2. Seleccioneu Crea.

  3. Introduïu el Nom, com ara Inici de sessió.

  4. Per a Lloc web, seleccioneu el lloc web del portal.

  5. Per a la Pàgina principal, seleccioneu Inici.

  6. Introduïu l'Adreça URL parcial de la pàgina web, com ara azure-ad-b2c-sign-in.

  7. A Plantilla de pàgina, seleccioneu la plantilla de pàgina que heu creat al pas 2.

  8. Per a l'Estat de publicació, seleccioneu Publicat.

  9. Seleccioneu Desa i tanca.

Pas 4: creeu la configuració de lloc

Els paràmetres del lloc són necessaris per configurar l'ús compartit de recursos d'origen creuat (CORS) per permetre que el B2C de l'Azure AD sol·liciti la pàgina personalitzada i injecti la interfície d'usuari d'inici de sessió o registre. Creeu la configuració de lloc següent.

Nom Valor
HTTP/Access-Control-Allow-Methods GET, OPTIONS
HTTP/Access-Control-Allow-Origin https://tenant-name.b2clogin.com
Per exemple, si el nom de l'inquilí és ContosoOrg, introduïu https://contosoorg.b2clogin.com.
Nota: podeu obtenir aquest valor copiant la part del nom de domini de l'Adreça URL de l'emissor. Assegureu-vos d'excloure la part que no és del domini del valor Adreça URL de l'emissor, per exemple, excloueu /tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0.

Per crear la configuració del lloc:

  1. A la subfinestra esquerra, a Lloc web, seleccioneu Configuració del lloc.

  2. Seleccioneu Crea.

  3. Introduïu Nom tal com s'indica a la taula anterior.

  4. Per a Lloc web, seleccioneu el lloc web del portal.

  5. Introduïu Valor tal com s'indica a la taula anterior.

  6. Seleccioneu Desa i tanca.

Per obtenir una llista completa d'altres configuracions CORS, consulteu suport del protocol CORS.

Pas 5: configuració de l'Azure

  1. Inicieu la sessió al portal de l'Azure.

  2. A la part superior esquerra del portal de l'Azure, seleccioneu Mostra el menú del portal.

  3. Seleccioneu Tots els recursos.

  4. Seleccioneu l’inquilí de B2C.

  5. Si encara no ho heu fet, seleccioneu Informació general a la subfinestra esquerra.

  6. Des de la secció central dreta de la pantalla, seleccioneu Azure AD Configuració B2C per a l'inquilí del B2C.
    Aquesta acció obre l'inquilí de B2C en una pestanya independent del navegador.

  7. A la pestanya del navegador de l'inquilí de B2C, a Normes de la subfinestra esquerra, seleccioneu Fluxos d'usuari.

  8. Seleccioneu el flux d'usuari que heu creat per als portals. Per exemple, B2C_1_Contoso.

  9. A la subfinestra esquerra, a Personalitza, seleccioneu Dissenys de pàgina.

  10. A Pàgina d'inici de sessió o d'inici de sessió unificat, seleccioneu per a Utilitza el contingut de la pàgina personalitzada.

  11. Per a l'URI de pàgina personalitzada, introduïu l'adreça URL completa de la pàgina web personalitzada del portal que heu creat al pas 3.
    Per exemple, per a la pàgina anomenada azure-ad-b2c-sign-in al portal https://contoso.powerappsportals.com, utilitzeu l'URI de pàgina personalitzada https://contoso.powerappsportals.com/azure-ad-b2c-sign-in.

El vostre Azure AD inquilí del B2C ara està configurat per utilitzar la pàgina personalitzada per registrar-vos i iniciar la sessió.

Consulteu també

Configura el proveïdor B2C Azure Active Directory (visualització prèvia)
Configura manualment el proveïdor B2C Azure Active Directory
Personalitza la interfície d'usuari amb plantilles HTML en Azure Active Directory B2C