クイックスタート: Electron デスクトップ アプリケーションからアクセス トークンを取得して Microsoft Graph API を呼び出す

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

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

前提条件

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

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

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

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

  1. Azure portal にサインインします。
  2. 複数のテナントにアクセスできる場合は、トップ メニューの [ディレクトリとサブスクリプション] フィルター を使用して、アプリケーションを登録するテナントを選択します。
  3. Azure Active Directory を検索して選択します。
  4. [管理][アプリの登録] > [新規登録] の順に選択します。
  5. アプリケーションの 名前 を入力します (例: msal-node-desktop)。 この名前は、アプリのユーザーに表示される場合があります。また、後で変更することができます。
  6. [登録] を選択して、アプリケーションを作成します。
  7. [管理] で、 [認証] を選択します。
  8. [プラットフォームを追加] > [モバイル アプリケーションとデスクトップ アプリケーション] を選択します。
  9. [リダイレクト URI] セクションで、「msal://redirect」と入力します。
  10. [構成] をクリックします。

手順 1: Azure portal でのアプリケーションの構成

このクイックスタートのサンプル コードを動作させるには、応答 URL として msal://redirect を追加する必要があります。

構成済み アプリケーションはこれらの属性で構成されています。

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

注意

Enter_the_Supported_Account_Info_Here

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

  1. ディスクのルートに近いローカル フォルダー (例: C:/Azure-Samples) に ZIP ファイルを展開します。

  2. .env を編集し、TENANT_ID および CLIENT_ID フィールドの値を次のスニペットに置き換えます。

    "TENANT_ID": "Enter_the_Tenant_Id_Here",
    "CLIENT_ID": "Enter_the_Application_Id_Here"
    

    各値の説明:

    • Enter_the_Application_Id_Here - 登録したアプリケーションの アプリケーション (クライアント) ID
    • Enter_the_Tenant_Id_Here - この値を テナント ID または テナント名 (例: contoso.microsoft.com) に置き換えます。

ヒント

アプリケーション (クライアント) IDディレクトリ (テナント) ID の値を見つけるには、Azure portal 上でアプリの [概要] ページに移動します。

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

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

このサンプルの依存関係を 1 回インストールする必要があります。

npm install

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

npm start

[ サインイン ] ボタンを備えたアプリケーションの UI が表示されます。

コードについて

以降、サンプル アプリケーションのいくつかの重要な要素について説明します。

MSAL Node

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

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

npm install @azure/msal-node --save

MSAL の初期化

MSAL Node への参照を追加するには、次のコードを追加します。

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

続いて、次のコードを使用して MSAL を初期化します。

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);
各値の説明: 説明
clientId Azure portal に登録されているアプリケーションの "アプリケーション (クライアント) ID"。 この値は、Azure portal のアプリの [概要] ページで確認できます。
authority ユーザーが認証するための STS エンドポイント。 通常、パブリック クラウド上では https://login.microsoftonline.com/{tenant} です。{tenant} はご自分のテナントの名前またはテナント ID です。

トークンの要求

PKCE を使用した認可コード フローの第 1 段階では、適切なパラメーターを指定して認可コード要求を作成し、送信します。 次に、フローの第 2 段階で、認可コードの応答をリッスンします。 コードを取得したら、それと引き換えにトークンを取得します。

// The redirect URI you setup during app registration with a custom file protocol "msal"
const redirectUri = "msal://redirect";

const cryptoProvider = new CryptoProvider();

const pkceCodes = {
    challengeMethod: "S256", // Use SHA256 Algorithm
    verifier: "", // Generate a code verifier for the Auth Code Request first
    challenge: "" // Generate a code challenge from the previously generated code verifier
};

/**
 * Starts an interactive token request
 * @param {object} authWindow: Electron window object
 * @param {object} tokenRequest: token request object with scopes
 */
async function getTokenInteractive(authWindow, tokenRequest) {

    /**
     * Proof Key for Code Exchange (PKCE) Setup
     *
     * MSAL enables PKCE in the Authorization Code Grant Flow by including the codeChallenge and codeChallengeMethod
     * parameters in the request passed into getAuthCodeUrl() API, as well as the codeVerifier parameter in the
     * second leg (acquireTokenByCode() API).
     */

    const {verifier, challenge} = await cryptoProvider.generatePkceCodes();

    pkceCodes.verifier = verifier;
    pkceCodes.challenge = challenge;

    const authCodeUrlParams = {
        redirectUri: redirectUri
        scopes: tokenRequest.scopes,
        codeChallenge: pkceCodes.challenge, // PKCE Code Challenge
        codeChallengeMethod: pkceCodes.challengeMethod // PKCE Code Challenge Method
    };

    const authCodeUrl = await pca.getAuthCodeUrl(authCodeUrlParams);

    // register the custom file protocol in redirect URI
    protocol.registerFileProtocol(redirectUri.split(":")[0], (req, callback) => {
        const requestUrl = url.parse(req.url, true);
        callback(path.normalize(`${__dirname}/${requestUrl.path}`));
    });

    const authCode = await listenForAuthCode(authCodeUrl, authWindow); // see below

    const authResponse = await pca.acquireTokenByCode({
        redirectUri: redirectUri,
        scopes: tokenRequest.scopes,
        code: authCode,
        codeVerifier: pkceCodes.verifier // PKCE Code Verifier
    });

    return authResponse;
}

/**
 * Listens for auth code response from Azure AD
 * @param {string} navigateUrl: URL where auth code response is parsed
 * @param {object} authWindow: Electron window object
 */
async function listenForAuthCode(navigateUrl, authWindow) {

    authWindow.loadURL(navigateUrl);

    return new Promise((resolve, reject) => {
        authWindow.webContents.on('will-redirect', (event, responseUrl) => {
            try {
                const parsedUrl = new URL(responseUrl);
                const authCode = parsedUrl.searchParams.get('code');
                resolve(authCode);
            } catch (err) {
                reject(err);
            }
        });
    });
}
各値の説明: 説明
authWindow 現在実行中の Electron ウィンドウ。
tokenRequest 要求するスコープを含む (Microsoft Graph 用の "User.Read" またはカスタム Web API 用の "api://<Application ID>/access_as_user" など)

次の手順

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