Tùy chỉnh giao diện người dùng Azure AD B2C cho cổng thông tin

Bài viết
08/04/2023

Lưu ý

Từ tháng 10 năm 2022, cổng thông tin Power Apps trở thành Power Pages.
Chủ đề này áp dụng cho các chức năng cũ. Để biết thông tin mới nhất, hãy truy cập tài liệu hướng dẫn sử dụng Microsoft Power Pages.

Azure AD B2C hỗ trợ tùy chỉnh giao diện người dùng cho trải nghiệm đăng ký và đăng nhập. Với tính năng này, bạn có thể cấu hình đối tượng thuê Azure AD B2C với trang đăng ký và đăng nhập tùy chỉnh được tạo bên trong cổng thông tin của bạn. Trong bài viết này, bạn sẽ tìm hiểu về cách tạo và định cấu hình trang web đăng ký/đăng nhập tùy chỉnh với HTML mẫu trong các cổng để sử dụng với xác thực Azure AD B2C.

Lưu ý

Các hướng dẫn này cũng giúp bạn đặt cấu hình Giao diện người dùng B2C Azure AD cho site Power Pages. Thông tin thêm: Power Pages là gì.

Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã định cấu hình xác thực Azure AD B2C cho cổng của bạn với bước tự động hoặc thủ công. Bạn sẽ cần sử dụng cấu hình Azure AD B2C này để tùy chỉnh giao diện người dùng cho các cổng trong khi làm theo các bước dưới đây.

Bước 1: Tạo mẫu web

Mở ứng dụng Quản lý cổng thông tin.
Từ ngăn bên trái, trong Nội dung, chọn Mẫu web.
Chọn Mới.
Nhập Tên, chẳng hạn như Trang tùy chỉnh Azure AD B2C.
Đối với Trang web, chọn trang web cổng thông tin của bạn.

Đối với Nguồn: sao chép và dán HTML nguồn mẫu web mẫu sau.

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

Chọn Lưu & Đóng.

Bước 2: Tạo mẫu trang

Từ ngăn bên trái, trong Trang web, chọn Mẫu trang.
Chọn Mới.
Nhập Tên, chẳng hạn như Trang tùy chỉnh Azure AD B2C.
Đối với Trang web, chọn trang web cổng thông tin của bạn.
Chọn Loại là Mẫu web.
Đối với Mẫu web, chọn mẫu web bạn đã tạo trước đó trong bước 1.
Bỏ chọn Sử dụng đầu trang và chân trang trang web.
Chọn Lưu & Đóng.

Bước 3: Tạo trang web

Từ ngăn bên trái, trong Nội dung, chọn Trang web.
Chọn Mới.
Nhập Tên, chẳng hạn như Đăng nhập.
Đối với Trang web, chọn trang web cổng thông tin của bạn.
Đối với Trang mẹ, chọn Trang chủ.
Nhập URL một phần cho trang web, chẳng hạn như azure-ad-b2c-sign-in.
Đối với Mẫu trang, chọn mẫu trang bạn đã tạo trước đó trong bước 2.
Đối với Trạng thái phát hành, chọn Đã phát hành.
Chọn Lưu & Đóng.

Bước 4: Tạo thiết đặt site

Thiết đặt site là bắt buộc để đặt cấu hình chia sẻ giữa các tài nguyên gốc (CORS) nhằm cho phép Azure AD B2C yêu cầu trang tùy chỉnh và đưa vào giao diện người dùng đăng nhập hoặc đăng ký. Tạo các thiết đặt site sau.

Tên Giá trị

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

HTTP/Access-Control-Allow-Origin https://tenant-name.b2clogin.com
Ví dụ: nếu tên đối tượng thuê là ContosoOrg, hãy nhập https://contosoorg.b2clogin.com.
Ghi chú: Bạn có thể nhận được giá trị này bằng cách sao chép phần tên miền của URL của tổ chức phát hành. Đảm bảo rằng bạn loại trừ phần không thuộc miền của giá trị URL của nhà phát hành—ví dụ, loại trừ—/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0.

