Προσαρμογή της διασύνδεσης χρήστη Azure AD B2C για το Power Pages
Το Azure AD B2C υποστηρίζει την προσαρμογή του περιβάλλοντος εργασίας χρήστη για την εμπειρία εγγραφής και εισόδου. Με αυτήν τη δυνατότητα, μπορείτε να ρυθμίσετε τις παραμέτρους του μισθωτή Azure AD B2C με μια προσαρμοσμένη σελίδα εγγραφής και σύνδεσης που θα δημιουργηθεί μέσα στην τοποθεσία web σας. Σε αυτό το άρθρο, θα μάθετε πώς να δημιουργείτε και να ρυθμίζετε τις παραμέτρους μιας προσαρμοσμένης ιστοσελίδας εγγραφής/εισόδου με δείγμα HTML στην τοποθεσία web σας για χρήση με έλεγχο ταυτότητας Azure AD B2C.
Προϋποθέσεις
Προτού ξεκινήσετε, βεβαιωθείτε ότι έχετε ρυθμίσει τις παραμέτρους του ελέγχου ταυτότητας Azure AD B2C για την τοποθεσία web σας.
Βήμα 1: Δημιουργία προτύπου web
Ανοίξτε την εφαρμογή Διαχείριση πύλης.
Από το αριστερό τμήμα παραθύρου, στην περιοχή Περιεχόμενο, επιλέξτε Πρότυπα Web.
Επιλέξτε Νέα.
Πληκτρολογήστε Όνομα, όπως Προσαρμοσμένη σελίδα Azure AD B2C.
Για την Τοποθεσία Web, επιλέξτε την τοποθεσία web σας.
Για την Προέλευση, αντιγράψτε και επικολλήστε το ακόλουθο 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>Επιλέξτε Αποθήκευση και κλείσιμο.
Βήμα 2: Δημιουργία προτύπου σελίδας
Από το αριστερό τμήμα παραθύρου, στην περιοχή Τοποθεσία Web, επιλέξτε Πρότυπα σελίδας.
Επιλέξτε Νέα.
Πληκτρολογήστε Όνομα, όπως Προσαρμοσμένη σελίδα Azure AD B2C.
Για την Τοποθεσία Web, επιλέξτε την τοποθεσία web σας.
Επιλέξτε τον Τύπο ως Πρότυπο Web.
Για το Πρότυπο Web, επιλέξτε το πρότυπο web που δημιουργήσατε νωρίτερα στο βήμα 1.
Καταργήστε την επιλογή Χρήση κεφαλίδας και υποσέλιδου τοποθεσίας Web.
Επιλέξτε Αποθήκευση και κλείσιμο.
Βήμα 3: Δημιουργία ιστοσελίδας
Από το αριστερό τμήμα παραθύρου, στην περιοχή Περιεχόμενο, επιλέξτε Σελίδες Web.
Επιλέξτε Νέος.
Πληκτρολογήστε Όνομα, όπως Σύνδεση.
Για την Τοποθεσία Web, επιλέξτε την τοποθεσία web σας.
Για τη Γονική σελίδα επιλέξτε Αρχική σελίδα.
Πληκτρολογήστε τη Μερική διεύθυνση URL για την ιστοσελίδα, όπως
azure-ad-b2c-sign-in.Για το Πρότυπο σελίδας, επιλέξτε το πρότυπο σελίδας που δημιουργήσατε νωρίτερα στο βήμα 2.
Για την Κατάσταση δημοσίευσης επιλέξτε Δημοσιεύτηκε.
Επιλέξτε Αποθήκευση και κλείσιμο.
Βήμα 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/aaaabbbb-0000-cccc-1111-dddd2222eeee/b2c_1_contoso/v2.0. |
Για να δημιουργήσετε τις ρυθμίσεις της τοποθεσίας:
Από το αριστερό τμήμα παραθύρου, στην περιοχή Τοποθεσία Web, επιλέξτε Ρυθμίσεις τοποθεσίας.
Επιλέξτε Νέα.
Εισαγάγετε το Όνομα όπως παρατίθεται στον παραπάνω πίνακα.
Για την Τοποθεσία Web, επιλέξτε την τοποθεσία web σας.
Εισαγάγετε την Τιμή, όπως παρατίθεται στον παραπάνω πίνακα.
Επιλέξτε Αποθήκευση και κλείσιμο.
Για μια πλήρη λίστα των άλλων ρυθμίσεων CORS, ανατρέξτε στην ενότητα Υποστήριξη πρωτοκόλλου CORS.
Βήμα 5: Ρύθμιση παραμέτρων Azure
Είσοδος στην πύλη Azure.
Από την επάνω αριστερή γωνία της πύλης Azure, επιλέξτε
.Επιλέξτε Όλοι οι πόροι.
Επιλέξτε τον μισθωτή σας B2C.
Αν δεν το έχετε κάνει ήδη, επιλέξτε Επισκόπηση από το αριστερό τμήμα παραθύρου.
Στη δεξιά μεσαία ενότητα της οθόνης, επιλέξτε Άνοιγμα μισθωτή B2C.
Αυτή η ενέργεια ανοίγει τον μισθωτή B2C σε μια ξεχωριστή καρτέλα του προγράμματος περιήγησης.
Στην καρτέλα του προγράμματος περιήγησης μισθωτή B2C, στην περιοχή Πολιτικές στο αριστερό τμήμα παραθύρου, επιλέξτε Ροές χρήστη.
Επιλέξτε τη ροή χρήστη που δημιουργήσατε για το Power Pages. Για παράδειγμα,
B2C_1_Contoso.Από το αριστερό τμήμα παραθύρου, στην περιοχή Εξατομίκευση, επιλέξτε Διατάξεις σελίδας.
Στην περιοχή Ενοποιημένη σελίδα εγγραφής ή εισόδου, επιλέξτε Ναι για τη Χρήση προσαρμοσμένου περιεχομένου σελίδας.
Για το URI προσαρμοσμένης σελίδας, εισαγάγετε ολόκληρη την διεύθυνση URL της προσαρμοσμένης ιστοσελίδας της τοποθεσίας web σας που δημιουργήσατε στο βήμα 3.
Για παράδειγμα, για τη σελίδα που ονομάζεται
azure-ad-b2c-sign-inστην πύληhttps://contoso.powerappsportals.com, χρησιμοποιήστε το URI της προσαρμοσμένης σελίδας ωςhttps://contoso.powerappsportals.com/azure-ad-b2c-sign-in.
Ο μισθωτής Azure AD B2C έχει πλέον ρυθμιστεί ώστε να χρησιμοποιεί την προσαρμοσμένη σελίδα για την εμπειρία εγγραφής και σύνδεσης.