サンプルの Node.js Web アプリケーションでユーザーをサインインさせて Web API を呼び出す

このガイドでは、コード サンプルを使用して、Node.js Web アプリケーションで認証と承認を追加する方法を示します。 サンプル アプリケーションでは、Node.js Web アプリにユーザーをサインインさせ、.NET API を呼び出します。 認証と認可を有効にするには、外部テナントの詳細を使用します。 サンプル Web アプリケーションでは、Node 用の Microsoft Authentication Library (MSAL) を使用して認証を処理します。

この記事では、次のタスクを完了します。

• Microsoft Entra 管理センターで Web API を登録して構成します。

• 外部テナントの詳細を使用するように、サンプルの Node Web アプリケーションと ASP.NET Web API を更新します。

• サンプル Web アプリケーションと API を実行してテストします。

前提条件

• サンプルの Node.js Web アプリケーションでユーザーをサインインさせて API を呼び出すの記事の手順を完了します。 この記事では、サンプルの Node.js Web アプリを使用してユーザーにサインインする方法について説明します。
• Visual Studio Code、または別のコード エディター。
• Node.js。
• .NET 7.0 以降。
• 外部テナント。 作成するには、次のいずれかの方法を選択します。
  • (推奨) Microsoft Entra 外部 ID 拡張機能を使用して、Visual Studio Code 内で直接外部テナントを設定します。
  • Microsoft Entra 管理センターで新しい外部テナントを作成します。

Web API の登録

この手順では、Web および Web API アプリケーションの登録を作成し、Web API のスコープを指定します。

Web API アプリケーションを登録する

1. アプリケーション開発者以上として Microsoft Entra 管理センターにサインインします。

2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコン を使用し、[ディレクトリとサブスクリプション] メニューから外部テナントに切り替えます。

3. [ID]>[アプリケーション]>[アプリの登録] を参照します。

4. [+ 新規登録] を選択します。

5. 表示される [アプリケーションの登録] ページで、アプリケーションの登録情報を入力します。

   1. [名前] セクションで、アプリのユーザーに表示されるわかりやすいアプリケーション名 (ciam-ToDoList-api など) を入力します。

   2. [サポートされているアカウントの種類] で、 [この組織のディレクトリ内のアカウントのみ] を選択します。

6. [登録] を選択して、アプリケーションを作成します。

7. 登録が完了すると、アプリケーションの [概要] ペインが表示されます。 アプリケーションのソース コードで使用するディレクトリ (テナント) ID とアプリケーション (クライアント) ID を記録します。

API スコープを構成する

この API では、API を呼び出すためにクライアントが取得する必要があるアクセス許可を公開する必要があります。

クライアント アプリがユーザーのアクセス トークンを正常に取得するために、API は少なくとも 1 つのスコープ (委任されたアクセス許可とも呼ばれます) を発行する必要があります。 スコープを発行するには、次の手順に従います。

1. [アプリの登録] ページで、作成した API アプリケーション (ciam-ToDoList-api) を選択して [概要] ページを開きます。

2. [管理] の [API の公開] を選択します。

3. ページ上部の [アプリケーション ID URI] の横にある [追加] リンクを選択して、このアプリに一意の URI を生成します。

