英語で読む 編集

次の方法で共有

Quickstart: Sign in users in a sample Desktop app

  • [アーティクル]
テナントの種類を選択する

Applies to: Green circle with a white check mark symbol. Workforce tenants Green circle with a white check mark symbol. External tenants (learn more)

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.

Before you begin, use the Choose a tenant type selector at the top of this page to select tenant type. Microsoft Entra ID provides two tenant configurations, workforce and external. A workforce tenant configuration is for your employees, internal apps, and other organizational resources. An external tenant is for your customer-facing apps.

Prerequisites

  • An Azure account with an active subscription. If you don't already have one, Create an account for free.
  • This Azure account must have permissions to manage applications. Any of the following Microsoft Entra roles include the required permissions:
    • Application Administrator
    • Application Developer
    • Cloud Application Administrator
  • 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 with the following configuration. For more information, see Register an application.
    • Name: msal-node-desktop
    • Supported account types: Accounts in this organizational directory only (Single tenant)

Add a redirect URI

You will need to add a redirect URI to your app registration. This URI is used to redirect users to the app after they have signed in.

To specify the app type and redirect URIs to your app registration, follow these steps:

  1. From the Overview page of your registered application, under Manage, select Authentication.
  2. On the Platform configurations page, select Add a platform > Mobile and desktop applications.
  3. In the Redirect URIs section, enter http://localhost.
  4. Select Configure.

Download the sample project

注意

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.microsoftonline.com/ (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://graph.microsoft.com/ (include the trailing forward-slash)

Your file should look similar to below:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // 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://graph.microsoft.com/"; // 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

Prerequisites

  • An Azure account with an active subscription. If you don't already have one, Create an account for free.
  • This Azure account must have permissions to manage applications. Any of the following Microsoft Entra roles include the required permissions:
    • Application Administrator
    • Application Developer
    • Cloud Application Administrator

Add a redirect URI

You will need to add a redirect URI to your app registration. This URI is used to redirect users to the app after they have signed in.

To specify your app type to your app registration, follow these steps:

  1. Under Manage, select Authentication.
  2. On the Platform configurations page, select Add a platform, and then select Mobile and desktop applications option.
  3. For the Custom redirect URIs enter http://localhost, then select Configure.
  4. Select Configure to save your changes.

Grant admin consent

Once you register your application, it gets assigned the User.Read permission. However, since the tenant is an external tenant, the customer users themselves can't consent to this permission. You as the tenant administrator must consent to this permission on behalf of all the users in the tenant:

  1. From the App registrations page, select the application that you created (such as ciam-client-app) to open its Overview page.

  2. Under Manage, select API permissions.

    1. Select Grant admin consent for <your tenant name>, then select Yes.
    2. Select Refresh, then verify that Granted for <your tenant name> appears under Status for the permission.

Download the sample project

注意

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 complete the following steps to set up your project correctly.

To get the desktop app sample code, download the .zip file or clone the sample web application from GitHub by running the following command:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

If you choose to download the .zip file, extract the sample app file to a folder where the total length of the path is 260 or fewer characters.

Install project dependencies

  1. Open a console window, and change to the directory that contains the Electron sample app:

    cd 1-Authentication\3-sign-in-electron\App

  2. Run the following commands to install app dependencies:

    npm install && npm update

Configure the sample web app

  1. In your code editor, open App\authConfig.js file.

  2. Find the placeholder:

    1. Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.

    2. Enter_the_Tenant_Subdomain_Here and replace it with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.

Run and test the sample web app

You can now test the sample Electron desktop app. After you run the app, the desktop app window appears automatically:

  1. In your terminal, run the following command:

    npm start

    Screenshot of sign in into an electron desktop app.

  2. On the desktop window that appears, select the Sign In or Sign up button. A browser window opens, and you're prompted to sign in.

  3. On the browser sign-in page, type your Email address, select Next, type your Password, then select Sign in. If you don't have an account, select No account? Create one link, which starts the sign-up flow.

  4. If you choose the sign-up option, after filling in your email, one-time passcode, new password and more account details, you complete the whole sign-up flow. You see a page similar to the following screenshot. You see a similar page if you choose the sign-in option. The page displays token ID claims.

    Screenshot of view token claims in an electron desktop app.

Related content