Prispôsobenie používateľského rozhrania Azure AD B2C pre portály

Článok
01/08/2024

Poznámka

S účinnosťou od októbra 2022 sa portály Power Apps nazývajú Power Pages.
Táto téma sa vzťahuje na staršie možnosti. Najnovšie informácie nájdete v dokumentácii k službe Microsoft Power Pages.

Azure AD B2C podporuje prispôsobenie používateľského rozhrania pre registráciu a prihlásenie. Pomocou tejto funkcie môžete konfigurovať nájomníka Azure AD B2C s vlastnou registračnou a prihlasovacou stránkou vytvorenou vo vašom portáli. V tomto článku sa dozviete, ako vytvoriť a nakonfigurovať vlastnú webovú stránku na registráciu/prihlásenie so vzorovým kódom HTML na portáloch na použitie s overením Azure AD B2C.

Poznámka

Tieto pokyny vám tiež umožňujú konfigurovať Azure AD používateľské rozhranie B2C pre lokality Power Pages. Ďalšie informácie: Čo je to Power Pages.

Požiadavky

Skôr ako začnete, skontrolujte, či ste nakonfigurovali overenie Azure AD B2C pre váš portál pomocou automatických alebo manuálnych krokov. Budete musieť použiť konfiguráciu Azure AD B2C na prispôsobenie používateľského rozhrania pre portály podľa nasledujúcich pokynov.

Krok 1: Vytvorte webovú šablónu

Otvorte aplikáciu Správa portálu.
Na ľavej table pod časťou Obsah vyberte Webové šablóny.
Vyberte Nové.
Zadajte Názov, ako napr. Vlastná stránka Azure AD B2C.
Pre položku Webová lokalita vyberte webovú lokalitu svojho portálu.

Pre Zdroj skopírujte a vložte nasledujúci ukážkový zdrojový kód HTML webovej šablóny.

<!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>

Vyberte položku Uložiť a zavrieť.

Krok 2: Vytvorte šablónu stránky

Na ľavej table pod časťou Webová lokalita vyberte Šablóny stránok.
Vyberte Nové.
Zadajte Názov, ako napr. Vlastná stránka Azure AD B2C.
Pre položku Webová lokalita vyberte webovú lokalitu svojho portálu.
Vyberte Typ ako Webová šablóna.
Pre Webová šablóna vyberte webovú šablónu, ktorú ste vytvorili v kroku 1.
Zrušte začiarknutie Použiť hlavičku a pätu webovej lokality.
Vyberte položku Uložiť a zavrieť.

Krok 3: Vytvorenie webovej stránky

Na ľavej table pod časťou Obsah vyberte Webové stránky.
Vyberte Nové.
Zadajte Názov, ako napr. Zaregistrovať sa.
Pre položku Webová lokalita vyberte webovú lokalitu svojho portálu.
Pri Nadradená stránka zvoľte možnosť Domov.
Zadajte Čiastočná adresa URL pre webovú stránku, ako napr. azure-ad-b2c-sign-in.
Pre Šablóna stránky vyberte šablónu stránky, ktorú ste vytvorili v kroku 2.
Pre Stav publikovania stlačte možnosť Publikované.
Vyberte položku Uložiť a zavrieť.

Krok 4: Vytvoriť nastavenia lokality

Nastavenie lokality sú potrebné na konfiguráciu zdieľania zdrojov naprieč pôvodom (CORS), čo umožní AzureAD B2C vyžadovať vlastnú stránku a súčasne vložiť používateľské rozhranie prihlasovania alebo registrácie. Vytvorte nasledovné nastavenia stránky.

Meno Hodnota

HTTP/Access-Control-Allow-Methods GET, OPTIONS

HTTP/Access-Control-Allow-Origin https://tenant-name.b2clogin.com
Napríklad, ak je názov nájomníka ContosoOrg, zadajte https://contosoorg.b2clogin.com.
Poznámka: Túto hodnotu môžete získať skopírovaním časti názvu domény z URL vydavateľa. Uistite sa, že ste vylúčili nedoménovú časť hodnoty adresy URL vydavateľa — napríklad vylúčili —/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0.

Meno	Hodnota
HTTP/Access-Control-Allow-Methods	`GET, OPTIONS`
HTTP/Access-Control-Allow-Origin	`https://tenant-name.b2clogin.com` Napríklad, ak je názov nájomníka ContosoOrg, zadajte `https://contosoorg.b2clogin.com`. Poznámka: Túto hodnotu môžete získať skopírovaním časti názvu domény z URL vydavateľa. Uistite sa, že ste vylúčili nedoménovú časť hodnoty adresy URL vydavateľa — napríklad vylúčili —`/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0`.

Vytvorenie nastavení lokality:

Na ľavej table pod časťou Webová lokalita vyberte Nastavenia lokality.
Vyberte Nové.
Zadajte Názov, ako je uvedené v tabuľke vyššie.
Pre položku Webová lokalita vyberte webovú lokalitu svojho portálu.
Zadajte Hodnotu, ako je uvedené v tabuľke vyššie.
Vyberte položku Uložiť a zavrieť.

Pre úplný zoznam ďalších nastavení CORS pozri Podpora protokolu CORS .

Krok 5: Konfigurácia služby Azure

Prihláste sa na portál Azure.
V ľavom hornom rohu portálu Azure vyberte .
Vyberte Všetky zdroje.
Výber nájomníka B2C.
Ak ešte nie je, vyberte Prehľad z ľavej tably.
V pravej strednej časti obrazovky vyberte Azure Active Directory Nastavenia B2C pre nájomníka B2C.
Táto akcia otvorí nájomníka B2C na samostatnej karte prehliadača.
Na karte prehliadača nájomníkov B2C pod Politiky na ľavej table vyberte možnosť Používateľské postupy.
Vyberte používateľský postup, ktorý ste vytvorili pre portály. Napríklad:B2C_1_Contoso
Na ľavej table pod časťou Prispôsobiť vyberte Rozloženia stránok.
V časti Stránka zjednoteného prihlásenia alebo registrácie vyberte Áno pre Použiť vlastný obsah stránky.
Pre Vlastný identifikátor URI stránky zadajte úplnú adresu URL vlastnej webovej stránky vášho portálu, ktorú ste vytvorili v kroku 3.
Napríklad pre stránku s názvom azure-ad-b2c-sign-in na portáli https://contoso.powerappsportals.com použite vlastný identifikátor URI stránky ako https://contoso.powerappsportals.com/azure-ad-b2c-sign-in.

Váš nájomník Azure AD B2C je teraz nakonfigurovaný na používanie vlastnej stránky na registráciu a prihlásenie.

Pozrite si tiež:

Konfigurácia Azure AD poskytovateľa B2C (ukážka)
Ručne nakonfigurujte poskytovateľa Azure AD B2C
Prispôsobte si používateľské rozhranie pomocou šablón HTML v Azure AD B2C

Poznámka

Môžete nás informovať o svojich voľbách jazyka pre dokumentáciu? Absolvujte krátky prieskum. (upozorňujeme, že tento prieskum je v angličtine)

Prieskum bude trvať približne sedem minút. Nezhromažďujú sa žiadne osobné údaje (vyhlásenie o používaní osobných údajov).

Zdieľať cez

Prispôsobenie používateľského rozhrania Azure AD B2C pre portály

Požiadavky

Krok 1: Vytvorte webovú šablónu

Krok 2: Vytvorte šablónu stránky

Krok 3: Vytvorenie webovej stránky

Krok 4: Vytvoriť nastavenia lokality

Krok 5: Konfigurácia služby Azure

Pozrite si tiež:

Ďalšie zdroje informácií