แชร์ผ่าน

กำหนดส่วนติดต่อผู้ใช้ Azure AD B2C สำหรับ Power Pages

  • บทความ

Azure AD B2C รองรับการปรับแต่งส่วนติดต่อผู้ใช้สำหรับประสบการณ์การลงทะเบียนและลงชื่อเข้าใช้ ด้วยคุณสมบัตินี้ คุณสามารถกำหนดค่าผู้เช่า Azure AD B2C ที่มีหน้าการสมัครและลงชื่อเข้าใช้แบบกำหนดเองที่สร้างขึ้นภายในเว็บไซต์ของคุณ ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับวิธีการสร้างและกำหนดค่าหน้าเว็บสมัคร/ลงชื่อเข้าใช้แบบกำหนดเองด้วย HTML ตัวอย่างในเว็บไซต์ของคุณเพื่อใช้กับการรับรองความถูกต้อง 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/aaaabbbb-0000-cccc-1111-dddd2222eeee/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

    การดำเนินการนี้จะเปิดผู้เช่า B2C ในแท็บเบราว์เซอร์ที่แยกต่างหาก

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

  8. เลือกโฟลว์ของผู้ใช้ที่คุณสร้างขึ้นสำหรับ Power Pages ตัวอย่างเช่น: 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 ของคุณได้รับการกำหนดค่าให้ใช้หน้าแบบกำหนดเองสำหรับการสมัครและลงชื่อเข้าใช้

ดูเพิ่มเติม