Question

我想自定义使用Azure AD B2C创建的默认注册页面。我也提到了相关的azure文档。但目前还不是很清楚。

是否有任何文件包含我可以参考的所有步骤以实现此目的。

提前致谢

Answer 1

Azure AD B2C的文档可能会让人感到困惑，因为他们对Azure的新用户和/或OpenIdConnect的新用户感到困惑，但这就是你现在所能得到的......现在。

（感谢@SergeyBrazhnik发表的评论，提醒我添加此内容，并抱歉忘记此事。）

请注意，“登录”政策不允许模板自定义;您只能使用Azure门户网站UI中的公司品牌来自定义“登录”策略。当我不得不实施仅登录页面时，我使用了注册或登录策略并使用CSS来隐藏注册链接。这很愚蠢，但顾客想要她想要的东西。

以下是您为做支持模板的政策需要执行的操作的基本摘要：

首先创建模板。

它真的很简单如下：

<!DOCTYPE html/>
<html>
  <body>
    <h1>It worked!</h1>
    <div id="api"></div>
  </body>
</html>

说真的，这就是模板所需要的一切。这是一个相当乏味和无聊的模板，可能不是非常用户友好，但你可以添加自己的CSS和/或MS在默认模板中使用的特殊CSS。我建议你自己使用。

请记住不要包含任何JavaScript。

如果你需要动态模板，那么你将不得不使用像ASP.NET这样的服务器端模板结构（或者Thymeleaf，JSPX，或者其他适合你的Java人员被迫使用它：D）。

不要在“api”div中添加任何内容。保持完全空白，不要自我关闭（即没有“/＆gt;”）。

最后，确保模板可用而无需任何类型的身份验证。

配置您的策略，以便它使用该模板。

假设您正在配置注册或登录策略，请转到“Azure AD B2C - ＆gt;策略 - ＆gt;注册或登录策略 - ＆gt;您的策略 - ＆gt;编辑”打开“编辑政策”面板。

打开“页面UI自定义”面板（对我来说，从底部开始的第二个选项）。

在其中的每个部分中，将“使用自定义页面”切换选项设置为“是”，并将完整的uri添加到“自定义页面URI”文本框中。

在开发/测试（以及生产）期间，如果服务器位于封闭/安全的网络上，则不需要允许对服务器进行任何特殊的Azure访问; B2C使用JavaScript和CORS来拉取模板并填充它们，所以你/你的浏览器真的在做填充模板的工作。但是，您需要为服务模板的端点启用CORS，您将需要运行浏览器的任何一个框才能访问Internet。

DONE！

如果您对此有任何疑问，请告诉我，我会修改我的答案以澄清任何事情。

Answer 2

为了确保您的B2C自定义工作，您需要处理以下事项：

确保您的内容符合HTML5并且可以访问在本回答中，Pytry提到的代码非常简单。
确保为CORS启用了内容服务器。链接：How can I set CORS in Azure BLOB Storage in Portal?
（非常重要）通过HTTPS投放内容。
（可选）对所有链接和CSS内容使用绝对URL，例如https://yourdomain/content。

提示：要验证您托管内容的网站是否已启用CORS并测试CORS请求，您可以使用网站http://test-cors.org/。多亏了这个站点，您可以简单地将CORS请求发送到远程服务器（以测试是否支持CORS），或者将CORS请求发送到测试服务器（以探索CORS的某些功能）。

参考链接：https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-customize-ui-custom

Azure AD B2C UI自定义

2 个答案: