Отображение предстоящих собраний для пользователя Microsoft 365 с помощью Microsoft Graph Toolkit
Недавно я показал вам, как вы можете менее чем за 10 минут создать простого личного помощника, который показывает пользователям встречи, которые они оставили на день. Вот еще более простой способ сделать это с помощью Microsoft Graph Toolkit.
Показать предстоящие собрания для пользователя Microsoft 365
Отображение предстоящих собраний — распространенный сценарий при интеграции Microsoft 365 в рабочие приложения. Используя Microsoft Graph, ваше приложение может подключаться к Microsoft 365 и получать доступ к календарю пользователя. Создав конкретный запрос, вы можете получать встречи между настоящим моментом и концом дня.
Недавно я шаг за шагом рассказывал вам, как выполнить этот сценарий менее чем за 10 минут с помощью Microsoft Graph JavaScript SDK. Но есть еще более простой способ сделать это с помощью 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
Чтобы дать вам более полное сравнение, я перестроил тот же сценарий с помощью Microsoft Graph Toolkit.
Лучший способ проверить приложение — запустить его локально, следуя инструкциям в файле README.
Поскольку получать данные с помощью MGT очень просто, я добавил дополнительный пользовательский интерфейс, чтобы различать разные состояния приложения.
Компонент MGT Agenda, который я использую для отображения предстоящих встреч, предлагает различные шаблоны для настройки пользовательского интерфейса. При загрузке данных я показываю простое текстовое сообщение:
<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.
Чтобы показать предстоящие встречи, для простоты я использую шаблон по умолчанию, поставляемый с компонентом Agenda.
Краткое содержание
Набор инструментов Microsoft Graph — это отличный способ создавать приложения, которые подключаются к Microsoft 365. Он упрощает подключение к Microsoft 365 и предоставляет набор компонентов, которые вы можете использовать для создания своего приложения и получения данных и идей из Microsoft 365. , Поскольку компоненты MGT легко настраиваются, вы можете легко интегрировать их в свое приложение.
Запустите образец приложения локально и убедитесь сами, насколько просто создавать приложения, которые подключаются к Microsoft 365 с помощью Microsoft Graph Toolkit.
Первоначально опубликовано на https://blog.mastykarz.nl 28 октября 2022 г.
