如何在Microsoft Teams Tab里拿到上下文

最新推荐文章于 2025-02-01 00:09:57 发布

原创最新推荐文章于 2025-02-01 00:09:57 发布 · 置顶 · 8.6k 阅读

2 ·

CC 4.0 BY-SA版权

Teams 同时被 2 个专栏收录

28 篇文章

订阅专栏

Office 365

17 篇文章

订阅专栏

本文介绍如何在Microsoft Teams的自定义Tab中获取用户上下文信息，包括登录用户的名字(userPrincipalName, displayName)。通过微软提供的官方JavaScript SDK，开发者可以轻松访问这些属性，实现系统的集成和个性化体验。" 126578547,15058605,Java全栈面试指南：大厂面试题解析与学习资源,"['Java', '面试', '架构']

微软在推出Teams后不久就支持在Team内添加自定义Tab功能，这个功能对很多用户来说可以说是非常有用了，可以接入自己的各种业务系统，这样就可以很好的将众多系统集成在一个平台里，方便用户查找操作，不用在各种系统间来回切换。

这里为了说明，简单粗暴将Bing主页添加进来做个展示，当然实际中可以加自己的各种系统【具体操作可以戳https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-overview】。

如果添加的业务系统比较简单，或者只是知识库一类的，当然没有任何问题。有时候，我们需要在Tab里拿到登录用户的信息，比如登录名（userPrincipalName，displayName等等），那么这种情况我们怎么拿到呢？其实，也很简单，微软已经为我们提供了官方的javascript api【以sdk形式提供，也支持npm package安装】。

以各种姿势引入————————————————————————

<!-- 通过CDN引用，找到自己想要的版本 -->
<script src="https://statics.teams.microsoft.com/sdk/{v1.4.2}/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
 
<!-- 如果是npm安装的，指定版本或最新版本，进行引用 -->
<script src="node_modules/@microsoft/teams-js@1.4.2/dist/MicrosoftTeams.min.js"></script>

<!-- 如果需要copy到项目部署本地，也可以下载某版本，添加到项目中进行引用 -->
<script src="MicrosoftTeams.min.js"></script>

引入后可以访问各种上下文属性

<script type="text/javascript">
    // 调用API获取属性
    microsoftTeams.getContext(function (context) {
        var upn = context.userPrincipalName;
    });
</script>

还有其他属性，可以戳 https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/microsoftteams.context?view=msteams-client-js-latest。

以上，简单介绍了官方提供的js sdk api，可以获取上下文信息。当然，除此之外，如果使用react的童鞋，微软也提供了对应的package，大家可以自行搜索，如果有机会，再跟大家share一下相关内容。