最近，我向您展示了如何在不到10分钟的时间内建造一个简单的个人助理，向用户展示了他们当天剩下的会议。这是使用Microsoft Graph Toolkit进行的一种更简单的方法。
展示Microsoft 365用户的即将举行的会议
在工作应用程序中将Microsoft 365集成时，展示即将举行的会议是一个常见的情况。使用Microsoft Graph，您的应用程序可以连接到Microsoft 365并访问用户的日历。通过构建特定的查询，您可以从现在到一天结束之间取回会议。
最近，我使用Microsoft Graph JavaScript SDK在10分钟内逐步带您走动。但是，使用Microsoft Graph Toolkit有一种更简单的方法。
连接到Microsoft 365的最简单方法
Microsoft Graph Toolkit（MGT）是连接到Microsoft 365的组件和身份验证提供商组。MGT消除了实现身份验证，从Microsoft Graph加载数据的复杂性，并将其显示在您的应用程序中。如果有什么问题，它也可以正确处理异常。 Microsoft Graph Toolkit的组件非常可自定义，因此您可以将其调整到您的应用程序。
快速比较：登录您的应用程序
要了解使用Microsoft Graph Toolkit的好处，让我们看看一个示例：让用户使用其Microsoft 365帐户登录您的应用程序。
通常，您需要类似的代码：
<html>
<head>
<title>Upcoming meetings</title>
<script src="https://alcdn.msauth.net/browser/2.28.3/js/msal-browser.min.js"></script>
</head>
<body>
<h1>Upcoming meetings</h1>
<div id="auth"></div>
<script>
(() => {
const scopes = ['Calendars.Read'];
const msalConfig = {
auth: {
clientId: '021aa7bb-9aaa-4185-92ad-c7b75a7fb9d2'
}
};
const msalClient = new msal.PublicClientApplication(msalConfig);
function render() {
msalClient
.handleRedirectPromise()
.then(response => {
const accounts = msalClient.getAllAccounts();
if (accounts.length === 0) {
document.querySelector('#auth').innerHTML = '<button>Login</button>';
document.querySelector('#auth button').addEventListener('click', login);
}
else {
document.querySelector('#auth').innerHTML = '<button>Logout</button>';
document.querySelector('#auth button').addEventListener('click', logout);
}
});
}
function login(e) {
e.preventDefault();
msalClient.loginRedirect({
scopes
});
}
function logout(e) {
e.preventDefault();
msalClient.logoutRedirect();
}
render();
})();
</script>
</body>
</html>
相比，这是使用Microsoft Graph Toolkit构建的相同功能：
<html>
<head>
<title>Upcoming meetings</title>
<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
</head>
<body>
<h1>Upcoming meetings</h1>
<mgt-msal2-provider client-id="021aa7bb-9aaa-4185-92ad-c7b75a7fb9d2" scopes="Calendars.Read"></mgt-msal2-provider>
<mgt-login></mgt-login>
</body>
</html>
看到区别吗？而且我们甚至还没有进入好部分：致电Microsoft Graph！
使用Microsoft Graph Toolkit，您可以专注于构建应用程序并为客户解决问题。 Microsoft Graph Toolkit负责其余的。
与Microsoft Graph Toolkit展示即将举行的会议
为您提供更完整的比较，我是rebuilt the same scenario using Microsoft Graph Toolkit。
查看应用程序的最佳方法是按照读数中的说明在本地运行该应用程序。
因为使用MGT检索数据非常简单，所以我添加了一些额外的UI来区分应用程序的不同状态。
我用来展示即将举行的会议的MGT Agenda component提供了不同的templates来自定义UI。加载数据时，我会显示一个简单的短信：
<mgt-agenda>
<template data-type="loading">
<div class="loading">Loading...</div>
</template>
<!-- trimmed for brevity -->
</mgt-agenda>
当没有数据显示时，我考虑到可能没有数据的事实，因为用户尚未登录该应用程序，或者用户可能没有即将举行的会议：
<mgt-agenda>
<template data-type="loading">
<div class="loading">Loading...</div>
</template>
<template data-type="no-data">
<div class="no-data" data-if="mgt.Providers.globalProvider.state === mgt.ProviderState.SignedIn">
<!-- No upcoming meetings -->
</div>
<div class="no-data" data-else>
<p>Sign in to view your upcoming meetings</p>
</div>
</template>
</mgt-agenda>
我用于MGT中的conditional rendering功能。
为了简单地显示即将举行的会议，我使用议程组件提供的默认模板。
概括
Microsoft Graph Toolkit是构建连接到Microsoft 365的应用程序的好方法来自Microsoft365。由于MGT组件非常可自定义，因此您可以将它们无缝集成到应用中。
Run the sample app locally并亲自查看使用Microsoft Graph Toolkit构建连接到Microsoft 365的应用程序的容易。