Azure AD B2C -käyttöliittymän mukauttaminen portaaleille

Artikkeli
01/09/2024

Huomautus

Power Apps -portaaleja kutsutaan lokakuusta 2022 alkaen nimellä Power Pages.
Tässä ohjeaihe koskee vanhoja ominaisuuksia. Uusimmat tiedot ovat Microsoft Power Pages -dokumentaatiossa.

Azure AD:n kuluttajakauppa tukee käyttöliittymän mukauttamista rekisteröitymis- ja sisäänkirjauskokemuksessa. Tämän ominaisuuden avulla voit määrittää Azure AD B2C -vuokraajalle mukautetun rekisteröitymis- ja kirjautumissivun, jotka on luotu portaalin sisällä. Tässä artikkelissa kerrotaan mukautetun rekisteröitymisen ja sisäänkirjauksen luomisesta ja määrittämisestä verkkosivulla HTML-mallikoodin avulla portaaleissa, joissa käytetään Azure AD B2C -todennusta.

Huomautus

Näiden ohjeiden avulla voit myös määrittää Azure AD B2C -käyttöliittymän Power Pages -sivustoille. Lisätietoja: Mikä on Power Pages.

edellytykset

Varmista ennen aloitusta, että olet määrittänyt Azure AD B2C -todennuksen portaalissa automaattisten tai manuaalisten vaiheiden avulla. Tätä Azure AD B2C -määritystä tulee käyttää käyttöliittymän mukauttamisessa portaaleissa alla olevien vaiheiden noudattamisen yhteydessä.

Vaihe 1: verkkomallin luominen

Avaa Portaalin hallintasovellus.
Valitse vasemmanpuoleisessa ruudussa Sisältö-kohdassa Verkkomallit
Valitse Uusi.
Anna nimi, kuten Azure AD B2C:n mukautettu sivu.
Valitse Sivusto-kohtaan portaalin sivusto.

Kopioi ja liitä Lähde-kohtaan seuraava verkkomallin lähteen HTML-mallikoodi.

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

Valitse Tallenna ja sulje.

Vaihe 2: Sivumallin luominen

Valitse vasemmanpuoleisessa ruudussa Sivusto-kohdassa Sivumallit
Valitse Uusi.
Anna nimi, kuten Azure AD B2C:n mukautettu sivu.
Valitse Sivusto-kohtaan portaalin sivusto.
Valitse tyypiksi Verkkomalli.
Valitse verkkomallille vaiheessa 1 luotu verkkomalli.
Poista Käytä sivuston ylä- ja alatunnisteita -kohdan valinta.
Valitse Tallenna ja sulje.

Vaihe 3: Luo sivusto

Valitse vasemmanpuoleisessa ruudussa Sisältö-kohdassa Verkkosivut
Valitse Uusi.
Anna nimi, kuten Sisäänkirjaus.
Valitse Sivusto-kohtaan portaalin sivusto.
Valitse Ylätason sivu -kohdassa Aloitus.
Anna verkkosivulle osittainen URL-osoite, kuten azure-ad-b2c-sign-in.
Valitse sivumalliksi vaiheessa 2 luotu sivumalli.
Valitse Julkaisutila-kohdassa Julkaistu.
Valitse Tallenna ja sulje.

Vaihe 4: Luo sivuston asetukset

Sivuston asetusten on määritettävä CORS-jakamisen siten, että Azure AD B2C pyytää mukautettua sivua ja lisää sisäänkirjautumis- tai rekisteröitymiskäyttöliittymän. Luo seuraavat sivuston asetukset:

Nimi Arvo

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

HTTP/Access-Control-Allow-Origin https://tenant-name.b2clogin.com
Jos vuokraajan nimi on esimerkiksi ContosoOrg, syötä https://contosoorg.b2clogin.com.
Huomautus: Tämä arvo saadaan kopioimalla toimialueen nimen osa myöntäjän URL-osoitteesta. Varmista, että suljet pois muun kuin toimialueen osan myöntäjän URL-osoitteen arvosta. Jätä esimerkiksi pois /tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0.

