Tinkinti „Azure AD B2C“ vartotojo sąsają portalams

Straipsnis
01/08/2024

Pastaba

Nuo 2022 m. spalio mėn. „Power Apps“ portalai tampa „Power Pages“.
Ši tema taikoma senesnėms galimybėms. Norėdami gauti naujausios informacijos, eikite į „Microsoft Power Pages“ instrukciją.

Azure AD B2C palaiko vartotojo sąsajos tinkinimą, kad būtų galima prisiregistruoti ir prisijungti. Naudodami šią funkciją galite sukonfigūruoti „Azure AD“ B2C nuomotoją naudodami pasirinktinį prisijungimo ir prisijungimo puslapį, sukurtą jūsų portale. Šiame straipsnyje sužinosite, kaip sukurti ir sukonfigūruoti pasirinktinį prisijungimo / prisijungimo tinklalapį su HTML pavyzdžiu portaluose, kad būtų galima naudoti „Azure AD“ su B2C autentifikavimu.

Pastaba

Šios instrukcijos taip pat leidžia sukonfigūruoti Power Pages svetainių Azure AD B2C vartotojo sąsają. Daugiau informacijos: Kas yra Power Pages.

Būtinosios sąlygos

Prieš pradėdami įsitikinkite, kad sukonfigūruotas „Azure AD“ portalo B2C autentifikavimas naudojant automatinius arba neautomatinius veiksmus. Šią B2C konfigūraciją turėsite „Azure AD“ naudoti, kad tinkindami portalų vartotojo sąsają, atlikite toliau nurodytus veiksmus.

1 veiksmas: sukurkite žiniatinklio šabloną.

Atidarykite Portalo valdymo programą.
Kairiosios srities dalyje Turinys pažymėkite Žiniatinklio šablonai.
Pasirinkite Naujas.
Įveskite pavadinimą, pvz., „Azure AD“ B2C pasirinktinis puslapis.
Jei svetainė – pažymėkite portalo svetainę.

Šaltiniui: kopijuokite ir įkelkite šį pavyzdinį žiniatinklio šablono šaltinio HTML.

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

Pasirinkite Įrašyti ir uždaryti.

2 veiksmas: sukurkite puslapio šabloną.

Kairiosios srities dalyje Svetainė pažymėkite Puslapio šablonai.
Pasirinkite Naujas.
Įveskite pavadinimą, pvz., „Azure AD“ B2C pasirinktinis puslapis.
Jei svetainė – pažymėkite portalo svetainę.
Pasirinkite Tipas kaip Žiniatinklio šabloną.
Žiniatinklio šablonui, rinkitės žiniatinklio šabloną, kurį sukūrėte ankstesnėje šios procedūros žingsniyje 1.
Atžymėkite Naudoti svetainės antraštę ir poraštę.
Pasirinkite Įrašyti ir uždaryti.

3 veiksmas: sukurkite tinklalapį

Kairiosios srities dalyje Turinys pažymėkite Žiniatinklio puslapiai.
Pasirinkite Naujas.
Įveskite Pavadinimą, pvz., Prisijungti.
Jei svetainė – pažymėkite portalo svetainę.
Vadovo puslapyje, pasirinkite Pagrindinis.
Įveskite dalinius tinklalapio URL, pvz., azure-ad-b2c-sign-in.
Puslapio šablonui, rinkitės puslapio šabloną, kurį sukūrėte ankstesnėje šios procedūros žingsniyje 2.
Publikavimo valstybė pasirinkite Publikuota.
Pasirinkite Įrašyti ir uždaryti.

4 veiksmas: sukurkite svetainės parametrus

Svetainės parametrai yra būtini norint konfigūruoti kryžminės kilmės išteklių bendrinimą (CORS), kad „„Azure“ AD B2C“ būtų leista pateikti pasirinktinio puslapio užklausą ir įdėti prisijungimo arba registracijos vartotojo sąsają. Sukurkite tokius svetainės parametrus.

