好消息_使用MicrosoftTeamsToolkitforVisualStudio高效构建一个指示板

篇首语：本文由编程笔记#小编为大家整理，主要介绍了使用 Microsoft Teams Toolkit for Visual Studio 高效构建一个指示板相关的知识，希望对你有一定的参考价值。

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

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

安装 Teams Toolkit for Visual Studio

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

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

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

1. 打开 Visual Studio&＃xff0c;选择 Create a new project&＃xff1a;
   

2. 搜索关键字 teams 并选择 Microsoft Teams App&＃xff0c;点击 Next 按钮&＃xff1a;
   

3. 填写项目名称并选择项目路径&＃xff0c;点击 Create 按钮&＃xff1a;
   

4. 选择 Tab 作为应用类型&＃xff0c;点击 Create 按钮&＃xff1a;
   

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

运行刚刚创建好的应用程序&＃xff0c;可以看到认证和用户信息已经可用了&＃xff1a;

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

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

1. 在项目中&＃xff0c;访问 Pages > _Host.cshtml&＃xff0c;在页面顶部添加如下引用&＃xff1a;

&＃64;using Microsoft.Extensions.Configuration
&＃64;inject IConfiguration Configuration


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

<script src&＃61;"https://unpkg.com/&＃64;&＃64;microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<script>
mgt.Providers.globalProvider &＃61; new mgt.Msal2Provider(
clientId: "&＃64;Configuration["TeamsFx:Authentication:ClientId"]",
loginHint: "&＃64;User.Claims.FirstOrDefault(c &＃61;> c.Type &＃61;&＃61; "preferred_username")?.Value",
redirectUri: "/blank-auth-end.html",
loginType: mgt.LoginType.Popup,
authority: "&＃64;Configuration["TeamsFx:Authentication:OAuthAuthority"]"
);
</script>


3. Redirect Uri 这个位置我们定义了一个 blank-auth-end.html&＃xff0c;我们需要创建它。右键 wwwroot&＃xff0c;选择 “New item”&＃xff0c;创建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 页面&＃xff0c;在 provider 下面添加如下代码来初始化 Person 组件

<div>
<mgt-person person-query&＃61;"me" view&＃61;"twoLines"></mgt-person>
</div>


2. 在 Person组件下面&＃xff0c;div节点内继续添加如下代码

<div class&＃61;"features">
<div class&＃61;"header">
<div class&＃61;"title">
<h2>One Productivity Hub</h2>
<div class&＃61;"row">
<div class&＃61;"column"><h3>Calendar events</h3></div>
<div class&＃61;"column"><h3>To-do tasks</h3></div>
<div class&＃61;"column"><h3>Files</h3></div>
</div>
</div>
</div>
<div class&＃61;"row" id&＃61;"content">
<div class&＃61;"column" id&＃61;"mgt-col"></div>
<div class&＃61;"column" id&＃61;"mgt-col"></div>
<div class&＃61;"column" id&＃61;"mgt-col"></div>
</div>
</div>


3. 在 class 为 row 的 div 下面的第一个 div 里&＃xff0c;添加 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&＃xff0c;用如下内容替换原内容

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: &＃39;Segoe UI&＃39;, 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: &＃39;Segoe UI&＃39;;
--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&＃xff0c;移除 state.local.json 文件
2. 右键项目&＃xff0c;选择 Teams Toolkit > Prepare Teams App Dependencies&＃xff0c;确保已经完成了登录&＃xff0c;按 F5 启动调试&＃xff0c;效果如下所示&＃xff1a;