使用On-Behalf-Of流对接MS Graph时出现400认证错误

核心问题分析 #

你的代码使用FormData构造请求体，但微软OAuth2令牌端点（包括On-Behalf-Of流）默认仅支持application/x-www-form-urlencoded格式的请求。Postman中你大概率选择了x-www-form-urlencoded发送请求，所以能正常工作，而前端用FormData会生成multipart/form-data格式的请求，导致端点无法解析参数，返回400错误。

另外，原代码未处理HTTP错误响应——fetch仅在网络层面失败时抛出异常，HTTP 400这类业务错误不会自动触发异常，必须手动解析响应体才能看到具体错误原因（比如断言无效、权限配置问题等）。

修改后的代码 #

let userTokenEncoded = await OfficeRuntime.auth.getAccessToken({
   forMSGraphAccess: true,
   allowSignInPrompt: true,
   allowConsentPrompt: true
});

// 使用URLSearchParams构造x-www-form-urlencoded格式的请求体
const params = new URLSearchParams();
params.set("grant_type", "urn:ietf:params:oauth:grant-type:jwt-bearer");
params.set("client_id", "XXXXXXXXXXXXXXXXX");
params.set("client_secret", "XXXXXXXXXXXXXXXXXXX");
params.set("assertion", userTokenEncoded);
params.set("scope", "https://graph.microsoft.com/.default");
params.set("requested_token_use", "on_behalf_of");

const response = await fetch("https://login.microsoftonline.com/XXXXXXXXXXXXXX/oauth2/v2.0/token", {
   method: "POST",
   headers: {
      "Content-Type": "application/x-www-form-urlencoded"
   },
   body: params
});

// 手动处理HTTP错误，解析具体错误信息
if (!response.ok) {
   const errorDetails = await response.json();
   console.error("OBO令牌请求错误详情:", errorDetails);
   throw new Error(`令牌请求失败: ${errorDetails.error_description || errorDetails.error}`);
}

const tokenData = await response.json();
const accessToken = tokenData.access_token;

// 调用Microsoft Graph API示例
const graphResponse = await fetch("https://graph.microsoft.com/v1.0/me", {
   headers: {
      "Authorization": `Bearer ${accessToken}`
   }
});

额外注意事项 #

• 客户端密钥安全：前端插件中直接暴露client_secret存在泄露风险，建议通过后端服务代理On-Behalf-Of请求，避免密钥暴露在客户端代码中。
• 错误排查：如果修改后仍有问题，查看控制台输出的errorDetails，里面会包含微软返回的具体错误描述（比如invalid_grant、invalid_scope等），可以精准定位配置或权限问题。

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