自定义门户的 Azure AD B2C 用户界面
备注
- 从 2022 年 10 月起,Power Apps 门户更名为 Power Pages。
- 此主题适用于旧版功能。 有关最新信息,请转到 Microsoft Power Pages 文档。
Azure AD B2C 支持针对注册和登录体验的用户界面自定义。 使用此功能,可以使用在门户内创建的自定义注册和登录页面配置 Azure AD B2C 租户。 在本文中,您将学习如何在门户中使用示例 HTML 创建和配置自定义注册/登录网页,来用于 Azure AD B2C 身份验证。
备注
这些说明还允许您配置 Power Pages 站点的 Azure AD B2C 用户界面。 详细信息:什么是 Power Pages。
先决条件
在开始之前,请确保已使用自动或手动步骤为门户配置了 Azure AD B2C 身份验证。 您需要按照以下步骤使用此 Azure AD B2C 配置自定义门户的用户界面。
步骤 1:创建 Web 模板
打开门户管理应用。
在左窗格中的内容下,选择 Web 模板。
选择新建。
输入名称,如 Azure AD B2C 自定义页。
对于网站,选择您的门户网站。
对于源,复制并粘贴以下示例 Web 模板源 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 自定义页。
对于网站,选择您的门户网站。
类型选择 Web 模板。
对于 Web 模板,选择在步骤 1 中创建的 Web 模板。
取消选中使用网站页眉和页脚。
选择保存并关闭。
步骤 3:创建网页
在左窗格中的内容下,选择网页。
选择新建。
输入名称,如登录。
对于网站,选择您的门户网站。
对于父页,请选择主页。
为网页输入部分 URL,如
azure-ad-b2c-sign-in
。对于页面模板,选择在步骤 2 中创建的页面模板。
对于发布状态,请选择已发布。
选择保存并关闭。
步骤 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 。 |
要创建站点设置:
在左窗格中的网站下,选择站点设置。
选择新建。
输入上表中列出的名称。
对于网站,选择您的门户网站。
输入上表中列出的值。
选择保存并关闭。
有关其他 CORS 设置的完整列表,请参阅 CORS 协议支持。
步骤 5:Azure 配置
登录到 Azure 门户。
在 Azure 门户的左上角,选择 。
选择所有资源。
选择您的 B2C 租户。
如果尚未选择,请从左窗格中选择概览。
在屏幕的右中间部分,为 B2C 租户选择 Azure Active Directory B2C 设置。
此操作将在单独的浏览器标签页中打开 B2C 租户。在 B2C 租户浏览器标签页中,在左窗格中的策略下,选择用户流。
选择您为门户创建的用户流。 例如,
B2C_1_Contoso
。在左窗格中的自定义下,选择页面布局。
在统一注册或登录页下,为使用自定义页面内容选择是。
对于自定义页面 URI,输入您在步骤 3 中创建的门户的自定义网页的完整 URL。
例如,对于门户lhttps://contoso.powerappsportals.com
中名为azure-ad-b2c-sign-in
的页面,请将自定义页面 URI 用作https://contoso.powerappsportals.com/azure-ad-b2c-sign-in
。
现在,您的 Azure AD B2C 租户已配置为使用自定义页面提供注册和登录体验。
另请参阅
配置 Azure AD B2C 提供者(预览)
手动配置 Azure AD B2C 提供者
使用 Azure AD B2C 中的 HTML 模板自定义用户界面