共用方式為


自訂入口網站的 Azure AD B2C 使用者介面

注意

  • 自 2022 年 10 月起生效,Power Apps 入口網站已由 Power Pages 取代。
  • 本主題適用於舊版功能。 如需最新資訊,請移至 Microsoft Power Pages 文件

Azure AD B2C 支援自訂使用者介面,以提供註冊和登入體驗。 使用此功能,即可使用在入口網站內建立的自訂註冊和登入頁面來設定 Azure AD B2C 租用戶。 在本文中,您將了解如何在入口網站中使用範例 HTML 建立和設定自訂註冊/登入網頁,以與 Azure AD B2C 驗證一起使用。

注意

這些指示也可讓您為 Power Pages 網站設定 Azure AD B2C 使用者介面。 更多資訊:何謂 Power Pages?

先決條件

在開始之前,請確定已使用自動手動步驟,為入口網站設定 Azure AD B2C 驗證。 您需要按照以下步驟,使用此 Azure AD B2C 設定自訂入口網站的使用者界面。

步驟 1:建立 Web 範本

  1. 開啟入口網站管理應用程式。

  2. 在左側窗格的內容下,選取 Web 範本

  3. 選取新增

  4. 輸入名稱,例如Azure AD B2C 自訂頁面

  5. 如果是網站,請選取您的入口網站。

  6. 如果是來源,請複製並貼上以下範例 Web 範本來源 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>
    
  7. 選取儲存後關閉

步驟 2:建立頁面範本

  1. 在左側窗格的網站下,選取頁面範本

  2. 選取新增

  3. 輸入名稱,例如Azure AD B2C 自訂頁面

  4. 如果是網站,請選取您的入口網站。

  5. 選取類型Web 範本

  6. 如果是 Web 範本,請選取您在步驟 1 中建立的 Web 範本。

  7. 解除鎖定使用網站頁首與頁尾

  8. 選取儲存後關閉

步驟 3:建立網頁

  1. 在左側窗格的內容下,選取 網頁

  2. 選取新增

  3. 輸入名稱,例如登入

  4. 如果是網站,請選取您的入口網站。

  5. 上層頁面,選取首頁

  6. 為網頁輸入部分 URL,例如 azure-ad-b2c-sign-in

  7. 如果是頁面範本,請選取您在步驟 2 中建立的頁面範本。

  8. 發佈狀態,選取已發佈

  9. 選取儲存後關閉

步驟 4:建立網站設定

需要以網站設定配置跨原始來源資源共用 (CORS),才可讓 Azure AD B2C 要求自訂頁面並插入登入或註冊使用者介面。 建立下列網站設定。

名字
/HTTP/Access-Control-Allow-Methods GET, OPTIONS
HTTP/Access-Control-Allow-Origin https://tenant-name.b2clogin.com
例如,如果租用戶名稱為 ContosoOrg,則輸入 https://contosoorg.b2clogin.com
請注意:您可以透過複製 Issuer URL 的網域名稱部分來取得此值。 請確定排除發行者 URL 值的非網域部分—例如,排除 —/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0

若要建立網站設定:

  1. 在左側窗格的網站下,選取網站設定

  2. 選取新增

  3. 輸入上表中列出的名稱

  4. 如果是網站,請選取您的入口網站。

  5. 輸入上表中列出的

  6. 選取儲存後關閉

如需其他 CORS 設定的完整清單,請參閱 CORS 通訊協定支援

步驟 5:Azure 設定

  1. 登入 Azure 入口網站。

  2. 從 Azure 入口網站的左上角,選取顯示入口網站功能表。

  3. 選取所有資源

  4. 選取您的 B2C 租用戶。

  5. 如果尚未選擇,請從左側窗格中選取概觀

  6. 在畫面右方的中間區塊,為 B2C 租用戶選擇 Azure Active Directory B2C 設定
    此動作將在獨立的瀏覽器索引標籤中開啟 B2C 租用戶。

  7. 在 B2C 租用戶瀏覽器索引標籤左窗格中的原則下,選取使用者流程

  8. 選取您為入口網站建立的使用者流程。 例如:B2C_1_Contoso

  9. 在左側窗格的自訂下,選取頁面版面配置

  10. 整合註冊或登入頁面下,為使用者自訂頁面內容選取

  11. 如果是自訂頁面 URI,請輸入您在步驟 3 中建立的入口網站自訂網頁完整 URL。
    例如,對於入口網站 https://contoso.powerappsportals.com 中名為 azure-ad-b2c-sign-in 的頁面,請使用自訂頁面 URI 作為 https://contoso.powerappsportals.com/azure-ad-b2c-sign-in

現在,您的 Azure AD B2C 租用戶已設定為使用自訂頁面的註冊和登入體驗。

請參閱

設定 Azure AD B2C 提供者 (預覽版)
手動設定 Azure AD B2C 提供者
使用 Azure AD B2C 中的 HTML 範本自訂使用者介面

注意

是否能請您告知您偏好的慣用文件語言? 請填寫問卷。 (請注意,本問卷為英文版)

完成問卷大約需要七分鐘。 本問卷將不會收集個人資料 (隱私權聲明)。