クイックスタート: Node.js デスクトップアプリでユーザーのサインインと Microsoft Graph の呼び出しを行う

[アーティクル]
04/09/2024

このクイックスタートでは、Electron デスクトップアプリケーションでユーザーのサインイン処理を行い、アクセストークンを取得して Microsoft Graph API を呼び出す方法を示すコードサンプルをダウンロードして実行します。

このクイックスタートでは、PKCE を使用した認可コードフローで Node.js 用 Microsoft Authentication Library (MSAL Node) を使用します。

前提条件

Node.js
Visual Studio Code または別のコードエディター

サンプルアプリケーションを登録してダウンロードする

まず、以下の手順に従ってください。

手順 1:アプリケーションを登録する

ヒント

この記事の手順は、開始するポータルによって若干異なる場合があります。

アプリケーションを登録し、その登録情報をソリューションに手動で追加するには、次の手順を実行します。

クラウドアプリケーション管理者以上として Microsoft Entra 管理センターにサインインします。
複数のテナントにアクセスできる場合は、上部のメニューの [設定] アイコンを使い、[ディレクトリとサブスクリプション] メニューからアプリケーションを登録するテナントに切り替えます。
[ID]>[アプリケーション]>[アプリの登録] に移動し、[新規登録] を選びます。
アプリケーションの名前を入力します (例: msal-node-desktop)。この名前は、アプリのユーザーに表示される場合があります。また、後で変更することができます。
[登録] を選択して、アプリケーションを作成します。
[管理] で、 [認証] を選択します。
[プラットフォームを追加]>[モバイルアプリケーションとデスクトップアプリケーション] を選択します。
[リダイレクト URI] セクションで、「http://localhost」と入力します。
[構成] をクリックします。

手順 2: Electron サンプルプロジェクトのダウンロード

コードサンプルをダウンロードします

手順 3: Electron サンプルプロジェクトの構成

*プロジェクトを抽出し、ms-identity-JavaScript-nodejs-desktop-main フォルダーを開き、.authConfig.js ファイルを開きます。値を次のように置き換えます。

変数	説明	例
`Enter_the_Cloud_Instance_Id_Here`	アプリケーションが登録されている Azure クラウドインスタンス	`https://login.microsoftonline.com/` (末尾のスラッシュを含む)
`Enter_the_Tenant_Id_Here`	テナント ID またはプライマリドメイン	`contoso.microsoft.com` または `aaaabbbb-0000-cccc-1111-dddd2222eeee`
`Enter_the_Application_Id_Here`	登録したアプリケーションのクライアント ID	`00001111-aaaa-2222-bbbb-3333cccc4444`
`Enter_the_Redirect_Uri_Here`	登録したアプリケーションのリダイレクト URI	`msal00001111-aaaa-2222-bbbb-3333cccc4444://auth`
`Enter_the_Graph_Endpoint_Here`	アプリが呼び出す Microsoft Graph API クラウドインスタンス	`https://graph.microsoft.com/` (末尾のスラッシュを含む)

ファイルは次のようになります。

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,
 };

手順 4:アプリケーションの実行

このサンプルの依存関係を 1 回インストールする必要があります。
```
cd ms-identity-javascript-nodejs-desktop-main
npm install
```
次に、コマンドプロンプトまたはコンソールを使用して、アプリケーションを実行します。
```
npm start
```
サインインを選択して、サインインプロセスを開始します。

初めてサインインするときには、アプリケーションがサインインしてプロファイルにアクセスすることを許可することに同意するように求められます。正常にサインインすると、アプリケーションにリダイレクトされます。

詳細情報

このサンプルのしくみ

ユーザーが初めて [サインイン] ボタンを選択すると、MSAL Node の acquireTokenInteractive メソッドが呼び出されます。このメソッドは、ユーザーが Microsoft ID プラットフォームエンドポイントを使用してサインインするようリダイレクトし、承認コードを取得し、アクセストークンと交換します。

MSAL Node

MSAL Node はユーザーのサインインを処理し、Microsoft ID プラットフォームによって保護されている API にアクセスするトークンを要求するために使用するライブラリです。デスクトップアプリケーションでの MSAL Node の使用方法の詳細については、この記事を参照してください。

MSAL Node は、次の npm コマンドを実行してインストールできます。

npm install @azure/msal-node --save

次の手順

MSAL Node を使用した Electron デスクトップアプリケーション開発については、次のチュートリアルを参照してください。

チュートリアル: Electron デスクトップアプリでユーザーのサインインと Microsoft Graph API の呼び出しを行う

クイック スタート: Node.js デスクトップ アプリでユーザーのサインインと Microsoft Graph の呼び出しを行う