MSGraphMailbag - 在 Electron 应用程序中使用 Microsoft Graph Toolkit

最新推荐文章于 2024-01-11 13:51:45 发布

Justin-Liu

最新推荐文章于 2024-01-11 13:51:45 发布

阅读量305

点赞数 1

本文链接：https://blog.csdn.net/FoxDave/article/details/114690988

版权

Microsoft 365 同时被 3 个专栏收录

170 篇文章 10 订阅

订阅专栏

Microsoft Graph Toolkit

23 篇文章 2 订阅

订阅专栏

Microsoft Graph Mailbag

15 篇文章 0 订阅

订阅专栏

前两天我们提到了 Microsoft Graph Toolkit 发布了新版本，支持了 Electron 应用程序，本篇再具体介绍一下如何使用，包括如何验证用户并在 Electron 应用程序中通过 Microsoft Graph Toolkit 调用 Microsoft Graph API。
在这里插入图片描述

准备开始

通过 Electron 提供程序，我们可以在 Electron 应用程序中只用几行代码实现身份验证并访问 Microsoft Graph。

创建 Electron 应用并添加 Electron 提供程序

这里我们只介绍创建一个简单的 Electron 应用程序的步骤，如果读者想了解更多关于 Electron 提供程序的信息，点这里。

为了快速开始，我们先把 GitHub 上的项目模板下载下来使用。
https://github.com/electron/electron-quick-start-typescript

git clone https://github.com/electron/electron-quick-start-typescript.git

安装必要的项目包引用

npm install

接着安装 @microsoft/mgt-electron-provider 和 @microsoft/mgt-element 的 npm 包，这样我们就能够进行身份验证并使用 Microsoft Graph Toolkit 组件了

npm i @microsoft/mgt-element @microsoft/mgt-electron-provider

安装 @microsoft/mgt-components 包，这个包里面包含了所有连接 Microsoft Graph 的 web 组件

npm i @microsoft/mgt-components

做完上述步骤后，先确认是否能正确运行应用

npm start

初始化提供程序

要在我们的应用中启用身份验证，我们需要初始化两个类：ElectronAuthenticator 和 ElectronProvider，分别在主函数和页面渲染过程中。ElectronAuthenticator 负责构建 MSAL 身份验证和获取访问令牌需要的配置变量。而 MGT 的 web组件需要访问令牌去调用 Microsoft Graph，因此我们需要 ElectronProvider 去和 ElectronAuthenticator 通信以获得访问令牌。

首先，打开 src/main.ts 文件，引入 ElectronAuthenticator 和 MsalElectronConfig

import {
  ElectronAuthenticator,
  MsalElectronConfig,
} from '@microsoft/mgt-electron-provider/dist/Authenticator';

在 createWindow() 方法中添加如下代码进行 ElectronAuthenticator 的初始化，同时记得将 <your_client_id> 替换为我们自己的应用程序注册的 client ID

const config: MsalElectronConfig = {
clientId: '<your_client_id>',
mainWindow: mainWindow, //BrowserWindow instance that requires auth
scopes: [
'user.read',
'people.read',
'user.readbasic.all',
'contacts.read',
'presence.read.all',
'presence.read',
'user.read.all',
'calendars.read',
'Sites.Read.All',
'Sites.ReadWrite.All',
],
};
ElectronAuthenticator.initialize(config);

要初始化 ElectronProvider，在 src/renderer.ts 文件中添加如下代码

import { Providers, ProviderState } from '@microsoft/mgt-element';
import { ElectronProvider } from '@microsoft/mgt-electron-provider/dist/Provider';
import '@microsoft/mgt-components';

//Initialize the auth provider globally
Providers.globalProvider = new ElectronProvider();

添加内容并跟 Microsoft Graph 集成

比如我们要显示一个用户的待办任务，我们将使用如下三个组件：

将 index.html 页面的内容替换为如下内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My To-Do App</title>
    <script type="module" src="./dist/renderer.js"></script>
  </head>
  <body>
    <mgt-login></mgt-login>
    <mgt-person person-query="me" show-presence view="twoLines" ></mgt-person>
    <mgt-todo group-by-day></mgt-todo>
  </body>
</html>

可以运行应用看看效果了

npm start

在这里插入图片描述

根据用户的状态切换墙纸

再介绍一个有意思的效果，根据组织中用户的状态切换墙纸

首先安装更换墙纸的 npm 包

npm install wallpaper

要实现这个效果，我们有两个目标，一是判断是否有一个登录的用户，二是获取这个登录用户的状态并更换墙纸

获取是否有用户登录，我们可以注册 onStateChanged 事件，当登录状态发生改变时，globalProvider 会触发该事件

Providers.globalProvider.onStateChanged(async (e) => {
  if (Providers.globalProvider.state === ProviderState.SignedIn) {
    checkPresence();
  }
});

然后我们创建一个 checkPresence() 方法用来获取用户的状态，在这里我们需要用到获取状态的 API

const presence = await Providers.globalProvider.graph
  .api('/me/presence')
  .get();

接下来根据状态的不同，请自行获取几张有意思的壁纸用于不同状态的切换，我们这里跳过了

完整的 checkPresence() 方法如下

async function checkPresence() {
  setInterval(async function () {
    //Calling presence API to fetch presence data
    const presence = await Providers.globalProvider.graph
      .api('/me/presence')
      .get();

    if (presence.availability === 'DoNotDisturb') {
      await wallpaper.set(‘path-to-wallpaper1’);
    } else {
      if (presence.availability === 'Offline') {
        await wallpaper.set(‘path-to-wallpaper2’);
      } else {
        await wallpaper.set(path.join(‘path-to-wallpaper3’));
      }
    }
  }, 5000);
}