简体   繁体   English

如何在Azure B2C租户中显示自定义的注册页面?

[英]How to display the customized signup page in Azure B2C tenant?

I prepared custom HTML pages for user sign up and multifactor authentication. 我准备了用于用户注册和多因素身份验证的自定义HTML页面。 Then uploaded those pages into Azure storage blob. 然后将这些页面上传到Azure存储Blob。

Next I edited signup policy of Azure B2C tenant for user signup page customization, and paste storage blob URL of custom html page what I uploaded earlier into storage blob. 接下来,我编辑了用于用户注册页面自定义的Azure B2C租户的注册策略,并将先前上传的自定义html页面的存储Blob URL粘贴到存储Blob中。

在此处输入图片说明

When I run the policy the browser will display the signup page like this below. 当我运行策略时,浏览器将显示如下的注册页面。 But I made signup page and MFA page very nice. 但是我使注册页面和MFA页面非常好。 And added CSS content inside my HTML pages only. 并且仅在我的HTML页面内添加了CSS内容。

在此处输入图片说明

How can I use customized signup or MFA pages instead of Azure B2C provided? 如何使用自定义的注册或MFA页面代替提供的Azure B2C?

As pointed out by Harsh Aseeja, your page is already rendering the customized page. 正如Harsh Aseeja指出的那样,您的页面已经在渲染自定义页面。 You need to check with the browser's dev tools to identify the css styling that took effect in your html elements. 您需要使用浏览器的开发工具进行检查,以识别在html元素中生效的css样式。 Since these elements are just injected in your page, check for element ids and its default css styling. 由于这些元素只是注入到您的页面中,因此请检查元素ID及其默认的CSS样式。 Chances are, if you used classes to style your page, those will be overwritten by a default style for element ids. 如果您使用类为页面设置样式,则可能会被元素ID的默认样式覆盖。

You can try editing the css styling on the fly with the dev tools, and when your satisfied with your changes port them to your css file(Or the css inside your HTML page) and update the relevant files in your azure storage blob. 您可以尝试使用开发工具动态编辑css样式,当对更改满意后,将其移植到css文件(或HTML页面内的css),并更新Azure存储Blob中的相关文件。

Seems like you are getting the customized HTML page instead of the generic Microsoft login page. 似乎您正在获取自定义HTML页面,而不是常规的Microsoft登录页面。 You can use the dev tools in your browser to tweak the CSS to get the desired UX you want. 您可以在浏览器中使用开发工具来调整CSS,以获取所需的UX。 Also you can add explicit CSS per input box or button to make sure that your CSS is being picked up and not being overridden by the CSS coming down from the Microsoft login page. 另外,您可以为每个输入框或按钮添加显式CSS,以确保您的CSS被拾取,并且不会被来自Microsoft登录页面的CSS覆盖。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM