Personalitzar la interfície d’usuarisi de l’Azure AD B2C per als portals

Article
01/09/2024

Nota

Des de l'octubre de 2022, els portals del Power Apps són Power Pages.
Aquest tema s'aplica a funcionalitats heretades. Per obtenir més informació, aneu a la documentació del Microsoft Power Pages.

Azure AD B2C admet la personalització de la interfície d'usuari per al registre i l'experiència d'inici de sessió. Amb aquesta característica, podeu configurar l'inquilí de l'Azure AD B2C amb una pàgina d'inici de sessió i d'inici de sessió personalitzat creada a l'interior del portal. En aquest article aprendreu a crear i configurar una pàgina web d'inici de sessió/inici de sessió personalitzada amb HTML d'exemple als portals per utilitzar-la amb l'autenticació de l'Azure AD B2C.

Nota

Aquestes instruccions també us permeten configurar la interfície d'usuari d'Azure AD del B2C pels lloc web de Power Pages. Més informació: Què és Power Pages.

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ó de l'Azure AD B2C per personalitzar la interfície d'usuarisi per als portals seguint aquests passos.

Pas 1: Crear una plantilla web

Obriu l'aplicació Administració del portal.
A la subfinestra esquerra, a Contingut, seleccioneu Plantilles web.
Seleccioneu Crea.
Introduïu un Nom, com ara Pàgina personalitzada de l'Azure AD B2C.
Per a Lloc web, seleccioneu el lloc web del portal.

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>

Seleccioneu Desa i tanca.

Pas 2: Crear una plantilla de pàgina

A la subfinestra esquerra, a Lloc web, seleccioneu Plantilles de pàgina.
Seleccioneu Crea.
Introduïu un Nom, com ara Pàgina personalitzada de l'Azure AD B2C.
Per a Lloc web, seleccioneu el lloc web del portal.
Seleccioneu Tipus com a Plantilla web.
A Plantilla web, seleccioneu la plantilla web que heu creat al pas 1.
Desmarqueu Utilitza capçalera i peu de pàgina de lloc web.
Seleccioneu Desa i tanca.

Pas 3: Crear una pàgina web

A la subfinestra esquerra, a Contingut, seleccioneu Pàgines web.
Seleccioneu Crea.
Introduïu el Nom, com ara Inici de sessió.
Per a Lloc web, seleccioneu el lloc web del portal.
Per a la Pàgina principal, seleccioneu Inici.
Introduïu l'Adreça URL parcial de la pàgina web, com ara azure-ad-b2c-sign-in.
A Plantilla de pàgina, seleccioneu la plantilla de pàgina que heu creat al pas 2.
Per a l'Estat de publicació, seleccioneu Publicat.
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'usuarisi 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.

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:

A la subfinestra esquerra, a Lloc web, seleccioneu Configuració del lloc.
Seleccioneu Crea.
Introduïu Nom tal com s'indica a la taula anterior.
Per a Lloc web, seleccioneu el lloc web del portal.
Introduïu Valor tal com s'indica a la taula anterior.
Seleccioneu Desa i tanca.

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

Pas 5: configuració de l'Azure

Inicieu la sessió al portal de l'Azure.
A la part superior esquerra del portal de l'Azure, seleccioneu .
Seleccioneu Tots els recursos.
Seleccioneu l’inquilí de B2C.
Si encara no ho heu fet, seleccioneu Informació general a la subfinestra esquerra.
A la secció central dreta de la pantalla, seleccioneu Azure Active Directory Configuració B2C per a l'inquilí B2C.
Aquesta acció obre l'inquilí de B2C en una pestanya independent del navegador.
A la pestanya del navegador de l'inquilí de B2C, a Normes de la subfinestra esquerra, seleccioneu Fluxos d'usuarisi.
Seleccioneu el flux d'usuarisi que heu creat per als portals. Per exemple, B2C_1_Contoso.
A la subfinestra esquerra, a Personalitza, seleccioneu Dissenys de pàgina.
A Pàgina d'inici de sessió o d'inici de sessió unificat, seleccioneu Sí per a Utilitza el contingut de la pàgina personalitzada.
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.

L'inquilí de l'Azure AD B2C està configurat per utilitzar la pàgina personalitzada per a l'inici de sessió i l'experiència d'inici de sessió.

Consulteu també

Configurar el Azure AD proveïdor B2C (vista prèvia)
Configureu el Azure AD proveïdor B2C manualment
Personalitzar la interfície d'usuari amb plantilles HTML en Azure AD B2C

Nota

Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)

Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).

Comparteix a través de

Personalitzar la interfície d’usuarisi de l’Azure AD B2C per als portals

Requisits previs

Pas 1: Crear una plantilla web

Pas 2: Crear una plantilla de pàgina

Pas 3: Crear una pàgina web

Pas 4: creeu la configuració de lloc

Pas 5: configuració de l'Azure

Consulteu també

Comentaris

Recursos addicionals