次の方法で共有

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

  • [アーティクル]

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

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

前提条件

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

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

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

ヒント

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

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

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

手順 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. このサンプルの依存関係を 1 回インストールする必要があります。

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

  2. 次に、コマンド プロンプトまたはコンソールを使用して、アプリケーションを実行します。

    npm start

  3. サインインを選択して、サインイン プロセスを開始します。

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

詳細情報

このサンプルのしくみ

ユーザーが初めて [サインイン] ボタンを選択すると、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 の呼び出しを行う