ปรับแต่งส่วนติดต่อผู้ใช้ Azure AD B2C สำหรับพอร์ทัล

  • บทความ

หมายเหตุ

  • พอร์ทัล Power Apps คือ Power Pages โดยมีผลในเดือนตุลาคม 2022
  • หัวข้อนี้นำไปใช้ได้กับความสามารถเดิม หากต้องการดูข้อมูลล่าสุด โปรดไปที่ คู่มือ Microsoft Power Pages

Azure AD B2C รองรับการปรับแต่งส่วนติดต่อผู้ใช้สำหรับประสบการณ์การลงทะเบียนและลงชื่อเข้าใช้ ด้วยคุณสมบัตินี้ คุณสามารถกำหนดค่าผู้เช่า Azure AD B2C ที่มีหน้าการสมัครและลงชื่อเข้าใช้แบบกำหนดเองที่สร้างขึ้นภายในพอร์ทัลของคุณ ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับวิธีการสร้างและกำหนดค่าหน้าเว็บสมัคร/ลงชื่อเข้าใช้แบบกำหนดเองด้วย HTML ตัวอย่างในพอร์ทัลเพื่อใช้กับการรับรองความถูกต้อง Azure AD B2C

หมายเหตุ

คำแนะนำเหล่านี้ยังช่วยให้คุณกำหนดค่าส่วนติดต่อผู้ใช้ Azure AD B2C สำหรับไซต์ Power Pages อีกด้วย ข้อมูลเพิ่มเติม: Power Pages คืออะไร

ข้อกำหนดเบื้องต้น

ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณได้กำหนดค่าการรับรองความถูกต้อง Azure AD B2C สำหรับพอร์ทัลของคุณด้วยขั้นตอน อัตโนมัติ หรือ คู่มือ คุณจะต้องใช้การกำหนดค่า Azure AD B2C นี้เพื่อปรับแต่งส่วนติดต่อผู้ใช้สำหรับพอร์ทัลโดยทำตามขั้นตอนด้านล่าง

ขั้นตอนที่ 1: สร้างเทมเพลตเว็บ

  1. เปิดแอป การจัดการพอร์ทัล

  2. จากบานหน้าต่างด้านซ้าย ภายใต้ เนื้อหา เลือก เทมเพลตเว็บ

  3. เลือก สร้าง

  4. ป้อน ชื่อ เช่น หน้าแบบกำหนดเอง Azure AD B2C

  5. สำหรับ เว็บไซต์ เลือกเว็บไซต์พอร์ทัลของคุณ

  6. สำหรับ ต้นทาง คัดลอกและวาง 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. เลือก ชนิด เป็น เทมเพลตเว็บ

  6. สำหรับ เทมเพลตเว็บ เลือกเทมเพลตเว็บที่คุณสร้างก่อนหน้านี้ใน ขั้นตอน 1

  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
หมายเหตุ: คุณสามารถรับค่านี้ได้โดยการคัดลอกส่วนชื่อโดเมนของ 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. จากส่วนตรงกลางด้านขวาของหน้าจอ ให้เลือก การตั้งค่า Azure Active Directory B2C สำหรับผู้เช่า B2C
    การดำเนินการนี้จะเปิดผู้เช่า B2C ในแท็บเบราว์เซอร์ที่แยกต่างหาก

  7. ในแท็บเบราว์เซอร์ผู้เช่า B2C ภายใต้ นโยบาย ในบานหน้าต่างด้านซ้าย เลือก โฟลว์ของผู้ใช้

  8. เลือกโฟลว์ของผู้ใช้ที่คุณสร้างขึ้นสำหรับพอร์ทัล ตัวอย่างเช่น: B2C_1_Contoso

  9. จากบานหน้าต่างด้านซ้าย ภายใต้ ปรับแต่ง เลือก เค้าโครงหน้า

  10. ภายใต้ หน้าลงทะเบียนหรือเข้าสู่ระบบแบบรวม เลือก ใช่ สำหรับ ใช้เนื้อหาของหน้าที่กำหนดเอง

  11. สำหรับ 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 (ตัวอย่าง)
กำหนดค่าผู้ให้บริการ Azure AD B2C ด้วยตนเอง
ปรับแต่งส่วนติดต่อผู้ใช้ด้วยเทมเพลต HTML ใน Azure AD B2C

หมายเหตุ

บอกให้เราทราบเกี่ยวกับภาษาที่คุณต้องการในคู่มือ ทำแบบสำรวจสั้นๆ (โปรดทราบว่าแบบสำรวจนี้เป็นภาษาอังกฤษ)

แบบสำรวจนี้ใช้เวลาทำประมาณเจ็ดนาที ไม่มีการเก็บข้อมูลส่วนบุคคล (คำชี้แจงสิทธิ์ส่วนบุคคล)