如何在Azure AD B2C自定义HTML页面的Next按钮点击时添加加载动画？

完全可以通过JavaScript监听“Next”按钮的点击事件，实现禁用按钮或显示加载动画的效果，避免用户重复操作，以下是具体实现方案：

1. 核心实现逻辑 #

Azure AD B2C允许在自定义HTML页面中注入自定义JavaScript代码，我们可以通过监听提交按钮的点击事件，在事件触发后立即修改按钮状态或显示加载动画，直到B2C完成流程跳转。

2. 针对unified.html和selfAsserted.html的具体代码 #

方法一：直接监听静态渲染的按钮 #

如果按钮是页面加载时直接渲染的，可在自定义HTML的<script>标签中添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 根据实际页面DOM结构调整按钮选择器，可通过浏览器开发者工具查看元素属性
  const submitButton = document.querySelector('input[type="submit"], #continueButton, .next-button');
  
  if (submitButton) {
    submitButton.addEventListener('click', function() {
      // 禁用按钮，阻止重复点击
      submitButton.disabled = true;
      // 修改按钮文本为加载状态提示
      submitButton.value = '处理中...';
      
      // 可选：添加加载动画
      const loader = document.createElement('span');
      loader.style.cssText = 'display: inline-block; margin-left: 8px; width: 16px; height: 16px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;';
      submitButton.parentNode.appendChild(loader);
      
      // 注入动画所需的CSS
      const style = document.createElement('style');
      style.textContent = '@keyframes spin { to { transform: rotate(360deg); } }';
      document.head.appendChild(style);
    });
  }
});

方法二：处理动态加载的按钮 #

如果按钮是B2C动态渲染生成的（比如unified.html的部分场景），可使用MutationObserver监听元素出现：

// 监听页面核心容器，根据实际页面调整选择器
const targetContainer = document.querySelector('.api-container, #api');
const observerConfig = { childList: true, subtree: true };

const observerCallback = function(mutations) {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length > 0) {
      const submitButton = document.querySelector('input[type="submit"], #continueButton, .next-button');
      // 避免重复绑定监听事件
      if (submitButton && !submitButton.dataset.listenerAttached) {
        submitButton.addEventListener('click', function() {
          submitButton.disabled = true;
          submitButton.value = '处理中...';
          // 加载动画逻辑可复用方法一中的代码
        });
        submitButton.dataset.listenerAttached = 'true';
      }
    }
  });
};

const observer = new MutationObserver(observerCallback);
observer.observe(targetContainer, observerConfig);

3. 注意事项 #

• 确保自定义HTML页面已在Azure AD B2C策略中正确配置，允许注入自定义JavaScript。
• 需根据实际页面的DOM结构调整按钮选择器，不同模板的按钮ID或类名可能存在差异。
• 加载动画的样式可根据品牌风格自定义，上述代码仅为基础示例。

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