You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

关于Copilot VA Agent与Teams发布的React应用集成及自动身份验证的技术问询

Copilot VA Agent与Teams发布的React应用集成及自动身份验证实现方案

嗨,作为经常折腾Teams应用集成的开发者,我来给你拆解下实现这个需求的关键步骤,都是实战踩坑后总结的干货,应该能帮你少走弯路:

核心思路

本质上是复用Teams已有的用户会话身份——通过Teams JavaScript SDK直接从当前登录的Teams会话中获取用户的Azure AD令牌,再将这个令牌传递给你的Copilot VA Agent做身份验证,全程无需用户手动触发登录流程。


具体实现步骤

1. 打通Teams应用与Copilot VA Agent的权限体系

首先得确保两个服务的身份系统能互相认可:

  • 在Azure AD中,给你的Teams React应用(已注册的Azure AD应用)添加Copilot VA Agent对应的委派权限,权限类型选“代表用户访问”,如果是企业级应用,记得让管理员授予租户级别的权限同意。
  • 编辑Teams应用的manifest.json,在webApplicationInfo字段中配置正确的id(Teams应用的Azure AD客户端ID)和resource(Copilot VA Agent的API资源ID/客户端ID),这是SDK能获取到对应令牌的关键配置。

2. 在React应用中通过Teams SDK静默获取令牌

先安装Teams SDK依赖:

npm install @microsoft/teams-js

接着在React应用的初始化逻辑中,完成SDK初始化并静默获取令牌:

import * as microsoftTeams from "@microsoft/teams-js";

// 初始化Teams SDK,必须放在应用加载的早期阶段
microsoftTeams.initialize();

// 静默获取当前用户的身份令牌(无登录弹窗)
const getTeamsUserToken = async () => {
  try {
    const tokenResult = await microsoftTeams.authentication.getAuthToken({
      resources: ["{你的Copilot VA Agent资源ID}"],
      silent: true, // 核心参数:静默模式,直接从Teams会话取令牌
    });
    return tokenResult.token;
  } catch (error) {
    // 仅在权限未同意等极端情况触发,正常已登录Teams的用户不会走到这里
    console.error("令牌获取失败:", error);
    return null;
  }
};

小提示:如果本地调试时遇到令牌获取失败,建议用Teams Toolkit for VS Code启动调试,它会自动模拟Teams的登录环境。

3. 配置Copilot VA Agent的令牌验证逻辑

让你的Copilot VA Agent能识别并验证Teams传来的令牌:

  • 如果你是自定义后端实现的VA Agent,需要添加Azure AD令牌验证逻辑:校验令牌的签名、过期时间、aud(受众)是否匹配VA Agent的资源ID、iss(发行者)是否为你的租户Azure AD地址。
  • 示例验证代码(Node.js):
const jwt = require('jsonwebtoken');
const jwksClient = require('jwks-rsa');

// 从Azure AD获取公钥用于验证令牌签名
const client = jwksClient({
  jwksUri: `https://login.microsoftonline.com/{你的租户ID}/discovery/v2.0/keys`
});

async function verifyTeamsToken(token) {
  return new Promise((resolve, reject) => {
    const decoded = jwt.decode(token, { complete: true });
    if (!decoded?.header?.kid) return reject(new Error("无效的令牌格式"));

    client.getSigningKey(decoded.header.kid, (err, key) => {
      if (err) return reject(err);
      const signingKey = key.getPublicKey();
      jwt.verify(token, signingKey, {
        audience: "{你的Copilot VA Agent资源ID}",
        issuer: `https://login.microsoftonline.com/{你的租户ID}/v2.0`
      }, (err, payload) => {
        if (err) return reject(err);
        resolve(payload); // 验证通过,返回用户身份信息
      });
    });
  });
}

4. 在React中集成Copilot VA Agent并传递令牌

拿到有效令牌后,在调用VA Agent的API时,将令牌放在请求头中:

import axios from 'axios';

const callCopilotVAAgent = async (userQuery) => {
  const token = await getTeamsUserToken();
  if (!token) throw new Error("无法获取用户身份令牌");
  
  try {
    const response = await axios.post(
      "{你的Copilot VA Agent的API接口地址}",
      { query: userQuery },
      {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      }
    );
    return response.data;
  } catch (error) {
    console.error("VA Agent调用失败:", error);
    throw error;
  }
};

常见坑点排查

  • 令牌获取失败:检查Teams应用manifest.json中的webApplicationInfo配置是否和Azure AD应用信息完全匹配,以及权限是否已获得管理员同意。
  • VA Agent验证令牌失败:用Azure AD的“令牌解析工具”检查令牌的aud字段是否和VA Agent的资源ID一致,iss是否对应你的租户ID。
  • 本地调试无Teams环境:用Teams Toolkit的“预览到Teams”功能,它会自动搭建模拟的Teams登录环境,帮你快速验证自动认证流程。

按这个流程走下来,应该就能实现你要的自动身份验证+集成效果了,有具体细节卡壳的话可以再细化问哦!

火山引擎 最新活动