次の方法で共有

クイック スタート: サンプル デスクトップ アプリでユーザーをサインインする

適用対象: 白いチェック マーク記号が付いた緑の円。 従業員テナント 白いチェック マーク記号が付いた緑の円。 外部テナント (詳細はこちら)

このクイック スタートでは、サンプル アプリケーションを使用して、デスクトップ アプリケーションに認証を追加する方法について説明します。 サンプル アプリケーションを使用すると、ユーザーはサインインしてサインアウトし、Microsoft Authentication Library (MSAL) を使用して認証を処理できます。

開始する前に、このページの上部にある [テナントの種類 の選択] セレクターを使用して、テナントの種類を選択します。 Microsoft Entra ID には、 従業員 と 外部の 2 つのテナント構成が用意されています。 従業員テナントの構成は、従業員、内部アプリ、およびその他の組織リソースを対象としています。 外部テナントは、顧客向けのアプリ用です。

前提条件

  • アクティブなサブスクリプションを持つ Azure アカウント。 アカウントをまだお持ちでない場合は、無料アカウントを作成します。
  • この Azure アカウントには、アプリケーションを管理するためのアクセス許可が必要です。 以下のいずれの Microsoft Entra ロールにも、必要なアクセス許可が含まれています。
    • アプリケーション管理者
    • アプリケーション開発者
  • 従業員テナント。 既定のディレクトリを使用するか、 新しいテナントを設定できます。
  • この組織のディレクトリ内のアカウント専用に構成された Microsoft Entra 管理センターに新しいアプリを登録します。 詳細については、「 アプリケーションの登録 」を参照してください。 後で使用するために、アプリケーション の [概要 ] ページから次の値を記録します。
    • アプリケーション (クライアント) ID
    • ディレクトリ (テナント) ID

サンプル プロジェクトのダウンロード

注

このチュートリアルで提供される Electron サンプルは、MSAL ノードで動作するように特別に設計されています。 MSAL-browser は、Electron アプリケーションではサポートされていません。 プロジェクトを正しく設定するには、次の手順を実行してください。

  • サンプルを複製するには、コマンド プロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。

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

  • .zip ファイルをダウンロードします。 名前の長さが 260 文字未満のファイル パスに抽出します。

プロジェクトを構成する

コード エディター で、ms-identity-javascript-nodejs-desktop-main/App/authConfig.js ファイルを開きます。 値を次のように置き換えます。

変数 説明 例
Enter_the_Cloud_Instance_Id_Here アプリケーションが登録されている Azure クラウド インスタンス https://login.microsoftonline.com/ (末尾のスラッシュを含む)
Enter_the_Tenant_Info_Here テナント ID またはプライマリ ドメイン contoso.microsoft.com または aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here 登録したアプリケーションのクライアント ID 00001111-aaaa-2222-bbbb-3333cccc4444
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,
 };

アプリケーションを実行する

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

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

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

    npm start

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

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

次のステップ

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

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

前提条件

サンプル プロジェクトのダウンロード

注

このチュートリアルで提供される Electron サンプルは、MSAL ノードで動作するように特別に設計されています。 MSAL-browser は、Electron アプリケーションではサポートされていません。 プロジェクトを正しく設定するには、次の手順を実行してください。

デスクトップ アプリのサンプル コードを取得するには、.zip ファイルをダウンロードするか、次のコマンドを実行して、GitHub からサンプル Web アプリケーションを複製します。

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

.zip ファイルをダウンロードする場合は、パスの全長が 260 文字以下のフォルダーにサンプル アプリ ファイルを抽出します。

プロジェクトの依存関係をインストールする

  1. コンソール ウィンドウを開き、Electron サンプル アプリが含まれるディレクトリに移動します。

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

  2. 次のコマンドを実行してアプリの依存関係をインストールします。

    npm install && npm update

サンプル Web アプリを構成する

  1. コード エディターで、App\authConfig.js ファイルを開きます。

  2. プレースホルダーを見つけてください。

    1. Enter_the_Application_Id_Here を、前に登録したアプリのアプリケーション (クライアント) ID に置き換えます。

    2. Enter_the_Tenant_Subdomain_Here をディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント名がない場合は、テナントの詳細を読み取る方法を確認してください。

サンプル Web アプリを実行してテストする

これで、サンプルの Electron デスクトップ アプリをテストできます。 アプリを実行すると、デスクトップ アプリ ウィンドウが自動的に表示されます。

  1. ご利用のターミナルで、次のコマンドを実行します。

    npm start

    Electron デスクトップ アプリへのサインインのスクリーンショット。

  2. 表示されたデスクトップ ウィンドウで、[サインイン] または [サインアップ] ボタンを選択します。 ブラウザー ウィンドウが開き、サインインが求められます。

  3. ブラウザーのサインイン ページで、[メール アドレス] を入力して [次へ] を選択し、[パスワード] を入力してから [サインイン] を選択します。 アカウントをお持ちでない場合は、[アカウントをお持ちではない場合、作成できます] リンクを選択します。これで、サインアップ フローが開始されます。

  4. サインアップ オプションを選択した場合は、メール、ワンタイム パスコード、新しいパスワード、その他のアカウントの詳細を入力すると、サインアップ フロー全体が完了します。 以下のスクリーンショットのようなページが表示されます。 サインイン オプションを選択すると、同様のページが表示されます。 このページには、トークン ID 要求が表示されます。

    Electron デスクトップ アプリでのトークン要求の表示のスクリーンショット。

関連コンテンツ