ADB2C首次登录重置密码场景下如何自定义页面布局添加图片

你可以通过修改Azure AD B2C自定义策略的页面自定义配置完成需求，操作步骤如下：

步骤1：定位目标页面对应的内容定义 #

你使用的首次登录强制密码重置流程，涉及的密码重置页面对应的内容定义ID为api.localaccountpasswordreset，你可以在自定义策略的基础策略文件或扩展策略文件中找到对应的<ContentDefinition>节点。

步骤2：选择自定义修改方式 #

你可以任选以下两种方式调整页面展示：

方式一：修改自定义HTML模板

如果当前你已经在使用自定义HTML模板托管页面布局：

• 打开你托管的HTML模板文件，用浏览器F12开发者工具定位灰色方块对应的DOM元素ID/类名
• 在该DOM节点内插入你需要的图片标签，示例：

<img src="你的自定义图片公网地址" alt="自定义展示图" style="width: 100%; height: auto;">

• 保存更新后的HTML模板即可。

如果还未使用自定义模板，你可以下载官方默认页面模板，修改后托管到公网可访问的存储服务中，再将<ContentDefinition>节点下的LoadUri属性修改为你的模板托管地址。

方式二：通过自定义CSS注入背景图

不需要修改HTML结构的前提下，你可以通过CSS覆盖样式实现：

• 用F12开发者工具获取灰色方块对应的元素选择器，示例选择器如#brandingBanner、.leftPanel等
• 在你自定义的CSS文件中添加如下样式：

/* 替换为你实际查到的元素选择器 */
.leftPanel {
    background: url("你的自定义图片公网地址") no-repeat center center;
    background-size: cover;
}

• 将CSS文件托管到公网可访问的存储服务，在<ContentDefinition>节点下的CustomCssUri属性填写你的CSS文件托管地址即可。

注意事项 #

• 所有托管的HTML、CSS、图片资源都需要配置CORS规则，允许https://*.b2clogin.com域名的跨域请求，否则资源无法正常加载
• 所有资源地址必须使用HTTPS协议
• 修改策略文件后重新上传到Azure AD B2C生效，建议修改前备份原有策略配置

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