Quickstart: Acquire an access token and call the Microsoft Graph API from an Electron desktop app

Article
10/23/2023

Welcome! This probably isn't the page you were expecting. While we work on a fix, this link should take you to the right article:

Quickstart: Sign in users and call Microsoft Graph from a Node.js desktop app

We apologize for the inconvenience and appreciate your patience while we work to get this resolved.

In this quickstart, you download and run a code sample that demonstrates how an Electron desktop application can sign in users and acquire access tokens to call the Microsoft Graph API.

This quickstart uses the Microsoft Authentication Library for Node.js (MSAL Node) with the authorization code flow with PKCE.

Prerequisites

Node.js
Visual Studio Code or another code editor

Step 1: Configure the application in Azure portal

For the code sample for this quickstart to work, you need to add a reply URL as msal://redirect.

Make this change for me

Already configured Your application is configured with these attributes.

Step 2: Download the Electron sample project

Download the code sample

Note

Enter_the_Supported_Account_Info_Here

Step 4: Run the application

You'll need to install the dependencies of this sample once:

npm install

Then, run the application via command prompt or console:

npm start

You should see application's UI with a Sign in button.

About the code

Below, some of the important aspects of the sample application are discussed.

MSAL Node

MSAL Node is the library used to sign in users and request tokens used to access an API protected by Microsoft identity platform. For more information on how to use MSAL Node with desktop apps, see this article.

You can install MSAL Node by running the following npm command.

npm install @azure/msal-node --save

MSAL initialization

You can add the reference for MSAL Node by adding the following code:

const { PublicClientApplication } = require('@azure/msal-node');

Then, initialize MSAL using the following code:

const MSAL_CONFIG = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Id_Here",
    },
};

const pca = new PublicClientApplication(MSAL_CONFIG);

Where: Description

clientId Is the Application (client) ID for the application registered in the Azure portal. You can find this value in the app's Overview page in the Azure portal.

authority The STS endpoint for user to authenticate. Usually https://login.microsoftonline.com/{tenant} for public cloud, where {tenant} is the name of your tenant or your tenant Id.

Where:	Description
`clientId`	Is the Application (client) ID for the application registered in the Azure portal. You can find this value in the app's Overview page in the Azure portal.
`authority`	The STS endpoint for user to authenticate. Usually `https://login.microsoftonline.com/{tenant}` for public cloud, where {tenant} is the name of your tenant or your tenant Id.

Requesting tokens

You can use MSAL Node's acquireTokenInteractive public API to acquire tokens via an external user-agent such as the default system browser.

const { shell } = require('electron');

try {
   const openBrowser = async (url) => {
       await shell.openExternal(url);
   };

   const authResponse = await pca.acquireTokenInteractive({
       scopes: ["User.Read"],
       openBrowser,
       successTemplate: '<h1>Successfully signed in!</h1> <p>You can close this window now.</p>',
       failureTemplate: '<h1>Oops! Something went wrong</h1> <p>Check the console for more information.</p>',
   });

   return authResponse;
} catch (error) {
   throw error;
}

Next steps

To learn more about Electron desktop app development with MSAL Node, see the tutorial:

Tutorial: Sign in users and call the Microsoft Graph API in an Electron desktop app

Share via