在 Azure Active Directory b2c 中为自定义策略自定义 UI答案

【问题标题】：Customise UI in azure active directory b2c for custom policies在 Azure Active Directory b2c 中为自定义策略自定义 UI
【发布时间】：2021-05-07 10:27:03
【问题描述】：

我正在尝试自定义 azure b2c 登录页面的 UI。在登录表单中，我想将输入字段的占位符的值以及登录按钮的文本值从“登录”更改为“登录”。

我已更改自定义策略中标记为“DisplayName”的字段标记中的值，但占位符的输入值保持不变。

我已通过将自定义策略标记“DisplayName”从“Contoso”更新为“Test Button”来更改自定义策略中的按钮文本。我怎样才能为登录表单做同样的事情？

        <DisplayName>Email Address</DisplayName>
        <DataType>string</DataType>
        <UserHelpText>Email address to use for signing in.</UserHelpText>
        <UserInputType>TextBox</UserInputType>

【问题讨论】：

标签： azure azure-ad-b2c azure-ad-b2c-custom-policy

【解决方案1】：

Microsoft 提供了在门户本身中自定义横幅和其他文本和对齐方式的选项，但如果您想完全更改 html 登录代码本身。按照此文档获取您的自定义 html：

1. Create your html page and store in azure blob  storage 

2. Configure cors 

3. Update user flow

4. Test user flow

5. Change the banner and logo images

https://docs.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-user-flow

【讨论】：

我正在使用自定义策略，我想更改登录表单的 html 输入标签和按钮的预定义值。我已经通过了这个文档。 docs.microsoft.com/en-us/azure/active-directory-b2c/…

【解决方案2】：

您可能想查看文档的本地化部分：

https://docs.microsoft.com/en-us/azure/active-directory-b2c/localization

Lozalization 允许您为各种语言环境设置自己的内容版本——ClaimType（如电子邮件）和其他 UI 元素（如按钮）都可以通过使用正确的字符串 ID 进行更改。您还可以在文档中找到您感兴趣的字符串 ID 列表：

https://docs.microsoft.com/en-us/azure/active-directory-b2c/localization-string-ids

如果您不打算使用多个本地化，您也可以为各自的技术配置文件使用元数据条目，如下所示：

<Metadata>
   <Item Key="language.button_signin">Log in</Item>
</Metadata>

【讨论】：

【解决方案3】：

该策略应始终用于控制文本、标签、错误消息...最好通过本地化处理。例如：

     <LocalizedResources Id="api.localaccountsignup.en">
        <LocalizedStrings>
          <LocalizedString ElementType="UxElement" StringId="button_continue">Login In</LocalizedString>
        </LocalizedStrings>
     </LocalizedResources>

有关如何add localization，请参阅 Microsoft 文档。

要查找页面上要更改的元素的字符串 ID，请打开浏览器控制台窗口并执行 window.CONTENT;

这个来自微软的custom advanced policy 对本地化的实现非常彻底，是一个很好的参考。

【讨论】：