如何在MSAL Angular注册流程中移除邮箱验证页的Continue按钮

MSAL Angular本身不直接控制Azure AD B2C注册流程的UI元素，这类页面的自定义需要通过Azure AD B2C自定义用户流页面模板来实现，具体步骤如下：

1. 获取默认邮箱验证页模板 #

登录Azure门户，进入你的AD B2C租户，找到目标注册用户流：

• 进入用户流的“页面布局”设置
• 在“邮箱验证”页面类型下，选择“下载默认模板”，获取基础HTML文件

2. 修改模板移除Continue按钮 #

打开下载的HTML模板，找到Continue按钮对应的元素（通常带有id="continueButton"或类名button.continue），直接删除该元素，或者通过CSS隐藏：

#continueButton {
    display: none !important;
}

如果需要验证完成后自动提交表单（无需用户手动操作），可以添加一段监听验证状态的JS代码：

// 监听验证码输入，完成后自动提交表单
document.addEventListener('DOMContentLoaded', function() {
    const verifyInput = document.querySelector('#verificationCode');
    if (verifyInput) {
        verifyInput.addEventListener('input', function() {
            // 假设验证码为6位，可根据实际规则调整
            if (this.value.length === 6) {
                setTimeout(() => {
                    document.querySelector('form').submit();
                }, 500);
            }
        });
    }
});

3. 上传自定义模板到AD B2C #

回到Azure门户的用户流“页面布局”设置：

• 选择“自定义页面”选项
• 上传修改后的HTML模板文件
• 保存用户流配置

4. 确认MSAL Angular配置正确性 #

确保你的MSAL Angular配置中authority指向该自定义用户流的地址，示例配置：

export const msalConfig = {
    auth: {
        clientId: 'your-client-id',
        authority: 'https://your-tenant.b2clogin.com/your-tenant.onmicrosoft.com/B2C_1_signup', // 替换为你的注册用户流地址
        redirectUri: 'http://localhost:4200',
    }
};

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