Порталдар үшін Azure AD B2C пайдаланушы интерфейсін реттеу

Мақала
01/08/2024

Ескерім

2022 жылдың қазанынан бастап күшіне енеді, Power Apps порталдары — Power Pages.
Бұл тақырып бұрынғы мүмкіндіктерге қолданылады. Соңғы ақпарат алу үшін Microsoft Power Pages құжаттамасына өтіңіз.

Azure AD B2C тіркелу және кіру тәжірибесі үшін пайдаланушы интерфейсін теңшеуді қолдайды. Бұл функция көмегімен Azure AD бизнес‑тұтынушы қызметін порталда жасалған реттелетін жүйеге тіркелу және кіру бетімен конфигурациялауға болады. Бұл мақалада сіз Azure AD бизнес‑тұтынушысы аутентификациясымен пайдалануға арналған порталдарда HTML үлгісі бар реттелетін жүйеге тіркелу/кіру веб‑бетін жасау және конфигурациялау жолын үйренесіз.

Ескерім

Сондай-ақ бұл нұсқаулар Power Pages сайттары үшін Azure AD бизнес-тұтынушы пайдаланушы интерфейсін конфигурациялауға мүмкіндік береді. Қосымша ақпарат: Power Pages деген не?.

Алғышарттар

Бастамас бұрын, порталға арналған Azure AD бизнес‑тұтынушысы аутентификациясын автоматты немесе қолмен орындалатын қадамдармен конфигурацияланғанына көз жеткізіңіз. Төмендегі қадамдарды орындау кезінде порталдарға арналған пайдаланушы интерфейсін теңшеу үшін Azure AD бизнес-тұтынушысы конфигурациясын пайдалану қажет болады.

1-қадам: веб-үлгі жасау

Порталды басқару бағдарламасын ашыңыз.
Сол жақ тақтадан Мазмұны бөлімінде Веб-үлгілер түймешігін таңдаңыз.
Жаңа пәрменін таңдаңыз.
Azure AD бизнес‑тұтынушысының реттелетін беті сияқты атау енгізіңіз.
Веб-сайт үшін порталдың веб-сайтын таңдаңыз.

Бастапқы көз үшін келесі үлгі веб-үлгі көзінің 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>

Сақтау және жабу пәрменін таңдаңыз.

2-қадам: бет үлгісін жасау

Сол жақ тақтадан Веб‑сайт бөлімінде Бет үлгілері түймешігін таңдаңыз.
Жаңа пәрменін таңдаңыз.
Azure AD бизнес‑тұтынушысының реттелетін беті сияқты атау енгізіңіз.
Веб-сайт үшін порталдың веб-сайтын таңдаңыз.
Түрі опциясын Веб‑үлгі ретінде таңдаңыз.
Веб-үлгі үшін 1-қадамда жасаған веб‑үлгіні таңдаңыз.
Веб-сайттың үстіңгі және төменгі деректемелерін пайдалану ұяшығынан құсбелгіні алып тастаңыз.
Сақтау және жабу пәрменін таңдаңыз.

3-қадам: веб-бет жасау

Сол жақ тақтадан Мазмұны бөлімінде Веб беттер түймешігін таңдаңыз.
Жаңа пәрменін таңдаңыз.
Жүйеге кіру сияқты атауын енгізіңіз.
Веб-сайт үшін порталдың веб-сайтын таңдаңыз.
Негізгі бет үшін Басты мәтінін таңдаңыз.
Веб‑бетке azure-ad-b2c-sign-in сияқты Жартылай URL мекенжайын енгізіңіз.
Веб-үлгі үшін 2-қадамда жасаған веб‑үлгіні таңдаңыз.
Жариялау күйі үшін Жарияланған мәтінін таңдаңыз.
Сақтау және жабу пәрменін таңдаңыз.

4-қадам: сайт параметрлерін жасау

Сайт параметрлері Azure AD B2C қызметіне теңшелетін бетті сұрауға және кіру немесе тіркелу пайдаланушы интерфейсін ендіруге мүмкіндік беру үшін көздер арасында ресурстарды бөлісуді (CORS) конфигурациялау үшін керек. Келесі сайт параметрлерін жасаңыз.

Атауы Мәні

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

HTTP/Access-Control-Allow-Origin https://tenant-name.b2clogin.com
Мысалы, егер қатысушының аты ContosoOrg болса, https://contosoorg.b2clogin.com енгізіңіз.
Ескертпе: бұл мәнді Шығарушы URL мекенжайы домен атауының бөлігін көшіру арқылы алуға болады. Шығарушының URL мәнінің домендік емес бөлігін алып тастағаныңызға көз жеткізіңіз—мысалы,—/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0 алып тастаңыз.