4. 提案されたアプリケーション ID URI (api://{clientId} など) を受け入れ、[保存] を選択します。 Web アプリケーションで Web API のアクセス トークンを要求すると、API に対して定義する各スコープのプレフィックスとしてこの URI が追加されます。

5. [この API で定義されるスコープ] で、 [スコープの追加] を選択します。

6. API への読み取りアクセスを定義する次の値を入力した後に、[スコープの追加] を選択して変更を保存します。

   プロパティ	価値
   スコープ名	ToDoList.Read
   同意できるユーザー	管理者のみ
   管理者の同意の表示名	'TodoListApi' を使用してユーザーの ToDo リストを読み取る
   管理者の同意の説明	'TodoListApi' を使用して、アプリがユーザーの ToDo リストを読み取ることを許可します。
   State	有効

7. もう一度 [スコープの追加] を選択し、API への読み取りおよび書き込みアクセスを定義する次の値を入力します。 [スコープの追加] を選択して変更を保存します。

   プロパティ	価値
   スコープ名	ToDoList.ReadWrite
   同意できるユーザー	管理者のみ
   管理者の同意の表示名	'ToDoListApi' を使用した、ユーザーの ToDo リストの読み取りと書き込み
   管理者の同意の説明	'ToDoListApi' を使用して、アプリからユーザーの ToDo リストを読み書きできるようにする
   State	有効

8. [管理] で、[マニフェスト] を選択して API マニフェスト エディターを開きます。

9. accessTokenAcceptedVersion プロパティを 2 に設定します。

10. [保存] を選択します。

Web API のアクセス許可を発行するときの最小限の特権の原則について説明します。

アプリ ロールを構成する

API は、クライアント アプリが自身としてアクセス トークンを取得できるように、アプリケーションに対して少なくとも 1 つのアプリ ロール (アプリケーションのアクセス許可とも呼ばれます) を発行する必要があります。 アプリケーションのアクセス許可は、クライアント アプリケーションが自身として正常に認証できるようにして、ユーザーをサインインさせる必要がないようにする場合に、API が発行するアクセス許可の種類です。 アプリケーションのアクセス許可を発行するには、次の手順に従います。

1. [アプリの登録] ページから、作成したアプリケーション (ciam-ToDoList-api など) を選択して、その [概要] ページを開きます。

2. [管理] で、[アプリ ロール] を選択します。

3. [アプリ ロールの作成] を選択し、次の値を入力し、[適用] を選択して変更を保存します:

   プロパティ	先頭値
   表示名	ToDoList.Read.All
   Allowed member types (許可されるメンバーの種類)	アプリケーション
   値	ToDoList.Read.All
   説明	'ToDoListApi' を使用して、アプリがすべてのユーザーの ToDo リストを読むことができるようにする

4. もう一度 [アプリ ロールの作成] を選択し、2 番目のアプリ ロールに次の値を入力し、[適用] を選択して変更を保存します:

   プロパティ	先頭値
   表示名	ToDoList.ReadWrite.All
   Allowed member types (許可されるメンバーの種類)	アプリケーション
   値	ToDoList.ReadWrite.All
   説明	'ToDoListApi' を使用して、アプリがすべてのユーザーの ToDo リストを読み書きできるようにする

省略可能な要求の構成

オプションの idtyp 要求を使用すると、Web API がトークンがアプリ トークンなのかアプリ + ユーザー トークンなのかを判別しやすくなります。 scp および roles 要求の組み合わせは同じ目的に使用できますが、idtyp 要求の使用は、アプリ トークンとアプリ + ユーザー トークンを区別する最も簡単な方法です。 たとえば、トークンがアプリ専用トークンの場合、この要求の値は app です。

アクセス トークンに idtyp 要求を追加するには、「省略可能な要求の構成」の記事にある手順を使用します。

• [トークンの種類] で、[アクセス] を選択します。
• 省略可能な要求の一覧から [idtyp] を選択します。

Web アプリに API のアクセス許可を付与する

クライアント アプリ (ciam-client-app) に API のアクセス許可を付与するには、次の手順に従います。

1. [アプリの登録] ページで、作成したアプリケーション (例: ciam-client-app) を選択して [概要] ページを開きます。

2. [管理] の下にある [API のアクセス許可] を選択します。

3. [構成されたアクセス許可] の下で [アクセス許可の追加] を選択します。

4. [所属する組織で使用している API] タブを選択します。

5. API の一覧で、API (ciam-ToDoList-api など) を選択します。

6. [委任されたアクセス許可] オプションを選択します。

7. アクセス許可の一覧で [ToDoList.Read, ToDoList.ReadWrite] を選択します (必要に応じて検索ボックスを使用します)。

8. [アクセス許可の追加] ボタンを選択します この時点で、アクセス許可が正しく割り当てられます。 ただし、このテナントは顧客のテナントであるため、コンシューマー ユーザー自身がこれらのアクセス許可に同意することはできません。 この問題に対処するには、管理者が次のように、テナント内のすべてのユーザーに代わってこれらのアクセス許可に同意する必要があります。

   1. [<ご使用のテナント名> に管理者の同意を与えます] を選択してから、[はい] を選択します。

   2. [最新の情報に更新] を選択し、両方のスコープの [状態] に、"<テナント名> に付与されました" と表示されていることを確認します。

9. [Configured permissions] (構成されたアクセス許可) の一覧でToDoList.Read と ToDoList.ReadWrite のアクセス許可を一度に 1 つずつ選択し、後で使用するためにアクセス許可の完全な URI をコピーします。 完全なアクセス許可 URI は、api://{clientId}/{ToDoList.Read} または api://{clientId}/{ToDoList.ReadWrite} のようになります。

サンプル Web アプリケーションと Web API を複製またはダウンロードする

サンプル アプリケーションを取得するには、GitHub から複製するか、.zip ファイルとしてダウンロードします。

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

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

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

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

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

   cd 2-Authorization\4-call-api-express\App
   

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

   npm install && npm update
   

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

クライアント Web アプリのサンプルでアプリの登録を使用するには:

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

2. 次のプレースホルダーを見つけます。

   • Enter_the_Application_Id_Here を、前に登録したアプリのアプリケーション (クライアント) ID に置き換えます。
   • Enter_the_Tenant_Subdomain_Here を、ディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント名がない場合は、テナントの詳細を読み取る方法を確認してください。
   • Enter_the_Client_Secret_Here を、先ほどコピーしたアプリ シークレットの値に置き換えます。
   • Enter_the_Web_Api_Application_Id_Here を、先ほどコピーした Web API のアプリケーション (クライアント) ID に置き換えます。

Web API サンプルでアプリの登録を使用するには:

1. コード エディターで、API\ToDoListAPI\appsettings.json ファイルを開きます。

2. 次のプレースホルダーを見つけます。

   • Enter_the_Application_Id_Here を、コピーした Web API のアプリケーション (クライアント) ID に置き換えます。
   • Enter_the_Tenant_Id_Here を、先ほどコピーしたディレクトリ (テナント) ID に置き換えます。
   • Enter_the_Tenant_Subdomain_Here を、ディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント名がない場合は、テナントの詳細を読み取る方法を確認してください。

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

1. コンソール ウィンドウを開き、次のコマンドを使用して Web API を実行します。

   cd 2-Authorization\4-call-api-express\API\ToDoListAPI
   dotnet run
   

2. 次のコマンドを使用して Web アプリ クライアントを実行します。

   cd 2-Authorization\4-call-api-express\App
   npm start
   

3. ブラウザーを開き、http://localhost:3000. に移動します

4. [サインイン] ボタンを選択します。 サインインするように求められます。

   

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

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

   

API の呼び出し

1. API を呼び出すには、[View your todolist] (Todolist の表示) リンクを選択します。 以下のスクリーンショットのようなページが表示されます。

   

2. 項目を作成および削除して、To Do リストを操作します。

しくみ

タスクを表示、追加、または削除するたびに、API 呼び出しをトリガーします。 API 呼び出しをトリガーするたびに、クライアント Web アプリは API エンドポイントを呼び出すために必要なアクセス許可 (スコープ) を持つアクセス トークンを取得します。 たとえば、タスクを読み取るために、クライアント Web アプリは ToDoList.Read アクセス許可/スコープを持つアクセス トークンを取得する必要があります。

Web API エンドポイントで、クライアント アプリによって提供されるアクセス トークンのアクセス許可またはスコープが有効かどうかを確認する必要があります。 アクセス トークンが有効な場合、エンドポイントは HTTP 要求に応答し、それ以外の場合は 401 Unauthorized の HTTP エラーで応答します。

関連するコンテンツ

• 独自の Node.js Web アプリケーションでユーザーをサインインさせて API を呼び出します。
• パスワードのリセットを有効にします。
• 既定のブランド化をカスタマイズします。
• Google でサインインを構成します。