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

微軟在推出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一下相關內容。