Angular14 MSAL-Angular v2 配置Azure B2C实现仅目录用户登录

一、限制仅自有B2C目录用户登录的配置 #

你当前配置允许任意微软账户登录的核心原因是使用了/common通用多租户端点，该端点默认支持所有微软个人账户、任意Azure AD租户账户登录，且你当前使用的login.windows-ppe.net、login.microsoftonline.com属于普通Azure AD的登录域名，不是Azure AD B2C的专属服务域名，自然无法限制为仅B2C目录用户访问。
配置要点如下：

• 确认你的应用注册在Azure AD B2C服务实例下，而非普通Azure AD目录下，普通AAD应用无法对接B2C用户流能力。
• 废弃通用端点，将authority替换为自有B2C租户的专属端点，B2C生产环境统一使用b2clogin.com域名，不要使用普通AAD的登录域名。
• 必须在MSAL配置中添加knownAuthorities字段，将自有B2C的登录域名加入可信权威列表，否则MSAL会拦截对应登录请求。
• 后端Node.js层必须做token合法性校验，仅接受自有B2C租户签发的token，从接口层拦截非目录用户的数据访问请求。

注意：如果你之前尝试修改authority指向自有租户未生效，通常是两个原因：一是使用了普通Azure AD的登录域名而非B2C专属的b2clogin.com域名，二是未配置knownAuthorities字段导致MSAL拦截了非官方域名的请求。

二、接入B2C用户流、自定义登录页配置 #

MSAL-Angular v2没有移除B2C策略（用户流）的支持能力，只是不再内置专属的policies配置字段，直接通过指定不同流程对应的authority地址即可触发对应用户流；自定义登录页能力不需要修改前端代码，直接在Azure B2C门户的用户流配置中完成即可。

完整配置步骤 #

1. 先定义B2C基础配置常量，所有值替换为你自己的租户信息：

export const b2cConfig = {
  tenantName: "替换为你的B2C租户短名称",
  tenantFullDomain: "替换为你的B2C租户全域名，格式为xxx.onmicrosoft.com",
  clientId: "替换为你B2C下注册应用的ClientId",
  policyNames: {
    signUpSignIn: "替换为你创建的注册登录用户流名称",
    editProfile: "替换为你创建的编辑资料用户流名称",
    resetPassword: "替换为你创建的密码重置用户流名称"
  }
};

// 拼接生成各流程对应的authority地址
export const b2cAuthorities = {
  signUpSignIn: `https://${b2cConfig.tenantName}.b2clogin.com/${b2cConfig.tenantFullDomain}/${b2cConfig.policyNames.signUpSignIn}`,
  editProfile: `https://${b2cConfig.tenantName}.b2clogin.com/${b2cConfig.tenantFullDomain}/${b2cConfig.policyNames.editProfile}`,
  resetPassword: `https://${b2cConfig.tenantName}.b2clogin.com/${b2cConfig.tenantFullDomain}/${b2cConfig.policyNames.resetPassword}`,
  trustedDomain: `${b2cConfig.tenantName}.b2clogin.com`
};

2. 修改MSAL实例工厂函数，替换原有错误的authority配置：

import { PublicClientApplication, IPublicClientApplication, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';

const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

export function loggerCallback(logLevel: LogLevel, message: string) {
  // 可自定义日志处理逻辑
  console.log(`[MSAL Log] ${message}`);
}

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: b2cConfig.clientId,
      // 默认注册/登录流程使用对应用户流的authority
      authority: b2cAuthorities.signUpSignIn,
      // 配置可信B2C域名，必填
      knownAuthorities: [b2cAuthorities.trustedDomain],
      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE,
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

3. 触发编辑资料、密码重置等其他用户流时，在对应业务代码中传入对应流程的authority即可，示例：

import { MsalService } from '@azure/msal-angular';
import { b2cAuthorities } from 'src/app/config/b2c-config';

export class AccountCenterComponent {
  constructor(private msalService: MsalService) {}

  // 触发编辑资料流程
  openEditProfileFlow() {
    this.msalService.loginRedirect({
      authority: b2cAuthorities.editProfile,
      scopes: ["openid", "profile"]
    });
  }

  // 触发密码重置流程
  openResetPasswordFlow() {
    this.msalService.loginRedirect({
      authority: b2cAuthorities.resetPassword,
      scopes: ["openid"]
    });
  }
}

4. 自定义登录页样式：进入Azure AD B2C门户，打开对应用户流的配置页，找到「页面布局」配置项，开启自定义页面内容，上传你编写的HTML模板即可。模板中必须保留<div id="api"></div>节点作为B2C登录表单的挂载点，自定义CSS可以直接写在模板内，也可以引用公网可访问的CSS文件地址，配置保存后所有登录、注册、密码重置页面都会自动加载你自定义的样式，不需要修改前端MSAL相关代码。

后端校验补充 #

Node.js接口层校验前端传入的Access Token时，必须强制校验两个核心字段：

• iss（签发者）必须匹配你自有B2C租户对应用户流的签发地址
• aud（受众）必须匹配你前端注册应用的ClientId
  非你自有B2C租户签发的Token直接返回401拒绝，即可从数据层彻底拦截非目录用户的访问。

内容的提问来源于stack exchange，提问作者LUIS DIEGO CACERES GARCIA