![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/03\/image0-1024x469.jpg\")
<\/p>\nIn today\u2019s Microsoft Graph Mailbag post, we\u2019ll explain how to build a Microsoft Graph-powered Electron application. For authentication, we\u2019ll use the Electron provider, an authentication provider in the Microsoft Graph Toolkit that\u2019s built specifically for Electron.<\/p>\n
<\/p>\n
This blog post covers the following:<\/p>\n
The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic components, and authentication providers for accessing and working with Microsoft Graph. If you want to learn more about the Microsoft Graph Toolkit, see the\u00a0A Lap around Microsoft Graph Toolkit<\/a> blog series, <\/u>and see the \u00a0Microsoft Graph Toolkit overview<\/a>.<\/p>\n Please be sure to follow this blog series using\u00a0https:\/\/aka.ms\/MSGraphMailbag<\/a>\u00a0or with RSS using\u00a0https:\/\/developer.microsoft.com\/en-us\/graph\/blogs\/feed\/?tag=MSGraphMailbag<\/a>.<\/p>\n The Electron provider can be used to authenticate and access Microsoft Graph in an Electron application with just a few lines of code. In this post, we\u2019ll build a\u00a0 \u00a0application that allows you to view and edit your to do tasks. You will also use the Electron provider for authentication and add some other Microsoft Graph Toolkit components to make your application look better.<\/p>\n There\u2019s more! This app will also have a fun feature that changes your desktop wallpaper based on your presence status fetched from Microsoft Graph, just to give you that extra push of motivation to focus when you really need to!<\/p>\n This section will walk through the steps to create a simple Electron application. If you are new to Electron or want to learn more about the provider\u2019s capabilities, such as caching tokens, see Electron provider<\/a>.<\/p>\n First, clone the electron-quickstart-typescript<\/a> repository on GitHub. We will be building on top of this boilerplate code.<\/p>\n Install all the necessary packages for this project.<\/p>\n Install the\u00a0@microsoft\/mgt-electron-provider\u00a0and\u00a0@microsoft\/mgt-element\u00a0npm packages as well. These will allow you to provide authentication for your app using MSAL and use the Microsoft Graph Toolkit components.<\/p>\n Install the ‘@microsoft\/mgt-components’ package that contains all the Microsoft Graph-connected web components.<\/p>\n Confirm that you can run the app:<\/p>\n To enable authentication on your app, you will need to initialize two classes: ElectronAuthenticator <\/em>and ElectronProvider,<\/em> in the main and renderer processes respectively. ElectronAuthenticator <\/em>is responsible for setting up the configuration variables for MSAL<\/a> authentication and acquiring access tokens. Because these tokens are needed by the components in the UI to call Microsoft Graph, we have an ElectronProvider <\/em>(in the renderer process) that communicates with ElectronAuthenticator\u00a0<\/em>(in the main process) to request access tokens and receive information regarding signed in state.<\/p>\n Initialize the\u00a0ElectronAuthenticator<\/em>\u00a0in the main process and set up the configuration variables such as client ID and required scopes.<\/p>\n First, open\u00a0src\/main.ts<\/em>\u00a0and import\u00a0ElectronAuthenticator\u00a0and\u00a0MsalElectronConfig as follows:<\/p>\n Next, add these lines of code in the\u00a0createWindow()<\/em>\u00a0function to initialize the ElectronAuthenticator, right after where\u00a0mainWindow<\/em>\u00a0is declared.<\/p>\n To initialize the\u00a0ElectronProvider<\/em>, add the following code to the src\/renderer.ts file. In this code snippet, we\u2019re also importing all the MGT components so we can use them in our HTML code.<\/p>\n And that\u2019s it! Authentication, check!<\/p>\n You can now use the Microsoft Graph Toolkit components in your index.html<\/em> page and show the user’s To Do tasks. For this, we\u2019re going to be using three toolkit components:<\/p>\n Replace the content of the\u00a0index.html<\/em>\u00a0page with the following.<\/p>\n We are now done with the basic version of this app!<\/p>\n You can run the app with this command:<\/p>\n Your app should now look like:<\/p>\n That\u2019s how simple it is to get started with the toolkit and Electron \ud83d\ude0a.<\/p>\n Now for the fun part! Let\u2019s enable this app to change the desktop wallpaper based on the user\u2019s presence.<\/p>\n First, l install an npm package<\/a> that makes it easy to change the desktop wallpaper:<\/p>\n Now, our aim is to detect the state of the signed in user, and change the wallpaper based on their presence. This means we need to:<\/p>\n To determine whether a user is signed in, in the renderer process, subscribe to the onStateChanged<\/strong> event that is fired by the globalProvider <\/strong>whenever there is a change in the sign-in state.<\/p>\n Now, define your checkPresence() function.<\/p>\n For this, we need to call the presence API<\/a>. One of my favorite things about the Microsoft Graph Toolkit is that it doesn\u2019t restrict you to use only the existing components, but also provides you with an authenticated client that you can use to call any Microsoft Graph API you want, with just a few lines of code.<\/p>\n Now, we have our presence object. We recommend that you run console.log(presence) before the next step, just to know what the object looks like.<\/p>\n Let\u2019s change the wallpaper in three situations. One, when the user\u2019s presence is Do Not Disturb the other when it is Offline, and the last one for all others. We will need to use three different wallpapers.<\/p>\n Now, you may proceed to spend an embarrassing amount of time looking up stuff like \u201cfunny giraffe motivational wallpapers\u201d \u2026.No I didn\u2019t do that :P.<\/p>\n Finally, let\u2019s complete our checkPresence() function.<\/p>\n As you may have noticed, I have set an interval of 5 seconds which is how often the presence API will be queried.<\/p>\n We\u2019re all done! Now you have an Electron application that you can sign in to and authenticate using the Electron provider, display your to-do tasks, and change your wallpaper based on your Teams status.<\/p>\n The working sample is on GitHub<\/a> if you want to run it locally and check it out.<\/p>\n That\u2019s all folks! The giraffe is right, I need to get back to work. See you next time!<\/p>\n <\/p>\nGetting started<\/h4>\n
Create an Electron app and add the Electron provider<\/h4>\n
git clone https:\/\/github.com\/electron\/electron-quick-start-typescript.git<\/a><\/pre>\n
npm install<\/pre>\n
npm i @microsoft\/mgt-element @microsoft\/mgt-electron-provider<\/pre>\n
npm i @microsoft\/mgt-components<\/pre>\n
npm start<\/pre>\n
Initializing the provider<\/h4>\n
import {\n ElectronAuthenticator,\n MsalElectronConfig,\n} from '@microsoft\/mgt-electron-provider\/dist\/Authenticator';<\/pre>\n\n
const\u00a0config:\u00a0MsalElectronConfig\u00a0=\u00a0{\nclientId: '<your_client_id>',\nmainWindow: mainWindow, \/\/BrowserWindow instance that requires auth\nscopes: [\n'user.read',\n'people.read',\n'user.readbasic.all',\n'contacts.read',\n'presence.read.all',\n'presence.read',\n'user.read.all',\n'calendars.read',\n'Sites.Read.All',\n'Sites.ReadWrite.All',\n],\n};\nElectronAuthenticator.initialize(config);<\/pre>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/03\/image1.jpg\")
<\/p>\nAdding content and Microsoft Graph integrations<\/h3>\n
\n
<!DOCTYPE\u00a0html>\n<html>\n <head>\n <meta charset=\"UTF-8\" \/>\n <title>My To-Do App<\/title>\n <script type=\"module\" src=\".\/dist\/renderer.js\"><\/script>\n <\/head>\n <body>\n <mgt-login><\/mgt-login>\n <mgt-person person-query=\"me\" show-presence view=\"twoLines\" ><\/mgt-person>\n <mgt-todo group-by-day><\/mgt-todo>\n <\/body>\n<\/html><\/pre>\n
npm start<\/pre>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/03\/image2.gif\")
<\/p>\nChange your wallpaper based on presence data<\/h4>\n
npm install wallpaper<\/pre>\n
\n
Providers.globalProvider.onStateChanged(async\u00a0(e)\u00a0=>\u00a0{\n if (Providers.globalProvider.state === ProviderState.SignedIn) {\n checkPresence();\n }\n});<\/pre>\nconst presence = await Providers.globalProvider.graph\n \u00a0.api('\/me\/presence')\n \u00a0.get();<\/pre>\nasync\u00a0function\u00a0checkPresence()\u00a0{\n \u00a0setInterval(async\u00a0function\u00a0()\u00a0{\n \u00a0\u00a0\u00a0\/\/Calling\u00a0presence\u00a0API\u00a0to\u00a0fetch\u00a0presence\u00a0data\n \u00a0\u00a0\u00a0const\u00a0presence\u00a0=\u00a0await\u00a0Providers.globalProvider.graph\n \u00a0\u00a0\u00a0\u00a0\u00a0.api('\/me\/presence')\n \u00a0\u00a0\u00a0\u00a0\u00a0.get();\n\n\u00a0\u00a0\u00a0\u00a0if\u00a0(presence.availability\u00a0===\u00a0'DoNotDisturb')\u00a0{\n \u00a0\u00a0\u00a0\u00a0\u00a0await\u00a0wallpaper.set(\u2018path-to-wallpaper1\u2019);\n \u00a0\u00a0\u00a0}\u00a0else\u00a0{\n \u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(presence.availability\u00a0===\u00a0'Offline')\u00a0{\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await\u00a0wallpaper.set(\u2018path-to-wallpaper2\u2019);\n \u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0else\u00a0{\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0await\u00a0wallpaper.set(path.join(\u2018path-to-wallpaper3\u2019));\n \u00a0\u00a0\u00a0\u00a0\u00a0}\n \u00a0\u00a0\u00a0}\n \u00a0},\u00a05000);\n}<\/pre>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/03\/image3.gif\")
<\/p>\n