Azure AD B2C自定义策略：修改登录页社交IDP按钮样式

完全可以修改社交IDP按钮的颜色和图标，以下是具体实现方式：

一、调整按钮颜色 #

社交IDP按钮的颜色可通过自定义CSS配置，步骤如下：

1. 在自定义CSS文件中，针对目标IDP的按钮类（或通用社交按钮类）定义样式。例如，Google按钮的样式示例：

/* Google登录按钮基础样式 */
.social.google .button {
  background-color: #4285F4;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
}

/* 按钮hover状态样式 */
.social.google .button:hover {
  background-color: #3367D6;
}

2. 确保自定义CSS已通过策略的<ContentDefinition>引入。在策略的<ContentDefinitions>节点下，找到对应页面（如api.signuporsignin）的<LoadUri>，指向你的自定义CSS文件地址。

二、添加按钮图标 #

给按钮添加图标有两种常用方式：

方式1：通过CSS背景图实现 #

利用CSS的::before伪元素添加图标，示例代码：

.social.google .button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJWMTIuNkMxMiAxMi42IDEyLjEgMTMgMTIuNiAxM0gxNkMxNy4xIDEzIDE4IDEyLjEgMTggMTFWNkMxOCA0LjkgMTcuMSA0IDE2IDRIMTMuNkMxMy4yIDQgMTIgNC4yIDEyIDRWMloiIGZpbGw9IiNGMzM0MzkiLz4KPHBhdGggZD0iTTggMTZIMjBWMTJIMFYxNlptMTItNEgxNlYxMEgxNFYxMkgxMFYxNkg4VjE4SDI2VjE2SDhWMTJaIiBmaWxsPSIjRkY1RTUwIi8+CjxwYXRoIGQ9Ik0yMiAxNlYxMkgxNlYxNkgxNFYxMkgxMFYxNkg4VjE4SDI2VjE2SDIyWiIgZmlsbD0iI0VCMDAxQiIvPgo8L3N2Zz4=');
  background-size: contain;
  vertical-align: middle;
}

使用base64编码的图标可避免跨域问题，你可以将目标图标转换为base64后替换上述内容。

方式2：在策略中直接嵌入图标HTML #

修改自定义策略里对应<ClaimsProvider>下的<DisplayName>，嵌入图标元素：

<ClaimsProvider>
  <Domain>google.com</Domain>
  <DisplayName><img style="width:20px; vertical-align:middle; margin-right:8px;" src="data:image/svg+xml;base64,图标base64编码" /> 登录Google</DisplayName>
  <!-- 其他配置节点 -->
</ClaimsProvider>

注意事项 #

• 可通过浏览器开发者工具查看用户流页面的按钮样式，复制对应的CSS属性到自定义CSS中，实现和用户流一致的效果。
• 如果使用外部图标URL，需要在Azure AD B2C的CORS设置中允许该资源的访问。

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