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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/beastboy/article/details/100177429

微软在推出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/[email protected]/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一下相关内容。