Microsoft Teams React 应用程序中的 SSO 错误

Question

所以我正在使用 React 制作 Microsoft Teams Tab，并且需要 SSO

我在“团队”选项卡中浏览了许多有关 SSO 的视频和文章，但我很困惑，我在一些视频中说 SSO 需要客户端和服务器端才能进行 SSO，但 SSO 的 JS 库仅在客户端运行并完成SSO，但在“团队”选项卡中打开时此方法不起作用。 但可以直接在浏览器中打开网页进行工作。

我浏览了有关 SSO 的视频和文章，但没有任何帮助，我需要文章如何使用 React 在 Teams 选项卡中进行 SSO

Answer 1

要使用 React 在 Microsoft Teams 选项卡中实现 SSO：

使用 OAuth2、OpenID Connect 或类似配置服务器端身份验证。 在 React 应用程序中使用 Microsoft Teams JavaScript SDK 来处理身份验证流程。 确保您的 React 应用程序使用身份验证期间获得的令牌与服务器端进行通信。 在 Teams 环境中进行彻底测试，以确保功能正常。 有关详细步骤，请参阅官方 Microsoft Teams 和为您的身份提供商量身定制的身份验证文档。

Answer 2

如果您需要的所有数据都包含在以下范围内，您也可以仅在客户端实现：openid、电子邮件、个人资料和离线访问。 确保调用 microsoftTeams.authentication.getAuthToken() 从 MSFT Teams 获取令牌，然后对其进行解码：jwtDecode(token)。

我在我的 MSFT Teams React 应用程序上这样做：

const authenticate = () => {
return new Promise((resolve, reject) => {
  microsoftTeams.authentication.getAuthToken({
    resources: [
      "replace_with_APP_ID_URI_defined_on_Azure_Application",
    ],
    silent: false,
    successCallback: async (token) => {
      try {
        exchangeClientTokenForServerToken(token);
        //I decode the token on server side 
      } catch (error) {
        console.log(error);
      }
      resolve();
    },
    failureCallback: (message) => {
      console.error(message);
      reject();
    },
  });
});

};