Налаштування інтерфейсу користувача Azure AD B2C для порталів

Стаття
01/09/2024

Примітка

З жовтня 2022 року портали Power Apps перейменовано на Power Pages.
Цей розділ стосується застарілих можливостей. Актуальні відомості див. в документації до Microsoft Power Pages.

Azure AD B2C підтримує налаштування інтерфейсу користувача для реєстрації та входу. За допомогою цієї функції ви можете налаштувати клієнта Azure AD B2C, додавши настроювану сторінку входу та реєстрації, створену на вашому порталі. У цій статті ви дізнаєтеся, як створити та налаштувати настроювану веб-сторінку входу/реєстрації на порталах за допомогою зразку коду HTML, щоб використовувати її із автентифікацією Azure AD B2C.

Примітка

Ці інструкції також дають змогу налаштувати інтерфейс користувача B2C Azure AD для сайтів Power Pages. Додаткові відомості: Що таке Power Pages.

вимоги

Перед початком переконайтеся, що ви налаштували для порталу автентифікацію Azure AD B2C за допомогою автоматичних кроків або кроків, що треба виконати вручну. Цю конфігурацію Azure AD B2C потрібно буде використовувати для настроювання інтерфейсу користувача для порталів при виконанні зазначених нижче кроків.

Крок 1: створення веб-шаблону

Відкрийте програму Керування порталом.
В області ліворуч у розділі Вміст виберіть Веб-шаблони.
Виберіть Створити.
Уведіть Ім'я, наприклад Настроювана сторінка Azure AD B2C.
Виберіть у розділі Веб-сайт веб-сайт вашого порталу.

Скопіюйте наведений нижче зразок вихідного коду 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 B2C.
Виберіть у розділі Веб-сайт веб-сайт вашого порталу.
Укажіть Тип як Веб-шаблон.
У полі Веб-шаблон виберіть ім’я створеного на кроці 1 веб-шаблону.
Зніміть прапорець Використовувати верхній та нижній колонтитули веб-сайту.
Виберіть елемент Зберегти й закрити.

Крок 3: створення веб-сторінки

В області ліворуч у розділі Вміст виберіть Веб-сторінки.
Виберіть Створити.
Уведіть Ім'я, наприклад, Вхід.
Виберіть у розділі Веб-сайт веб-сайт вашого порталу.
Для параметра Батьківська сторінка виберіть Головна.
Уведіть Часткову URL-адресу для веб-сторінки, наприклад azure-ad-b2c-sign-in.
У полі Шаблон сторінки виберіть ім’я створеної на кроці 2 веб-сторінки.
Для параметра Стан публікації виберіть Опубліковано.
Виберіть елемент Зберегти й закрити.

Крок 4: Створіть настройки сайту

Параметри сайту вимагають конфігурації спільного користування ресурсами з різних джерел (CORS), щоб дозволити AzureAD B2C, щоб запитувати настроювану сторінку і вносити інтерфейс користувача для входу та реєстрації. Створіть такі настройки сайту.

Унікальне ім'я Значення

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.
Ця дія відкриває клієнт B2C в окремій вкладці браузера.
На вкладці браузера клієнта B2C у розділі Політики в області ліворуч виберіть Цикли користувачів.
Виберіть цикл користувача, що ви створили для порталів. Наприклад, B2C_1_Contoso.
В області ліворуч у розділі Настроїти виберіть Макети сторінок.
У розділі Єдина реєстрація або вхід на сторінку виберіть Так для параметра Використовувати настроюваний вміст сторінки.
Для URI настроюваної сторінки введіть повну URL-адресу настроюваної веб-сторінки порталу, створеної на кроці 3.
Наприклад, для сторінки, що має назву azure-ad-b2c-sign-in на порталі https://contoso.powerappsportals.com, використовуйте URI-адресу настроюваної сторінки https://contoso.powerappsportals.com/azure-ad-b2c-sign-in.

Тепер ваш клієнт Azure AD B2C налаштований для використання користувацької сторінки реєстрації та входу.

Статті за темою

Налаштування постачальника Azure AD B2C (попередній перегляд)
Налаштуйте B2C-провайдера Azure AD вручну
Налаштуйте інтерфейс користувача за допомогою HTML-шаблонів у Azure AD B2C

Примітка

Розкажіть нам про свої уподобання щодо мови документації? Візьміть участь в короткому опитуванні. (зверніть увагу, що це опитування англійською мовою)

Проходження опитування займе близько семи хвилин. Персональні дані не збиратимуться (декларація про конфіденційність).

Поділитися через

Налаштування інтерфейсу користувача Azure AD B2C для порталів

вимоги

Крок 1: створення веб-шаблону

Крок 2: створення шаблону сторінки

Крок 3: створення веб-сторінки

Крок 4: Створіть настройки сайту

Крок 5: налаштування Azure

Статті за темою

Зворотний зв’язок

Додаткові ресурси