Prilagodba korisničkog sučelja Azure AD B2C za portale

Azure Active Directory B2C (Azure AD B2C) podržava prilagodbu korisničkog sučelja za iskustvo prijave i prijave. Pomoću ove značajke možete konfigurirati Azure AD B2C klijenta s prilagođenom stranicom za prijavu i prijavu stvorenom unutar vašeg portala. U ovom ćete članku saznati kako stvoriti i konfigurirati prilagođenu web-stranicu za prijavu/prijavu s oglednim HTML-om na portalima za korištenje s Azure AD B2C provjerom autentičnosti.

Preduvjeti

Prije početka provjerite jeste li konfigurirali Azure AD B2C provjeru autentičnosti za portal automatskim ili ručnim koracima. Morat ćete koristiti ovu Azure AD B2C konfiguraciju da biste prilagodili korisničko sučelje za portale slijedeći korake u nastavku.

Prvi korak: Stvaranje web-predloška

  1. Otvorite aplikaciju Upravljanje portalom.

  2. U lijevom oknu, u odjeljku Sadržaj, odaberite stavku Web-predlošci.

  3. Odaberite Novo.

  4. Unesite naziv, primjerice Azure AD B2C prilagođenu stranicu.

  5. Za stavku Web-mjesto odaberite web-mjesto svog portala.

  6. Za Izvor kopirajte i zalijepite sljedeći uzorak web-predloška izvornog HTML-a.

    <!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. Odaberite Spremi i zatvori.

Prvi korak: Stvaranje predloška stranice

  1. U lijevom oknu, u odjeljku Web-mjesto, odaberite stavku Predlošci stranice.

  2. Odaberite Novo.

  3. Unesite naziv, primjerice Azure AD B2C prilagođenu stranicu.

  4. Za stavku Web-mjesto odaberite web-mjesto svog portala.

  5. Odaberite Vrsta za Web-predložak.

  6. Za Web-predložak odaberite web-predložak koji ste stvorili u koraku 1.

  7. Poništite Upotreba zaglavlja i podnožja web-mjesta.

  8. Odaberite Spremi i zatvori.

Korak 3: Stvaranje web-stranice

  1. U lijevom oknu, u odjeljku Sadržaj, odaberite stavku Web-stranice.

  2. Odaberite Novo.

  3. Unesite Naziv kao što je Prijava.

  4. Za stavku Web-mjesto odaberite web-mjesto svog portala.

  5. Za opciju Nadređena stranica odaberite Početna.

  6. Unesite Djelomični URL za web-stranicu, kao što je azure-ad-b2c-sign-in.

  7. Za Predložak stranice odaberite predložak stranice koji ste stvorili u koraku 2.

  8. Za Stanje objavljivanja odaberite Objavljeno.

  9. Odaberite Spremi i zatvori.

Korak 4: Stvaranje postavki web-mjesta

Postavke web-mjesta potrebne za konfiguriranje značajke cross-origin resource sharing (CORS) da biste omogućili servisu Azure AD B2C zahtjev za prilagođenom stranicom i ubacivanje korisničkog sučelja za prijavu ili registraciju. Stvorite sljedeće postavke web-mjesta.

Ime Value
HTTP/Access-Control-Allow-Methods GET, OPTIONS
HTTP/Access-Control-Allow-Origin https://tenant-name.b2clogin.com
Na primjer, ako je naziv klijenta ContosoOrg, unesite https://contosoorg.b2clogin.com.
Napomena: Ovu vrijednost možete dobiti kopiranjem dijela naziva domene URL-a izdavatelja. Pobrinite se da izuzmete dio koji nije domena za vrijednost URL-a izdavatelja—npr. izuzmite—/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0.

Za stvaranje postavki web-mjesta:

  1. U lijevom oknu, u odjeljku Web-mjesto, odaberite Postavke web-mjesta.

  2. Odaberite Novo.

  3. Unesite Naziv kako je navedeno u prethodnoj tablici.

  4. Za stavku Web-mjesto odaberite web-mjesto svog portala.

  5. Unesite Vrijednost kako je navedeno u prethodnoj tablici.

  6. Odaberite Spremi i zatvori.

Popis drugih CORS postavki pogledajte podrška za CORS protokol.

Korak 5: konfiguracija servisa Azure

  1. Prijavite se na portal Azure.

  2. U gornjem lijevom kutu portala Azure odaberite Prikaz izbornika portala..

  3. Odaberite stavku Svi resursi.

  4. Odaberite svog B2C klijenta.

  5. Ako već niste, odaberite Pregled u lijevom oknu.

  6. U desnom srednjem dijelu zaslona odaberite Azure AD B2C postavke za B2C klijent.
    Ovom radnjom se B2C klijent otvara na zasebnoj kartici preglednika.

  7. Na kartici preglednika B2C klijenta, u odjeljku Pravila, u lijevom oknu, odaberite stavku Korisnički tokovi.

  8. Odaberite korisnički tok koji ste stvorili za portale. Na primjer, B2C_1_Contoso.

  9. U lijevom oknu, u odjeljku Prilagođavanje, odaberite stavku Rasporedi stranice.

  10. U odjeljku Objedinjena stranica za registraciju ili prijavu odaberite Da za mogućnost Upotreba prilagođenog sadržaja stranice.

  11. Za URI prilagođene stranice unesite puni URL prilagođene web-stranice vašeg portala koju ste izradili u koraku 3.
    Na primjer, za stranicu s nazivom azure-ad-b2c-sign-in na portalu https://contoso.powerappsportals.com koristite URI prilagođene stranice kao https://contoso.powerappsportals.com/azure-ad-b2c-sign-in.

Vaš Azure AD B2C klijent sada je konfiguriran za korištenje prilagođene stranice za prijavu i prijavu.

Pogledajte

Konfiguriranje davatelja usluge Azure Active Directory B2C (pretpregled)
Ručno konfiguriranje davatelja usluge Azure Active Directory B2C
Prilagodba korisničkog sučelja HTML predlošcima u Azure Active Directory B2C