Azure AD B2C उपयोगकर्ता इंटरफ़ेस पोर्टल के लिए अनुकूलित करें

आलेख
01/08/2024

नोट

अक्टूबर 2022 से प्रभावी, Power Apps पोर्टल Power Pages है.
यह विषय लीगेसी क्षमताओं पर लागू होता है. नवीनतम जानकारी के लिए, Microsoft Power Pages दस्तावेज़ीकरण पर जाएँ.

Azure AD B2C साइनअप और साइन-इन अनुभव के लिए उपयोगकर्ता इंटरफ़ेस अनुकूलन का समर्थन करता है। इस सुविधा के साथ, आप Azure AD B2C टेनेंट को अपने पोर्टल के अंदर बनाए गए कस्टम साइन-अप और साइन-इन पेज से कॉन्फ़िगर कर सकते हैं. इस लेख में, आप Azure AD B2C प्रमाणीकरण के साथ उपयोग के लिए पोर्टल्स में नमूना HTML के साथ एक कस्टम साइन-अप/साइन-इन वेब पेज को कॉन्फ़िगर करने के तरीके के बारे में जानेंगे.

नोट

ये निर्देश आपको Power Pages साइट्स के लिए Azure AD B2C यूजर इंटरफ़ेस कॉन्फ़िगर करने देते हैं. अधिक जानकारी: 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) को कॉन्फ़िगर करने के लिए होती है, ताकि Azure AD B2C द्वारा कस्टम पृष्ठ का अनुरोध किया जा सके और वह साइन-इन या साइन-अप उपयोगकर्ता इंटरफ़ेस शामिल कर सके। निम्न साइट सेटिंग बनाएँ.

नाम मान

HTTP/पहुंच-नियंत्रण-अनुमति दें-विधियाँ GET, OPTIONS

HTTP/पहुंच-नियंत्रण-अनुमति दें-मूल https://tenant-name.b2clogin.com
उदाहरण के लिए, यदि टेनेंट का नाम ContosoOrg है, तो https://contosoorg.b2clogin.com दर्ज करें.
नोट: आप यह मान जारीकर्ता URL के डोमेन नाम के भाग को कॉपी करके प्राप्त कर सकते हैं. सुनिश्चित करें कि आप जारीकर्ता URL मान के गैर-डोमेन भाग को छोड़ते हैं—उदाहरण के लिए, छोड़ें—/tfp/799f7b50-f7b9-49ec-ba78-67eb67210998/b2c_1_contoso/v2.0.

नाम	मान
HTTP/पहुंच-नियंत्रण-अनुमति दें-विधियाँ	`GET, OPTIONS`
HTTP/पहुंच-नियंत्रण-अनुमति दें-मूल	`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 टेनेंट का चयन करें.
यदि पहले से नहीं है, तो बाएं फलक से अवलोकन चुनें.
स्क्रीन के दाएँ मध्य भाग से, B2C टेनेंट के लिए Azure Active Directory B2C सेटिंग्स का चयन करें.
यह कार्रवाई B2C टेनेंट को एक अलग ब्राउज़र टैब में खोलती है.
B2C टेनेंट ब्राउज़र टैब में, बाएं फलक में नीतियां के अंतर्गत, यूज़र प्रवाह का चयन करें.
आपके द्वारा पोर्टल्स के लिए बनाए गए यूज़र प्रवाह का चयन करें. उदाहरण के लिए, B2C_1_Contoso.
बाएं फलक से, कस्टमाइज़ के अंतर्गत, पेज लेआउट का चयन करें.
एकीकृत साइन अप या साइन इन पेज के अंतर्गत, कस्टम पेज सामग्री का उपयोग करें के लिए हां का चयन करें.
कस्टम पेज URI के लिए, अपने पोर्टल के उस कस्टम वेबपेज का पूरा URL डालें, जिसे आपने चरण 3 में बनाया था.
उदाहरण के लिए, पोर्टल https://contoso.powerappsportals.com में azure-ad-b2c-sign-in नाम के पेज के लिए, कस्टम पेज URI को https://contoso.powerappsportals.com/azure-ad-b2c-sign-in के रूप में उपयोग करें.

आपका Azure AD B2C टेनेंट अब साइन-अप और साइन-इन अनुभव के लिए कस्टम पेज का उपयोग करने के लिए कॉन्फ़िगर किया गया है.

इसे भी देखें

B2C प्रदाता को कॉन्फ़िगर करें (पूर्वावलोकन) Azure AD
B2C प्रदाता को मैन्युअल रूप से कॉन्फ़िगर करें Azure AD
Azure AD B2C में HTML टेम्प्लेट के साथ उपयोगकर्ता इंटरफ़ेस को अनुकूलित करें

नोट

क्या आप हमें अपनी दस्तावेज़ीकरण भाषा वरीयताओं के बारे में बता सकते हैं? एक छोटा सर्वेक्षण पूरा करें. (कृपया ध्यान दें कि यह सर्वेक्षण अंग्रेज़ी में है)

सर्वेक्षण में लगभग सात मिनट लगेंगे. कोई भी व्यक्तिगत डेटा एकत्र नहीं किया जाता है (गोपनीयता कथन).

इसके माध्यम से साझा किया गया