Azure B2C无法加载存储账户中HTML文件脚本问题排查

脚本未加载的核心原因 #

• B2C页面渲染机制限制：Ocean Blue模板的#api容器是B2C动态注入认证逻辑的核心区域，直接用$(document).ready绑定的脚本会在B2C注入页面内容前执行，导致无法触发；同时B2C的默认渲染逻辑可能会覆盖或忽略模板中直接添加的脚本。
• 存储账户CORS配置缺失：如果模板文件存在Azure存储账户，未配置允许B2C租户域名的CORS规则，浏览器会因跨域拦截脚本加载。
• 模板版本不兼容：旧版Ocean Blue模板可能不支持自定义脚本注入，需确认使用的是B2C官方维护的最新兼容版本。

修复脚本加载的具体步骤 #

1. 修改脚本绑定逻辑
   放弃$(document).ready，改为监听B2C页面动态内容的加载事件，确保脚本在Change-email界面渲染后执行：

<script>
"use strict";
document.addEventListener('DOMContentLoaded', function() {
    // 监听#api容器内的内容变化，确保捕获到Change-email界面
    const apiContainer = document.getElementById('api');
    const observer = new MutationObserver((mutations) => {
        const changeEmailBtn = document.querySelector('.changeEmail');
        if (changeEmailBtn) {
            console.log("Script Load Successful!");
            // 此处添加跳过Change-email页面的逻辑，比如自动触发下一步或隐藏整个区域
            observer.disconnect();
        }
    });
    observer.observe(apiContainer, { childList: true, subtree: true });
});
</script>

2. 配置存储账户CORS规则
   • 进入Azure存储账户的「CORS设置」
   • 添加来源：https://你的租户域名.b2clogin.com
   • 允许方法勾选GET，允许头包含Content-Type
3. 确认模板绑定流程
   确保模板文件通过B2C门户的「自定义页面模板」功能上传，并在对应的User Flow中指定使用该自定义模板，而非直接替换默认模板文件。

移除Change-email页面的替代方案 #

若脚本方式仍有问题，可通过自定义策略彻底移除该步骤：

• 打开自定义策略的XML文件，找到UserJourney节点下包含ChangeEmail操作的OrchestrationStep
• 删除该步骤，并调整后续步骤的序号，确保密码重置流程直接进入验证或重置环节

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