Nimi	Arvo
HTTP/Access-Control-Allow-Methods	`GET, OPTIONS`
HTTP/Access-Control-Allow-Origin	`https://tenant-name.b2clogin.com` Jos vuokraajan nimi on esimerkiksi ContosoOrg, syötä `https://contosoorg.b2clogin.com`. Huomautus: Tämä arvo saadaan kopioimalla toimialueen nimen osa myöntäjän URL-osoitteesta. Varmista, että suljet pois muun kuin toimialueen osan myöntäjän URL-osoitteen arvosta. Jätä esimerkiksi pois `/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0`.

Voit luoda sivuston asetukset seuraavasti:

Valitse vasemmanpuoleisessa ruudussa Sivusto-kohdassa Sivuston asetukset
Valitse Uusi.
Syötä nimi edellä olevassa taulukossa mainitulla tavalla.
Valitse Sivusto-kohtaan portaalin sivusto.
Syötä Arvo edellä olevassa taulukossa mainitulla tavalla.
Valitse Tallenna ja sulje.

Täydellinen luettelo CORS-asetuksista on CORS protokollatuki.

Vaihe 5: Azuren määritys

Kirjaudu Azure-portaaliin.
Valitse Azure-portaalin vasemmassa yläkulmassa .
Valitse Kaikki resurssit.
Valitse B2C-vuokraaja.
Jos tätä ei vielä ole, valitse Yleiskatsaus vasemmanpuoleisessa ruudussa.
Valitse näytön keskiosassa oikealla puolella oleva Azure Active Directory B2C -asetukset -kohta B2C-vuokraajalle.
Tämä toiminto avaa B2C-vuokraajan erillisessä selainvälilehdessä.
Valitse B2C-vuokraajan selainvälilehdessä vasemmanpuoleisen ruudun Käytännöt-kohdassa Käyttäjän työnkulut.
Valitse käyttäjän työnkulku, jonka loit portaaleille. Esimerkki: B2C_1_Contoso.
Valitse vasemmanpuoleisessa ruudussa Mukauta-kohdassa Sivun asettelut.
Valitse Yhdistetty rekisteröinti- tai kirjautumissivu -kohdan Käytä mukautettua sivun sisältöä -kentässä Kyllä.
Syötä Mukautetun sivun URI -kohtaan vaiheessa 3 luodun portaalin mukautetun verkkosivun täydellinen URL-osoite.
Esimerkiksi sivulle nimeltä azure-ad-b2c-sign-in portaalissa https://contoso.powerappsportals.com käytetään URI-tunnusta muodossa https://contoso.powerappsportals.com/azure-ad-b2c-sign-in.

Azure AD B2C -vuokraaja on nyt määritetty käyttämään mukautettua sivua rekisteröitymis- ja sisäänkirjauskokemuksessa.

Katso myös

Azure AD B2C -palvelun määrittäminen (esiversio)
Azure AD B2C -tarjoajan määrittäminen manuaalisesti
Käyttöliittymän mukauttaminen HTML-mallien avulla Azure AD B2C -ratkaisussa

Huomautus

Voitko kertoa meille dokumentaatiota koskevan kielimäärityksesi? Vastaa lyhyeen kyselyyn. (Huomaa, että tämä kysely on englanninkielinen.)

Kyselyyn vastaaminen kestää noin seitsemän minuuttia. Henkilökohtaisia tietoja ei kerätä (tietosuojatiedot).

Azure AD B2C -käyttöliittymän mukauttaminen portaaleille

edellytykset

Vaihe 1: verkkomallin luominen

Vaihe 2: Sivumallin luominen

Vaihe 3: Luo sivusto

Vaihe 4: Luo sivuston asetukset

Vaihe 5: Azuren määritys

Katso myös

Palaute

Lisäresursseja