如何在含自断言模板的现有AAD自定义策略中添加Microsoft登录按钮

1. 定位模板中可添加按钮的区域 #

打开你的selfAsserted.html模板，找到用户名/密码表单的上方或下方区域，要是没有现成的社交登录容器，手动加一个：

<div class="social-login-box" id="msLoginContainer"></div>

2. 用B2C内置JS API生成登录按钮 #

在页面底部的<script>区块里，加这段代码来获取Microsoft登录的跳转链接并生成按钮：

window.addEventListener('load', function() {
  // 获取策略里配置的所有身份提供者
  var allProviders = window.SECURITY_IDENTITY_PROVIDERS;
  // 筛选出Microsoft提供者（名称要和你XML里配置的DisplayName一致）
  var msProvider = allProviders.find(p => p.name === 'Microsoft');
  
  if (msProvider) {
    // 创建按钮元素
    var msButton = document.createElement('button');
    msButton.className = 'social-btn ms-btn';
    msButton.innerText = '用Microsoft账号登录';
    // 点击跳转登录链接
    msButton.onclick = () => window.location.href = msProvider.loginUrl;
    // 把按钮加到容器里
    document.getElementById('msLoginContainer').appendChild(msButton);
  }
});

3. 给按钮加匹配模板的样式（可选） #

在模板的<style>部分加样式，让按钮和现有页面风格统一：

.social-btn {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.ms-btn {
  background-color: #0078d4;
  color: #fff;
}

.ms-btn:hover {
  background-color: #005a9e;
}

4. 确认XML策略配置匹配 #

确保你XML策略里的Microsoft身份提供者配置，其DisplayName和JS里写的'Microsoft'一致，比如：

<ClaimsProvider>
  <Domain>live.com</Domain>
  <DisplayName>Microsoft</DisplayName>
  <TechnicalProfiles>
    <!-- 这里是你已配置好的Microsoft登录技术参数 -->
  </TechnicalProfiles>
</ClaimsProvider>

注意点 #

• 别乱改模板里B2C自动渲染的核心代码，用自定义容器加按钮更稳妥
• 测试前确认Microsoft身份提供者在租户里已配置生效，且策略里已包含该提供者
• 如果模板本身有#social容器，可能B2C会自动渲染按钮，检查下是不是被CSS隐藏了，调整显示就行

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