B2C自定义策略：如何访问元素以修改界面相关属性

当然可以，Azure AD B2C 自定义策略完全支持修改界面标签、控件样式、新增自定义内容，核心通过「内容定义」+ 自定义HTML/CSS的方式实现，具体操作如下：

核心实现逻辑 #

B2C 自定义策略的界面渲染采用托管内容注入机制，你可以在策略的ContentDefinitions节点中指定自己托管的静态HTML/CSS文件地址，B2C会自动把身份验证相关的表单控件注入到你自定义HTML中id="api"的指定占位节点内，占位节点外的区域、以及所有元素的样式都可以完全自主控制。

不同需求的对应实现方式 #

• 修改标签文本：直接在自定义策略的Localization本地化节点中，覆盖对应控件的默认字符串ID即可，不需要修改UI层代码，输入框提示、按钮文本、错误提示等所有内置文案都支持修改。
• 调整控件外观、颜色、字体：在你自己托管的CSS文件中重写B2C内置控件的类名样式即可，自定义样式优先级高于B2C默认样式，比如输入框对应.textBox类、提交按钮对应.button类，全局字体、页面背景色都可以直接在CSS中定义。
• 添加分割线、自定义文本、品牌标识等额外内容：直接写在你自定义的HTML文件中即可，只有id="api"的节点是B2C的控件注入区域，其余区域你可以自由添加<hr>分割线、说明文字、品牌Logo等各类自定义内容。

简单的自定义HTML示例 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义登录页</title>
    <style>
        /* 自定义全局字体 */
        body {
            font-family: "微软雅黑", sans-serif;
            background-color: #f5f7fa;
            max-width: 480px;
            margin: 60px auto;
        }
        /* 自定义输入框样式 */
        .textBox {
            width: 100%;
            border: 1px solid #0078d4;
            border-radius: 4px;
            padding: 10px 14px;
            box-sizing: border-box;
            margin: 8px 0;
        }
        /* 自定义提交按钮样式 */
        .button {
            background-color: #0078d4;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 14px;
            width: 100%;
            cursor: pointer;
        }
        /* 自定义分割线样式 */
        .custom-divider {
            margin: 24px 0;
            border-top: 1px solid #eaecef;
        }
    </style>
</head>
<body>
    <!-- 自定义内容区域 -->
    <h2>欢迎使用我们的服务</h2>
    <p>请输入账号信息完成登录</p>
    <div class="custom-divider"></div>
    <!-- B2C控件注入占位节点，不要修改id -->
    <div id="api"></div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Nicolas