浏览器不支持 teamsfx 中的“OnBehalfOfUserCredential”答案

【问题标题】："OnBehalfOfUserCredential" in teamsfx is not supported in browser浏览器不支持 teamsfx 中的“OnBehalfOfUserCredential”
【发布时间】：2022-11-14 15:58:19
【问题描述】：

我们正在努力为 Tab App 添加 SSO，并遵循以下文档： https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/tab-sso-graph-api?tabs=nodejs#configure-code-to-fetch-access-token-using-msal

我们需要将从 OBO 流接收到的访问令牌传递给 Graph API。目前我们正在使用来自teamsfx 的createMicrosoftGraphClient 进行图形API 调用。在通过 teamfx 文档搜索可用于将 sso 令牌传递给 Graph API 的函数时，我遇到了OnBehalfOfUserCredential。但是，当使用它传递 sso 令牌并进行 Graph API 调用时。我在浏览器中运行 Teams 应用程序时看到以下错误： onBehalfOfUserCredential.browser.ts:26 Uncaught ErrorWithCode.RuntimeNotSupported: OnBehalfOfUserCredential is not supported in browser.

在teamfx中是否有任何替代方案可以在浏览器和桌面客户端中使用或有关如何将 sso 令牌传递给 Graph Api 的任何其他解决方法？

【问题讨论】：

标签： microsoft-graph-api microsoft-teams msal microsoft-graph-teams teams-toolkit

【解决方案1】：

Eugene，OnBehalfOfUserCredential 仅适用于 Node JS 环境，因为它设计为在后端服务中运行，并且需要客户端密钥或证书，不能在浏览器环境中暴露。

对于您的场景，我们有一个示例来演示如何使用 OnBehalfOfUserCredential for Teams Tab App 和后端服务：

https://github.com/OfficeDev/TeamsFx-Samples/tree/update-sample-with-new-sdk/hello-world-tab-with-backend

在后端 Azure Function 中，它使用 OnBehalfOfUserCredential 调用图形 API 并发送回 Teams 应用程序：https://github.com/OfficeDev/TeamsFx-Samples/blob/update-sample-with-new-sdk/hello-world-tab-with-backend/api/getUserProfile/index.ts

以下是后端服务中的代码 sn-p，请使用 TeamsFx SDK >= 2.0.0：

  const oboAuthConfig: OnBehalfOfCredentialAuthConfig = {
    authorityHost: process.env.M365_AUTHORITY_HOST,
    clientId: process.env.M365_CLIENT_ID,
    tenantId: process.env.M365_TENANT_ID,
    clientSecret: process.env.M365_CLIENT_SECRET,
  };
   
  // sso token is obtained from request sent by Teams App
  const oboCredential = new OnBehalfOfUserCredential(ssoToken, oboAuthConfig);
  const graphClient: Client = createMicrosoftGraphClientWithCredential(oboCredential, [".default"]);
  
  const profile: any = await graphClient.api("/me").get();

【讨论】：