本篇我們介紹一下Microsoft Graph Toolkit在Teams中應用的相關內容。
準備工作
示例代碼
基於我們之前介紹的內容，我們此次通過mgt-get獲取當前用戶加入的Teams。
<mgt-get resource="/me/joinedTeams" scopes="User.Read.All">
<template>
<div class="header">
<h1>My Joined Teams<h1>
<h2>And members</h2>
</div>
<div class="teams" data-for="team in value">
<h3>{{ team.displayName }}</h3>
<div data-if="team.description" class="description">
{{ team.description }}
</div>
<div data-else class="description">
Team description is empty
</div>
<h4>
<mgt-people show-max="10" group-id={{team.id}}></mgt-people>
</h4>
</div>
</template>
<template data-type="loading">
Loading...
</template>
<template data-type="error">
{{ this }}
</template>
</mgt-get>
比較醜，我們再加一些樣式。
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #FFF;
}
.header {
background-color: #6264A7;
text-align: center;
color: #F3F2F1;
padding: 20px 10px;
margin: 8px 4px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.teams {
background-color: #F3F2F1;
padding: 10px;
margin: 8px 16px;
}
.teams:hover {
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}
</style>
好，現在看起來就好多了。
咱們就展示這麼一個小東西，下面進入正題。
將Web應用轉成Teams的標籤
Microsoft Teams的標籤頁一般是類似iframe那種嵌入型的網頁，能夠獲取一些Teams特定的信息，這就給了我們足夠的自主性去自定義開發。
這裏我們的目標就是在原來能獨立運行的基礎上，讓示例的極簡Web應用也能夠在Teams的標籤頁中工作，Teams要求承載內容的URL必須使用HTTPS。
第一步、添加Teams SDK
添加Microsoft Teams JavaScript客戶端SDK的引用，放在代碼中head標籤的下面。
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
第二步、添加Teams Provider
因爲既要讓我們的demo應用能獨立工作，也能夠在Teams的標籤頁中工作，因此我們要保留之前添加的Provider，在此基礎上添加一個Teams Provider。
修改後的Provider部分的代碼如下：
<mgt-teams-provider
client-id="[YOUR-CLIENT-ID]"
auth-popup-url="auth.html">
</mgt-teams-provider>
<mgt-msal-provider
client-id="[YOUR-CLIENT-ID]"
depends-on="mgt-teams-provider"
redirect-uri="http://localhost:3000">
</mgt-msal-provider>
這裏我們在原來的MSAL Provider中聲明瞭一個屬性depends-on，它用來告訴應用，只有在mgt-teams-provider在當前環境不可用時才使用mgt-msal-provider。
第三步、創建auth.html
同時大家也注意到了，在Team Provider中我們使用了一個屬性auth-popup-url，因此我們需要創建一個auth.html頁面，代碼如下：
<html>
<head>
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<script>
mgt.TeamsProvider.handleAuth();
</script>
</head>
<body></body>
</html>
實際上除了對Teams SDK和Microsoft Graph Toolkit的引用之外，它只有一行代碼，用於處理認證。
轉換工作到這裏就完成了。
在Microsoft Teams中測試應用
第一步、在瀏覽器中啓用應用
跟之前一樣，在VS Code中點擊Go Live即可。
第二步、啓動ngrok
前面我們說了，需要HTTPS，這時就需要用到ngrok了。
執行命令ngrok http 5500 --host-header=localhost，5500需要改成你實際應用啓動時使用的端口。
第三步、添加reply-url
如上圖，https://a74e2856fe7e.ngrok.io就是我們生成的HTTPS的URL，將這個URL後面加/auth.html添加到Azure應用的Redirect URIs中並保存。
第四步、在App Studio中創建應用
在Microsoft Teams中創建應用我們需要一個圖標和一個清單文件指向實際的應用位置。使用App Studio的原因是它對於構建清單文件非常的友好。
我們可以使用網頁版或者桌面版的Teams完成以下操作，網頁版可以實時地調試，更推薦。
在Teams中打開App Studio，選擇Manifest editor標籤頁，點擊左側的Create a new app，在App details部分填寫信息，注意星號是都需要填寫的內容。
點擊左側的Tabs菜單，選擇Add a personal tab，填寫相應信息並保存，注意在Content URL的位置填寫我們的HTTPS鏈接，視情況可能需要添加具體的HTML頁面地址。
最後點擊左側的Test and distribute菜單，點擊Download按鈕下載我們的應用，下載的是一個ZIP文件，通常在我們默認的下載目錄中。
回到Teams的更多應用頁面，選擇上載自定義應用，爲<Tenant目錄>上傳，上傳剛剛下載的ZIP文件，上傳之後添加，大功告成了！