Tên	Giá trị
HTTP/Access-Control-Allow-Methods	`GET, OPTIONS`
HTTP/Access-Control-Allow-Origin	`https://tenant-name.b2clogin.com` Ví dụ: nếu tên đối tượng thuê là ContosoOrg, hãy nhập `https://contosoorg.b2clogin.com`. Ghi chú: Bạn có thể nhận được giá trị này bằng cách sao chép phần tên miền của URL của tổ chức phát hành. Đảm bảo rằng bạn loại trừ phần không thuộc miền của giá trị URL của nhà phát hành—ví dụ, loại trừ—`/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0`.

Cách tạo thiết đặt site:

Từ ngăn bên trái, trong Trang web, chọn Cài đặt site.
Chọn Mới.
Nhập Tên như liệt kê trong bảng trên.
Đối với Trang web, chọn trang web cổng thông tin của bạn.
Nhập Giá trị như liệt kê trong bảng trên.
Chọn Lưu & Đóng.

Để có danh sách đầy đủ các thiết đặt CORS khác, hãy xem hỗ trợ giao thức CORS.

Bước 5: Cấu hình Azure

Đăng nhập vào Cổng thông tin Azure.
Từ góc trên bên trái của cổng Azure, hãy chọn .
Chọn Tất cả nguồn lực.
Chọn đối tượng thuê B2C.
Nếu chưa có, hãy chọn Tổng quan từ ngăn bên trái.
Từ phần giữa bên phải của màn hình, chọn Azure Active Directory Cài đặt B2C cho đối tượng thuê B2C.
Hành động này sẽ mở đối tượng thuê B2C trong một tab trình duyệt riêng biệt.
Trong tab trình duyệt của đối tượng thuê B2C, bên dưới Chính sách trong ngăn bên trái, chọn Luồng người dùng.
Chọn luồng người dùng mà bạn đã tạo cho cổng. Ví dụ, B2C_1_Contoso.
Từ ngăn bên trái, trong Tùy chỉnh, chọn Bố cục trang.
Trong Trang đăng ký hoặc đăng nhập hợp nhất, chọn Có cho Sử dụng nội dung trang tùy chỉnh.
Đối với URI trang tùy chỉnh, hãy nhập URL đầy đủ của trang web tùy chỉnh cổng thông tin của bạn mà bạn đã tạo trong bước 3.
Ví dụ: đối với trang có tên azure-ad-b2c-sign-in trong cổng thông tin https://contoso.powerappsportals.com, sử dụng URI trang tùy chỉnh làm https://contoso.powerappsportals.com/azure-ad-b2c-sign-in.

Đối tượng thuê Azure AD B2C hiện đã được định cấu hình để sử dụng trang tùy chỉnh cho trải nghiệm đăng ký và đăng nhập.

Xem thêm

Định cấu hình Azure AD nhà cung cấp B2C (xem trước)
Định cấu hình Azure AD nhà cung cấp B2C theo cách thủ công
Tùy chỉnh giao diện người dùng bằng các mẫu HTML trong Azure AD B2C

Lưu ý

Bạn có thể cho chúng tôi biết bạn thích dùng ngôn ngữ nào cho tài liệu không? Làm một cuộc khảo sát ngắn. (xin lưu ý, khảo sát này bằng tiếng Anh)

Cuộc khảo sát sẽ mất khoảng bảy phút. Không có dữ liệu cá nhân nào được thu thập (điều khoản về quyền riêng tư).

Chia sẻ qua

Tùy chỉnh giao diện người dùng Azure AD B2C cho cổng thông tin

Điều kiện tiên quyết

Bước 1: Tạo mẫu web

Bước 2: Tạo mẫu trang

Bước 3: Tạo trang web

Bước 4: Tạo thiết đặt site

Bước 5: Cấu hình Azure

Xem thêm

Phản hồi

Tài nguyên bổ sung