TeamsFx中OnBehalfOfUserCredential不支持浏览器的替代方案咨询

问题原因 #

OnBehalfOfUserCredential 是TeamsFx专为服务端（Node.js）设计的凭证类，用于实现后端的OBO（代表用户）流程，浏览器环境下不支持该类，因此直接在前端调用会触发RuntimeNotSupported错误。

替代方案 #

根据场景需求，提供两种兼容浏览器和Teams桌面客户端的解决方案：

方案1：前端直接通过TeamsUserCredential调用Graph API（纯前端场景）

无需走OBO流程，直接使用TeamsFx的TeamsUserCredential类，它原生支持跨端SSO令牌获取，可直接传入createMicrosoftGraphClient创建Graph客户端。

代码示例：

import { TeamsUserCredential, createMicrosoftGraphClient } from "@microsoft/teamsfx";

// 初始化Teams用户凭证
const credential = new TeamsUserCredential({
  clientId: "你的应用客户端ID",
});

// 请求所需的Graph API权限（按需调整）
await credential.login(["User.Read", "Mail.Read"]);

// 创建Graph客户端并调用API
const graphClient = createMicrosoftGraphClient(credential, ["User.Read"]);
const currentUser = await graphClient.api("/me").get();
console.log(currentUser);

说明：

• 该类会自动处理Teams环境的SSO令牌获取、缓存与刷新，无需手动管理。
• 需要在Teams应用清单中声明对应的Graph权限（webApplicationInfo.resource设为https://graph.microsoft.com，并添加所需权限到authorization.permissions.resourceSpecific）。

方案2：后端代理OBO流程（需后端处理逻辑场景）

如果必须使用OBO流程（例如需要后端处理敏感业务逻辑），需通过以下步骤实现跨端兼容：

1. 前端用TeamsUserCredential获取针对后端API的SSO令牌
2. 将令牌传给后端接口
3. 后端使用OnBehalfOfUserCredential完成OBO流程并调用Graph API，再将结果返回给前端

前端代码示例：

import { TeamsUserCredential } from "@microsoft/teamsfx";

const credential = new TeamsUserCredential({ clientId: "你的前端应用客户端ID" });
// 获取针对后端API的访问令牌
const ssoToken = await credential.getToken("api://你的后端应用ID/access_as_user");

// 调用后端代理接口
const proxyResponse = await fetch("/api/graph-proxy", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${ssoToken.token}`,
  },
});
const graphData = await proxyResponse.json();

后端Node.js代码示例：

import { OnBehalfOfUserCredential, createMicrosoftGraphClient } from "@microsoft/teamsfx";
import express from "express";

const app = express();
app.use(express.json());

app.post("/api/graph-proxy", async (req, res) => {
  // 从请求头获取前端传来的SSO令牌
  const userToken = req.headers.authorization?.split(" ")[1];
  if (!userToken) {
    return res.status(401).send("Missing authorization token");
  }

  // 初始化OBO凭证
  const oboCredential = new OnBehalfOfUserCredential({
    clientId: "你的后端应用客户端ID",
    tenantId: "你的租户ID",
    clientSecret: "你的后端应用客户端密钥",
    userToken: userToken,
  });

  // 调用Graph API
  const graphClient = createMicrosoftGraphClient(oboCredential, ["User.Read"]);
  const userInfo = await graphClient.api("/me").get();
  res.json(userInfo);
});

app.listen(3000, () => console.log("Backend server running on port 3000"));

说明：

• 需确保后端应用注册中配置了允许的前端来源（CORS），并添加了对应的Graph委派权限（需管理员同意）。
• 前端的TeamsUserCredential负责跨端适配，后端专注于OBO流程处理。

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