Microsoft Teams React标签页SSO实现问题求助及教程需求

1. 前置准备 #

• 注册Azure AD应用，配置Teams所需的权限（比如User.Read、Mail.Read，按需添加）
• React项目中安装Teams JS SDK和请求工具
• 准备一个后端服务（以Node.js/Express为例），用于处理客户端临时token到正式access token的交换

2. 客户端（React）实现步骤 #

安装依赖 #

npm install @microsoft/teams-js axios

初始化Teams SDK #

在项目入口文件（比如App.js）中初始化Teams环境：

import * as microsoftTeams from "@microsoft/teams-js";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    // 初始化Teams SDK，必须在Teams环境中调用
    microsoftTeams.initialize();
  }, []);

  // 其他组件逻辑...
  return <div>Teams标签页应用</div>;
}

export default App;

获取客户端临时Token并调用后端交换 #

创建登录触发函数，通过Teams SDK获取临时token，再传给后端换正式access token：

import axios from "axios";

const handleSSOLogin = async () => {
  try {
    // 调用Teams SDK获取客户端临时token
    const clientToken = await new Promise((resolve, reject) => {
      microsoftTeams.authentication.getAuthToken({
        successCallback: resolve,
        failureCallback: reject,
      });
    });

    // 传给后端交换正式access token
    const res = await axios.post("/api/exchange-token", { clientToken });
    const { accessToken } = res.data;
    
    // 保存token到本地，供后续API调用使用
    localStorage.setItem("teamsAccessToken", accessToken);
    console.log("SSO登录成功");
  } catch (err) {
    console.error("登录失败:", err);
  }
};

3. 服务端（Node.js/Express）实现步骤 #

安装依赖 #

npm install express axios dotenv

配置Azure AD参数 #

创建.env文件，填入你的Azure AD应用信息：

CLIENT_ID=你的Azure AD应用ID
CLIENT_SECRET=你的Azure AD应用密钥
TENANT_ID=你的租户ID（或填common）

编写Token交换接口 #

const express = require("express");
const axios = require("axios");
require("dotenv").config();

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

// Token交换接口
app.post("/api/exchange-token", async (req, res) => {
  const { clientToken } = req.body;
  try {
    // 调用Azure AD的token端点，用客户端临时token换正式access token
    const tokenRes = await axios.post(
      `https://login.microsoftonline.com/${process.env.TENANT_ID}/oauth2/v2.0/token`,
      new URLSearchParams({
        grant_type: "urn:ietf:params:oauth:grant-type:jwt-bearer",
        client_id: process.env.CLIENT_ID,
        client_secret: process.env.CLIENT_SECRET,
        assertion: clientToken,
        requested_token_use: "on_behalf_of",
        scope: "User.Read Mail.Read" // 按需调整权限范围
      })
    );

    res.json({ accessToken: tokenRes.data.access_token });
  } catch (err) {
    console.error("Token交换失败:", err);
    res.status(500).json({ error: "Token交换失败" });
  }
});

app.listen(3001, () => {
  console.log("后端服务运行在http://localhost:3001");
});

4. Teams应用Manifest配置 #

在manifest.json中补充以下配置：

"webApplicationInfo": {
  "id": "你的Azure AD应用ID",
  "resource": "api://你的前端域名/你的Azure AD应用ID"
},
"authorization": {
  "permissions": {
    "resourceSpecific": [
      {
        "name": "User.Read",
        "type": "Delegated"
      }
    ]
  }
}

5. 测试注意事项 #

• 必须在Teams客户端（桌面/网页版）内测试，纯浏览器环境的SSO逻辑在Teams iframe中会被安全策略拦截
• 确保前端和后端的域名已添加到Azure AD应用的重定向URI列表中
• 测试前登录Teams账号，确保账号拥有配置的权限范围

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