Quickstart: Sign in users in a sample Desktop app

In this quickstart, you’ll use a sample application to learn how to add authentication to a desktop application. The sample application enables users to sign in and sign out and uses the Microsoft Authentication Library (MSAL) to handle authentication.

A workforce tenant configuration is for your employees, internal apps, and other organizational resources.

Prerequisites

  • An Azure account with an active subscription. If you don't already have one, Create an account.
  • This Azure account must have permissions to manage applications. Any of the following Microsoft Entra roles include the required permissions:
    • Application Administrator
    • Application Developer
  • A workforce tenant. You can use your Default Directory or set up a new tenant.
  • Register a new app in the Microsoft Entra admin center, configured for Accounts in this organizational directory only. Refer to Register an application for more details. Record the following values from the application Overview page for later use:
    • Application (client) ID
    • Directory (tenant) ID

Download the sample project

Note

The Electron sample provided in this tutorial is specifically designed to work with MSAL-node. MSAL-browser is not supported in Electron applications. Ensure you to complete the following steps to set up your project correctly.

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

  • Download the .zip file. Extract it to a file path where the length of the name is fewer than 260 characters.

Configure the project

In your code editor, open the ms-identity-javascript-nodejs-desktop-main/App/authConfig.js file. Replace the value as follows:

Variable Description Example(s)
Enter_the_Cloud_Instance_Id_Here The Azure cloud instance in which your application is registered https://login.partner.microsoftonline.cn/ (include the trailing forward-slash)
Enter_the_Tenant_Info_Here Tenant ID or Primary domain contoso.microsoft.com or aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here Client ID of the application you registered 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Graph_Endpoint_Here The Microsoft Graph API cloud instance that your app will call https://microsoftgraph.chinacloudapi.cn/ (include the trailing forward-slash)

Your file should look similar to below:

const AAD_ENDPOINT_HOST = "https://login.partner.microsoftonline.cn/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://microsoftgraph.chinacloudapi.cn/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

Run the application

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

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. Then, run the application via command prompt or console:

    npm start

  3. Select Sign in to start the sign-in process.

    The first time you sign in, you're prompted to provide your consent to allow the application to sign you in and access your profile. After you're signed in successfully, you'll be redirected back to the application.

Next step

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