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

Posted 2022-08-27 Justin-Liu

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

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>

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"]

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

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

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

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>

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

<mgt-agenda></mgt-agenda>

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

<mgt-todo></mgt-todo>

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

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

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;

3️⃣ 测试我们的应用

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