Προσαρμογή του περιβάλλοντος εργασίας χρήστη στο Azure AD B2C για πύλες

Σημείωση

  • Από Οκτώβριο 2022, οι πύλες του Power Apps είναι Power Pages.
  • Αυτό το θέμα ισχύει για τις δυνατότητες παλαιού τύπου. Για πιο πρόσφατες πληροφορίες, μεταβείτε στην τεκμηρίωση 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: Δημιουργία προτύπου web

  1. Ανοίξτε την εφαρμογή Διαχείριση πύλης.

  2. Από το αριστερό τμήμα παραθύρου, στην περιοχή Περιεχόμενο, επιλέξτε Πρότυπα Web.

  3. Επιλέξτε Νέα.

  4. Πληκτρολογήστε Όνομα, όπως Προσαρμοσμένη σελίδα Azure AD B2C.

  5. Για την Τοποθεσία Web, επιλέξτε την τοποθεσία Web της πύλης σας.

  6. Για την Προέλευση, αντιγράψτε και επικολλήστε το ακόλουθο HTML προέλευσης δείγματος προτύπου web.

    <!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. Από το αριστερό τμήμα παραθύρου, στην περιοχή Τοποθεσία Web, επιλέξτε Πρότυπα σελίδας.

  2. Επιλέξτε Νέα.

  3. Πληκτρολογήστε Όνομα, όπως Προσαρμοσμένη σελίδα Azure AD B2C.

  4. Για την Τοποθεσία Web, επιλέξτε την τοποθεσία Web της πύλης σας.

  5. Επιλέξτε τον Τύπο ως Πρότυπο Web.

  6. Για το Πρότυπο Web, επιλέξτε το πρότυπο web που δημιουργήσατε νωρίτερα στο βήμα 1.

  7. Καταργήστε την επιλογή Χρήση κεφαλίδας και υποσέλιδου τοποθεσίας Web.

  8. Επιλέξτε Αποθήκευση και κλείσιμο.

Βήμα 3: Δημιουργία ιστοσελίδας

  1. Από το αριστερό τμήμα παραθύρου, στην περιοχή Περιεχόμενο, επιλέξτε Σελίδες Web.

  2. Επιλέξτε Νέα.

  3. Πληκτρολογήστε Όνομα, όπως Σύνδεση.

  4. Για την Τοποθεσία Web, επιλέξτε την τοποθεσία Web της πύλης σας.

  5. Για τη Γονική σελίδα επιλέξτε Αρχική σελίδα.

  6. Πληκτρολογήστε τη Μερική διεύθυνση URL για την ιστοσελίδα, όπως azure-ad-b2c-sign-in.

  7. Για το Πρότυπο σελίδας, επιλέξτε το πρότυπο σελίδας που δημιουργήσατε νωρίτερα στο βήμα 2.

  8. Για την Κατάσταση δημοσίευσης επιλέξτε Δημοσιεύτηκε.

  9. Επιλέξτε Αποθήκευση και κλείσιμο.

Βήμα 4: Δημιουργία ρυθμίσεων τοποθεσίας

Απαιτούνται ρυθμίσεις τοποθεσίας για να ρυθμίσετε τις παραμέτρους της κοινής χρήσης πόρων μεταξύ προελεύσεων (Cross Origin Resource Sharing - 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. Από το αριστερό τμήμα παραθύρου, στην περιοχή Τοποθεσία Web, επιλέξτε Ρυθμίσεις τοποθεσίας.

  2. Επιλέξτε Νέα.

  3. Εισαγάγετε το Όνομα όπως παρατίθεται στον παραπάνω πίνακα.

  4. Για την Τοποθεσία Web, επιλέξτε την τοποθεσία Web της πύλης σας.

  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

Σημείωση

Μπορείτε να μας πείτε ποια γλώσσα προτιμάτε για την τεκμηρίωση; Πάρτε μέρος σε μια σύντομη έρευνα. (σημειώνεται ότι αυτή η έρευνα είναι στα Αγγλικά)

Η έρευνα θα διαρκέσει περίπου επτά λεπτά. Δεν συλλέγονται προσωπικά δεδομένα (δήλωση προστασίας προσωπικών δεδομένων).