Pavadinimas / vardas ir pavardė	Reikšmė
HTTP/Access-Control-Allow-Methods	`GET, OPTIONS`
HTTP/Access-Control-Allow-Origin	`https://tenant-name.b2clogin.com` Pvz., jei nuomotojo pavadinimas yra „ContosoOrg", įveskite `https://contosoorg.b2clogin.com`. Pastaba: šią reikšmę galite gauti nukopijuodami domeno vardo dalį iš Išdavėjo URL. Įsitikinkite, kad neįtrauksite ne domeno dalies, pvz.,—Išsamios URL reikšmės, neįtraukite—`/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0`.

Norėdami kurti svetainės parametrus:

Kairiosios srities dalyje Svetainė pažymėkite Svetainės nustatymai.
Pasirinkite Naujas.
Įveskite pavadinimą, kaip nurodyta aukščiau pateiktoje lentelėje.
Jei svetainė – pažymėkite portalo svetainę.
Įveskite vertę, kaip nurodyta aukščiau pateiktoje lentelėje.
Pasirinkite Įrašyti ir uždaryti.

Norėdami viso kitų CORS parametrų sąrašo žr. CORS protokolo pagalba.

5 žingsnis: „Azure“ konfigūravimas

Prisiregistruokite prie „Azure“ portalo.
Viršutiniame kairiajame „Azure" portalo kampe pasirinkite Rodyti .
Rinkitės Visi ištekliai.
Pasirinkite savo B2C nuomotoją.
Jei dar nėra, kairiojoje srityje pažymėkite Apžvalga.
Dešinėje vidurinėje ekrano dalyje pasirinkite Azure Active Directory B2C Nustatymai B2C nuomotojui.
Šis veiksmas atidaro B2C nuomotoją atskirame naršyklės skirtuke.
B2C nuomotojo naršyklės skirtuko kairiosios srities strategijos dalyje pažymėkite Vartotojų srautai.
Pažymėkite sukurtų portalų vartotojų srautą. Pavyzdžiui, B2C_1_Contoso.
Kairiosios srities dalyje Tinkinti pažymėkite Puslapio išdėstymai.
Dalyje „Vieningasis prisijungimas arba prisijungimo puslapis“ pažymėkite Taip , kad būtų naudojamas pasirinktinio puslapio turinys.
Jei naudojate pasirinktinį puslapį URI, įveskite visą savo portalo pasirinktinio tinklalapio, kurį sukūrėte atlikdami 3 veiksmą, URL.
Pavyzdžiui, portale pavadintam azure-ad-b2c-sign-in puslapiui https://contoso.powerappsportals.com naudokite pasirinktinį puslapio URI kaip https://contoso.powerappsportals.com/azure-ad-b2c-sign-in.

Dabar jūsų B2C nuomotojas sukonfigūruotas taip, kad prisijungimo ir prisijungimo metu būtų „Azure AD“ naudojamas pasirinktinis puslapis.

Taip pat žr.

B2C teikėjo konfigūravimas Azure AD (peržiūra)
Konfigūruokite Azure AD B2C teikėją rankiniu būdu
Tinkinkite vartotojo sąsają naudodami HTML šablonus Azure AD B2C

Pastaba

Ar galite mums pranešti apie dokumentacijos kalbos nuostatas? Atlikite trumpą apklausą. (atkreipkite dėmesį, kad ši apklausa yra anglų kalba)

Apklausą atliksite per maždaug septynias minutes. Asmeniniai duomenys nėra renkami (privatumo nuostatos).

Bendrinti naudojant

Tinkinti „Azure AD B2C“ vartotojo sąsają portalams

Būtinosios sąlygos

1 veiksmas: sukurkite žiniatinklio šabloną.

2 veiksmas: sukurkite puslapio šabloną.

3 veiksmas: sukurkite tinklalapį

4 veiksmas: sukurkite svetainės parametrus

5 žingsnis: „Azure“ konfigūravimas

Taip pat žr.

Papildomi ištekliai