クイック スタート: Node.js Web アプリでユーザーのサインインと Microsoft Graph API の呼び出しを行う
このクイックスタートでは、Node.js Web アプリのサンプルを使用して、承認コード フローを使用することでユーザーをサインインし、Microsoft Graph API を呼び出す方法を示します。 このサンプルでは、MSAL ノードを使用して認証を処理します。
前提条件
- Azure サブスクリプション。 Azure サブスクリプションを無料で作成します。
- Node.js
- Visual Studio Code または別のコード エディター
アプリケーションとレコードの識別子を登録する
登録を完了するには、アプリケーションに名前を指定し、サポートされているアカウントの種類を指定します。 登録すると、アプリケーションの [概要] ペインに、アプリケーションのソース コードに必要な識別子が表示されます。
Microsoft Entra 管理センターにサインインします。
複数のテナントにアクセスできる場合は、上部のメニューの [設定] アイコン
を使い、[ディレクトリとサブスクリプション] メニューからアプリケーションを登録するテナントに切り替えます。[ID]>[アプリケーション]>[アプリ登録] の順に進み、[新規登録] を選択します。
アプリケーションの[名前] (identity-client-web-app など) を入力します。
[サポートされているアカウントの種類] で、 [この組織のディレクトリ内のアカウントのみ] を選択します。 さまざまなアカウントの種類の詳細については、[選択に関するヘルプ] オプションを選択します。
[登録] を選択します。
登録が完了すると、アプリケーションの [概要] ペインが表示されます。 アプリケーションのソース コードで使用するディレクトリ (テナント) ID とアプリケーション (クライアント) ID を記録します。
Note
サポートされているアカウントの種類は、「アプリケーションによってサポートされるアカウントを変更する」を参照して変更することができます。
プラットフォーム リダイレクト URI を追加し、クライアント シークレットを作成する
アプリの登録に対してアプリの種類を指定するには、次の手順に従います。
- [管理] で、 [認証] を選択します。
- [プラットフォーム構成] で、[プラットフォームの追加] を選択し、[Web] を選択 します。
- [リダイレクト URI] には、「
http://localhost:3000/auth/redirect」と入力します。 - [フロントチャネル ログアウト URL] で、サインアウト用に「
https://localhost:5001/signout-callback-oidc」と入力します。 - [構成] を選択して変更を保存します。
- [管理] で、[証明書とシークレット]>[クライアント シークレット]>[新しいクライアント シークレット] の順に選択します。 説明を選び、次に [追加] を選びます。
- 後で使用するために、 [クライアント シークレット] の値を書き留めます。 この値が表示されるのは 1 回のみです。
サンプル アプリケーションをクローンまたはダウンロードする
サンプル アプリケーションを取得するには、GitHub から複製するか、.zip ファイルとしてダウンロードします。
サンプルをクローンするには、コマンド プロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。
git clone https://github.com/Azure-Samples/ms-identity-node.git.zip ファイルをダウンロードします。 名前の長さが 260 文字未満のファイル パスに抽出します。
プロジェクトを構成する
プロジェクトを展開し、ms-identity-node-main フォルダーを開き、App フォルダーの下にある .env ファイルを開きます。 上記の値を次のように置き換えます。
| 変数 | 説明 | 例 |
|---|---|---|
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_Client_Secret_Here |
登録したアプリケーションのクライアントシークレット | A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u |
Enter_the_Graph_Endpoint_Here |
アプリが呼び出す Microsoft Graph API クラウド インスタンス | https://graph.microsoft.com/ (末尾のスラッシュを含む) |
Enter_the_Express_Session_Secret_Here |
Express session cookie の署名に使用されるランダムな文字列 | A1b-C2d_E3f.H4... |
ファイルは次のようになります。
CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...
REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000
GRAPH_API_ENDPOINT=https://graph.microsoft.com/
EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k
アプリケーションを実行し、サインインします
Node.js を使用してプロジェクトを実行します。
サーバーを起動するために、プロジェクト ディレクトリ内から次のコマンドを実行します。
cd App npm install npm start「
http://localhost:3000/」を参照してください。サインインを選択して、サインイン プロセスを開始します。
初めてサインインするときには、アプリケーションがサインインしてプロファイルにアクセスすることを許可することに同意するように求められます。 正常にサインインすると、アプリケーションのホーム ページにリダイレクトされます。
詳細情報
このサンプルのしくみ
このサンプルは、localhost のポート 3000 で Web サーバーをホストします。 Web ブラウザーがこのアドレスにアクセスすると、アプリはホーム ページをレンダリングします。 ユーザーが サインインを選択すると、アプリは MSAL Node ライブラリによって生成された URL を介して、ブラウザーを Microsoft Entra サインイン画面にリダイレクトします。 ユーザーの同意後、ブラウザーは ID とアクセス トークンと共に、ユーザーをアプリケーションのホーム ページにリダイレクトします。
MSAL Node
MSAL Node ライブラリは、ユーザーをサインインさせ、Microsoft ID プラットフォームによって保護された API へのアクセスに使用されるトークンを要求します。 次のように Node.js Package Manager (npm) を使用して、最新バージョンをダウンロードできます。
npm install @azure/msal-node
次のステップ
次の複数パートのチュートリアル シリーズで、ユーザーをサインインさせる ASP.NET Core Web アプリをビルドして詳細を学習します。