Electron プロバイダー
Electron プロバイダーは 、MSAL ノード を使用してユーザーにサインインし、電子アプリケーションで Microsoft Graph で使用するトークンを取得します。
認証プロバイダーの詳細については、「プロバイダー」を参照してください。
作業の開始
パッケージをインストールする
npm install @microsoft/mgt-element @microsoft/mgt-electron-provider
レンダラー プロセス (フロントエンド) で ElectronProvider を初期化し、メイン プロセス (バックエンド) で ElectronAuthenticator を初期化する必要があります。
レンダラー プロセスでの ElectronProvider の初期化 (renderer.ts)
ElectronProvider は、(メイン プロセスで) ElectronAuthenticator と通信してアクセス トークンを要求し、コンポーネントが動作するために必要なログイン状態に関する情報を受け取る役割を担います。
import {Providers} from '@microsoft/mgt-element';
import {ElectronProvider} from '@microsoft/mgt-electron-provider/dist/Provider';
import '@microsoft/mgt-components';
const baseURL: GraphEndpoint = 'https://graph.microsoft.us'; // change the base URL
// initialize the auth provider globally
Providers.globalProvider = new ElectronProvider(baseUrl=baseURL);
メインプロセスでの ElectronAuthenticator の初期化 (メイン.ts)
ElectronAuthenticator は、MSAL 認証の構成変数の設定、アクセス トークンの取得、ElectronProvider との通信を担当します。 メイン プロセスで ElectronAuthenticator を初期化し、クライアント ID などの構成変数を設定します。
import { ElectronAuthenticator, MsalElectronConfig } from '@microsoft/mgt-electron-provider/dist/Authenticator';
let config: MsalElectronConfig = {
clientId: '<your_client_id>',
authority: '<your_authority_url>', //optional
mainWindow: mainWindow,
scopes: ['user.read'], // We recommend pre-consenting all the required scopes on the Microsoft Entra admin center
baseURL: 'https://graph.microsoft.us' // change this if you want to use a different M365 endpoint
};
ElectronAuthenticator.initialize(config);
| 属性 | 説明 |
|---|---|
| clientId | 文字列クライアント ID (「アプリ/クライアント ID の作成」を参照)。 必須です。 |
| scopes | サインイン時にユーザーが同意する必要があるスコープのコンマ区切り文字列。 推奨。 |
| authority | 機関文字列 - 既定値は共通の権限です。 シングル テナントのアプリの場合は、テナント ID またはテナント名を使用します。 たとえば、https://login.microsoftonline.com/[your-tenant-contoso.com または https://login.microsoftonline.com/[your-tenant-id] などです。 省略可能です。 |
| Mainwindow | 認証を必要とするメイン BrowserWindow のインスタンス。 |
| cachePlugin | トークンの永続的なストレージに使用するキャッシュ プラグイン。 「 ノードの Microsoft 認証拡張機能」を参照してください。 省略可能です。 |
| base-url | Microsoft Graph 呼び出しに使用する Microsoft Graph エンドポイント。 サポートされている 任意の National クラウド デプロイを指定できます。 既定値は https://graph.microsoft.com です。 |
メモ： 現時点では、プロバイダーは増分サポートをサポートしていません。 ベスト プラクティスとして、コンポーネントに必要なすべてのスコープに必ず同意してください。
アプリ/クライアント ID の作成
Microsoft Entra IDに新しいアプリケーション登録を追加してクライアント ID を取得する
Microsoft Entra IDでアプリケーションを作成するには、新しいアプリケーション登録を追加し、アプリ名とリダイレクト URI を構成します。
Microsoft Entra IDでアプリを作成するには:
- Microsoft Entra 管理センターに移動します。
- [ID] メニュー>を展開し、[アプリケーション>] を選択アプリの登録> [新しい登録] ボタンを選択します。
- アプリの名前を入力します。たとえば、
My Electron-Appです。 - サポートされているアカウントの種類については、[任意の組織のディレクトリ (任意のMicrosoft Entra ディレクトリ - マルチテナント)] と個人用 Microsoft アカウント (Skype、Xbox など) を選択します。
- [ リダイレクト URI ] フィールドのドロップダウンで、[ パブリック クライアント/ネイティブ (モバイル & デスクトップ)] を選択し、[URL] フィールドに「」と入力
msal://redirectします。 - [登録] ボタンを選択して変更を確認します。
次の手順
- 電子アプリを構築するための詳細なチュートリアルをご覧ください。
- Electron プロバイダーの使用方法を示す サンプルの Electron アプリケーション を見てみましょう。