使用 Microsoft Teams Toolkit for Visual Studio 高效构建一个指示板

Teams Toolkit for Visual Studio 现在可用了，这对于.NET开发者来说真是一个好消息。
本篇我们会介绍使用 ASP.NET Core 去构建一个 Teams 选项卡，并展示如何利用 Teams Toolkit for Visual Studio 去提升我们效率的步骤。

1. 安装 Teams Toolkit for Visual Studio
2. 在 Visual Studio 中创建基于 ASP.NET Core 的 Teams 应用程序
3. 通过访问日历事件、待办任务和文件夹，增强我们的 Teams 应用程序

安装 Teams Toolkit for Visual Studio

• 安装 Visual Studio 2022 的 17.3 或更高版本，在安装的过程中：
  • 选择 Workloads 中的 ASP.NET and web development inside the Workloads
  • 在 Installation details 中选择 Microsoft Teams development tools

• 在构建我们的 Teams 应用程序时，我们需要 sideloading 权限来安装和调试应用程序，因此我们需要确保拥有一个 Microsoft 365 账户。具体内容可以参阅 => 此文档。

在 Visual Studio 中创建基于 ASP.NET Core 的 Teams 应用程序

1. 打开 Visual Studio，选择 Create a new project：
   

2. 搜索关键字 teams 并选择 Microsoft Teams App，点击 Next 按钮：
   

3. 填写项目名称并选择项目路径，点击 Create 按钮：
   

4. 选择 Tab 作为应用类型，点击 Create 按钮：
   

5. 项目创建好之后，右键点击该项目，选择 Teams Toolkit > Prepare Teams App Dependencies 并确保登录了我们的 Microsoft 365 账号

运行刚刚创建好的应用程序，可以看到认证和用户信息已经可用了：

通过访问日历事件、待办任务和文件夹，增强我们的 Teams 应用程序

1️⃣ 使用 MSAL2 Provider 来启用 Single Sign On

1. 在项目中，访问 Pages > _Host.cshtml，在页面顶部添加如下引用：

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
1
2

2. 在Body节点中添加如下代码块

<script src="https://unpkg.com/@@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<script>
        mgt.Providers.globalProvider = new mgt.Msal2Provider({
            clientId: "@Configuration["TeamsFx:Authentication:ClientId"]",
            loginHint: "@User.Claims.FirstOrDefault(c => c.Type == "preferred_username")?.Value",
            redirectUri: "/blank-auth-end.html",
            loginType: mgt.LoginType.Popup,
            authority: "@Configuration["TeamsFx:Authentication:OAuthAuthority"]"
        });
</script>
1
2
3
4
5
6
7
8
9
10

3. Redirect Uri 这个位置我们定义了一个 blank-auth-end.html，我们需要创建它。右键 wwwroot，选择 “New item”，创建blank-auth-end.html 文件
4. 用下面的代码替换 permissions.json 中的托管权限定义

"delegated": ["User.Read","User.ReadBasic.All","Calendars.Read","Files.Read","Files.Read.All","Sites.Read.All","Tasks.Read","Tasks.ReadWrite","People.Read","User.ReadBasic.All"]
1

2️⃣ 使用 Microsoft Graph Toolkit 组件设计我们的选项卡

1. 在 Tab.razor 页面，在 provider 下面添加如下代码来初始化 Person 组件

<div>
   <mgt-person person-query="me" view="twoLines"></mgt-person>
</div>
1
2
3

2. 在 Person组件下面，div节点内继续添加如下代码

<div class="features">
            <div class="header">
                <div class="title">
                    <h2>One Productivity Hub</h2>
                    <div class="row">
                        <div class="column"><h3>Calendar events</h3></div>
                        <div class="column"><h3>To-do tasks</h3></div>
                        <div class="column"><h3>Files</h3></div>
                    </div>
                </div>
            </div>
            <div class="row" id="content">
                <div class="column" id="mgt-col"></div>
                <div class="column" id="mgt-col"></div>
                <div class="column" id="mgt-col"></div>
            </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. 在 class 为 row 的 div 下面的第一个 div 里，添加 Agenda 组件

<mgt-agenda></mgt-agenda>
1

4. 第二个里 div 添加 To-do 组件

<mgt-todo></mgt-todo>
1

5. 第三个里 div 添加文件列表组件

<mgt-file-list></mgt-file-list>
1

6. 打开 Tab.razor.css，用如下内容替换原内容

body,
#root > div {
	background-color: #F3F2F1;
}
.features {
	min-height: 80vh;
	margin: 20px;
	background-color: #FFF;
	box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.11), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
	border-radius: 4px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header {
	display: flex;
	background-color: #f0f0f0;
}
.title {
	margin-top: 20px;
	margin-left: 10px;
	width: 100%;
}
	.title h2 {
		font-size: 24px;
		padding-left: 5px;
		display: inline;
		font-weight: 600;
	}
	.title h3 {
		float: left;
		width: 33%;
		background: transparent;
		font-size: 16px;
		margin-bottom: 10px;
		padding-left: 10px;
		padding-top: 10px;
		color: #8A8886;
		font-weight: 600;
	}
mgt-person {
	margin-top: 20px;
	margin-left: 20px;
	--avatar-size: 60px;
	--font-family: 'Segoe UI';
	--font-size: 20px;
	--font-weight: 700;
	--color: black;
	--text-transform: none;
	--line2-font-size: 14px;
	--line2-font-weight: 400;
	--line2-color: #8A8886;
	--line2-text-transform: none;
}
#content, html, body {
	height: 98%;
}
#mgt-col {
	float: left;
	width: 33%;
	background: transparent;
	height: 60vh;
	overflow: hidden;
	padding: 5px;
	margin-top: 5px;
}
	#mgt-col:hover {
		overflow-y: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

3️⃣ 测试我们的应用

1. 访问 .fx > states，移除 state.local.json 文件
2. 右键项目，选择 Teams Toolkit > Prepare Teams App Dependencies，确保已经完成了登录，按 F5 启动调试，效果如下所示：