Атауы	Мәні
HTTP/Access-Control-Allow-Methods	`GET, OPTIONS`
HTTP/Access-Control-Allow-Origin	`https://tenant-name.b2clogin.com` Мысалы, егер қатысушының аты ContosoOrg болса, `https://contosoorg.b2clogin.com` енгізіңіз. Ескертпе: бұл мәнді Шығарушы URL мекенжайы домен атауының бөлігін көшіру арқылы алуға болады. Шығарушының URL мәнінің домендік емес бөлігін алып тастағаныңызға көз жеткізіңіз—мысалы,—`/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0` алып тастаңыз.

Сайт параметрлерін жасау үшін:

Сол жақ тақтадан Веб‑сайт бөлімінде Сайт параметрлері түймешігін таңдаңыз.
Жаңа пәрменін таңдаңыз.
Аты өрісін жоғарыдағы кестеде көрсетілгендей енгізіңіз.
Веб-сайт үшін порталдың веб-сайтын таңдаңыз.
Мәні өрісін жоғарыдағы кестеде көрсетілгендей енгізіңіз.
Сақтау және жабу пәрменін таңдаңыз.

Басқа CORS параметрлерінің толық тізімін CORS протоколын қолдау бетінде көріңіз.

5-қадам: Azure конфигурациясы

Azure порталына кіріңіз.
Azure порталының жоғарғы сол жақ бұрышынан опциясын таңдаңыз.
Барлық ресурстар түймешігін таңдаңыз.
Бизнес‑тұтынушы қатысушысын таңдаңыз.
Егер жоқ болса, сол жақта тақтадан Шолу түймешігін таңдаңыз.
Экранның оң жақ ортаңғы бөлігінде B2C жалға алушысы үшін Azure Active Directory B2C параметрлері таңдаңыз.
Бұл әрекет бизнес‑тұтынушы қатысушысын бөлек браузер қойыншасында ашады.
Бизнес‑тұтынушы қатысушысы браузерінің қойыншасында сол жақта тақтадағы Саясат бөлімінен Пайдаланушы ағындары түймешігін таңдаңыз.
Порталдар үшін жасаған пайдаланушы ағынын таңдаңыз. Мысалы, B2C_1_Contoso.
Сол жақ тақтадан Теңшеу бөлімінде Бет орналасулары түймешігін таңдаңыз.
Бірыңғай жүйеге тіркелу немесе кіру беті бөлімінде Реттелетін бет мазмұнын пайдалану параметрі үшін Иә мәнін таңдаңыз.
Реттелетін URI мекенжайы бетінде 3-қадамда жасаған портал реттелетін веб‑бетінің толық URL мекенжайын енгізіңіз.
Мысалы, https://contoso.powerappsportals.com порталындағы azure-ad-b2c-sign-in деген бет үшін https://contoso.powerappsportals.com/azure-ad-b2c-sign-in сияқты реттелетін бет URI мекенжайын пайдаланыңыз.

Сіздің Azure AD бизнес‑тұтынушы қатысушыңыз енді жүйеге тіркелу және кіру тәжірибесі үшін реттелетін бетті пайдалануға конфигурацияланған.

Сондай-ақ, келесіні қараңыз

Azure AD B2C провайдерін конфигурациялау (алдын ала қарау)
Azure AD B2C провайдерін қолмен конфигурациялаңыз
Azure AD B2C ішіндегі HTML үлгілерімен пайдаланушы интерфейсін теңшеңіз

Ескерім

Сіз құжат тіліңіздің артықшылықтары туралы айта аласыз ба? Қысқа сауалнамаға қатысыңыз. (бұл сауалнама ағылшын тілінде екеніне назар аударыңыз)

Сауалнама шамамен жеті минут уақытыңызды алады. Жеке деректер жиналмайды (құпиялылық туралы мәлімдеме).

Бөлісу құралы:

Порталдар үшін Azure AD B2C пайдаланушы интерфейсін реттеу

Алғышарттар

1-қадам: веб-үлгі жасау

2-қадам: бет үлгісін жасау

3-қадам: веб-бет жасау

4-қадам: сайт параметрлерін жасау

5-қадам: Azure конфигурациясы

Сондай-ақ, келесіні қараңыз

Қосымша ресурстар