如何用MSAL-react获取用户oid？Office JS插件适配个人账号问题

一、先搞定重定向URI不匹配的坑 #

Office插件的身份验证走微软专属回调链路，不是你本地的http://localhost:3000，得在Azure AD应用注册里补加正确的重定向URI：

• 直接添加https://offaddins.ciamlogin.com/common/oauth2/nativeclient，这是Office插件通用的回调地址，和你报错里的域名对应得上。
• 同时要在Azure应用的「移动和桌面应用」平台下，勾选「允许公共客户端流」——Office插件属于公共客户端，不开这个会有授权问题。

二、配置MSAL适配Office插件场景 #

用MSAL.js 2.x或3.x即可，重点是把权威地址设为支持全账号类型的，再写自动登录/获取oid的逻辑：

1. 初始化MSAL实例时，指定common权威（支持个人、工作/学校账号）：

import { PublicClientApplication } from '@azure/msal-browser';

const msalConfig = {
  auth: {
    clientId: '你的Azure应用客户端ID',
    authority: 'https://login.microsoftonline.com/common', // 关键：用common而非特定租户ID
    redirectUri: 'https://offaddins.ciamlogin.com/common/oauth2/nativeclient' // 和Azure注册的一致
  }
};

const msalInstance = new PublicClientApplication(msalConfig);

2. 写自动获取用户oid的逻辑：
   先查有没有缓存的登录账号，有就直接拿oid；没有就弹登录框：

async function getCurrentUserOid() {
  const accounts = msalInstance.getAllAccounts();
  if (accounts.length > 0) {
    // 多账号场景可自行加逻辑选账号，这里默认取第一个
    return accounts[0].idTokenClaims.oid;
  }
  // 未登录则弹出登录窗口，仅请求openid和profile范围就足够获取oid
  const loginResponse = await msalInstance.loginPopup({
    scopes: ['openid', 'profile']
  });
  return loginResponse.account.idTokenClaims.oid;
}

3. 在Office插件初始化时调用该函数，判断Pro功能显示：

Office.onReady(async () => {
  try {
    const oid = await getCurrentUserOid();
    // 调用后端接口，查询该oid是否拥有Pro订阅
    const hasProAccess = await checkProSubscription(oid);
    // 控制Pro功能的显示/隐藏
    document.getElementById('pro-features').style.display = hasProAccess ? 'block' : 'none';
  } catch (err) {
    console.error('获取用户信息失败:', err);
    // 登录失败时给用户提示，比如引导重试
  }
});

三、几个注意事项 #

• 仅获取oid的话，openid范围就足够，无需额外添加Microsoft Graph权限；如果需要用户其他信息，再补充User.Read权限。
• Office插件里优先用loginPopup，别用loginRedirect——重定向在插件iframe环境中容易出问题。
• 测试个人账号登录时，建议清除浏览器缓存或使用隐身窗口，避免之前的工作账号缓存干扰。

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