ReactJS单页应用中如何在Azure AD B2C内邀请用户（含/不含Microsoft Graph）

你遇到的核心问题是：SPA作为公共客户端，无法直接获取调用Graph用户邀请API所需的权限。以下是具体原因和解决办法：

为什么SPA直接调用会失败 #

• User.Invite.All权限若以应用权限方式配置，需要使用客户端凭证流获取token，但SPA无法安全存储客户端密钥，不符合这个流程的要求。
• 若配置为委托权限，该权限需要全局管理员同意，且即使完成同意，普通B2C用户默认没有邀请其他用户的权限，只有管理员角色的用户才能执行此操作。另外，SPA的授权流程在处理这类高权限操作时也存在安全限制。

正确实现步骤 #

1. 搭建后端中间层 #

必须通过后端API作为中转，因为后端可以安全存储客户端密钥，使用客户端凭证流获取Graph API的合法token。

2. 注册后端应用并配置权限 #

• 在Azure AD B2C租户中注册后端API的应用。
• 为该应用添加应用权限类型的User.Invite.All，并获取租户管理员的同意。

3. 后端调用Graph API #

后端使用客户端凭证流向Azure AD B2C的token端点请求Graph API的access token，示例代码（Node.js）：

const axios = require('axios');

async function getGraphToken() {
  const tokenEndpoint = `https://your-b2c-tenant.b2clogin.com/your-b2c-tenant.onmicrosoft.com/${your-policy}/oauth2/v2.0/token`;
  const response = await axios.post(tokenEndpoint, new URLSearchParams({
    client_id: 'your-backend-app-client-id',
    client_secret: 'your-backend-app-client-secret',
    scope: 'https://graph.microsoft.com/.default',
    grant_type: 'client_credentials'
  }));
  return response.data.access_token;
}

拿到token后，调用Graph的邀请接口：

async function inviteUser(email) {
  const accessToken = await getGraphToken();
  await axios.post('https://graph.microsoft.com/v1.0/invitations', {
    invitedUserEmailAddress: email,
    inviteRedirectUrl: 'https://your-spa-url.com', // 用户点击邀请链接后跳转的地址
    sendInvitationMessage: true
  }, {
    headers: { Authorization: `Bearer ${accessToken}` }
  });
}

4. SPA调用后端API #

在你的React SPA中，添加输入邮箱的界面，用户提交后调用自己的后端API，由后端完成邀请操作。

B2C邀请的额外注意事项 #

• 邀请邮件的内容可以在Azure AD B2C租户的“用户邀请”设置中自定义。
• 被邀请用户点击链接后，会进入你配置的B2C注册流程，完成身份创建后即可访问应用。
• 如果需要将用户加入特定组，可以在Graph邀请请求中添加invitedUserMessageInfo或后续调用组添加接口。

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