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

[アーティクル]
06/28/2024

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

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

Microsoft Entra 管理センターで Web API を登録して構成します。
Microsoft Entra 管理センターでクライアント Web アプリケーションを登録して構成します。
Microsoft Entra 管理センターでサインアップとサインインのユーザーフローを作成し、クライアント Web アプリをそれに関連付けます。
外部テナントの詳細を使用するように、サンプルの Node Web アプリケーションと ASP.NET Web API を更新します。
サンプル Web アプリケーションと API を実行してテストします。

前提条件

サンプルの Node.js Web アプリケーションでユーザーをサインインさせて API を呼び出すの記事の手順を完了します。この記事では、サンプルの Node.js Web アプリを使用してユーザーにサインインする方法について説明します。
Visual Studio Code、または別のコードエディター。
Node.js。
.NET 7.0 以降。
外部テナント。お持ちでない場合は、無料試用版にサインアップしてください。

Web API の登録

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

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

アプリケーション開発者以上として Microsoft Entra 管理センターにサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを使用し、[ディレクトリとサブスクリプション] メニューから外部テナントに切り替えます。
[ID]>[アプリケーション]>[アプリの登録] を参照します。
[+ 新規登録] を選択します。
表示される [アプリケーションの登録] ページで、アプリケーションの登録情報を入力します。
1. [名前] セクションで、アプリのユーザーに表示されるわかりやすいアプリケーション名 (ciam-ToDoList-api など) を入力します。
2. [サポートされているアカウントの種類] で、 [この組織のディレクトリ内のアカウントのみ] を選択します。
[登録] を選択して、アプリケーションを作成します。
登録が完了すると、アプリケーションの [概要] ペインが表示されます。アプリケーションのソースコードで使用するディレクトリ (テナント) ID とアプリケーション (クライアント) ID を記録します。

API スコープを構成する

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

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

[アプリの登録] ページで、作成した API アプリケーション (ciam-ToDoList-api) を選択して [概要] ページを開きます。
[管理] の [API の公開] を選択します。
ページ上部の [アプリケーション ID URI] の横にある [追加] リンクを選択して、このアプリに一意の URI を生成します。
提案されたアプリケーション ID URI (api://{clientId} など) を受け入れ、[保存] を選択します。 Web アプリケーションで Web API のアクセストークンを要求すると、API に対して定義する各スコープのプレフィックスとしてこの URI が追加されます。
[この API で定義されるスコープ] で、 [スコープの追加] を選択します。

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

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

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

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

[管理] で、[マニフェスト] を選択して API マニフェストエディターを開きます。
accessTokenAcceptedVersion プロパティを 2 に設定します。
[保存] を選択します。

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

アプリロールを構成する

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

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

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

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

もう一度 [アプリロールの作成] を選択し、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 のアクセス許可を付与するには、次の手順に従います。

[アプリの登録] ページで、作成したアプリケーション (例: ciam-client-app) を選択して [概要] ページを開きます。
[管理] の下にある [API のアクセス許可] を選択します。
[構成されたアクセス許可] の下で [アクセス許可の追加] を選択します。
[所属する組織で使用している API] タブを選択します。
API の一覧で、API (ciam-ToDoList-api など) を選択します。
[委任されたアクセス許可] オプションを選択します。
アクセス許可の一覧で [ToDoList.Read, ToDoList.ReadWrite] を選択します (必要に応じて検索ボックスを使用します)。
[アクセス許可の追加] ボタンを選択しますこの時点で、アクセス許可が正しく割り当てられます。ただし、このテナントは顧客のテナントであるため、コンシューマーユーザー自身がこれらのアクセス許可に同意することはできません。この問題に対処するには、管理者が次のように、テナント内のすべてのユーザーに代わってこれらのアクセス許可に同意する必要があります。
1. [<ご使用のテナント名> に管理者の同意を与えます] を選択してから、[はい] を選択します。
2. [最新の情報に更新] を選択し、両方のスコープの [状態] に、"<テナント名> に付与されました" と表示されていることを確認します。
[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 文字未満のファイルパスに抽出します。

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

コンソールウィンドウを開き、Node.js/Express サンプルアプリが含まれるディレクトリに移動します。
```
cd 2-Authorization\4-call-api-express\App
```
次のコマンドを実行して Web アプリの依存関係をインストールします。
```
npm install && npm update
```

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

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

コードエディターで、App\authConfig.js ファイルを開きます。
次のプレースホルダーを見つけます。
- 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 サンプルでアプリの登録を使用するには:

コードエディターで、API\ToDoListAPI\appsettings.json ファイルを開きます。
次のプレースホルダーを見つけます。
- 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 を実行してテストする

コンソールウィンドウを開き、次のコマンドを使用して Web API を実行します。
```
cd 2-Authorization\4-call-api-express\API\ToDoListAPI
dotnet run
```
次のコマンドを使用して Web アプリクライアントを実行します。
```
cd 2-Authorization\4-call-api-express\App
npm start
```
ブラウザーを開き、http://localhost:3000. に移動します
[サインイン] ボタンを選択します。サインインするように求められます。
サインインページで、[メールアドレス] を入力して [次へ] を選択し、[パスワード] を入力してから [サインイン] を選択します。アカウントをお持ちでない場合は、[アカウントをお持ちではない場合、作成できます] リンクを選択します。これで、サインアップフローが開始されます。
サインアップオプションを選択した場合は、メール、ワンタイムパスコード、新しいパスワード、その他のアカウントの詳細を入力すると、サインアップフロー全体が完了します。以下のスクリーンショットのようなページが表示されます。サインインオプションを選択すると、同様のページが表示されます。

API の呼び出し

API を呼び出すには、[View your todolist] (Todolist の表示) リンクを選択します。以下のスクリーンショットのようなページが表示されます。
項目を作成および削除して、To Do リストを操作します。

しくみ

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

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

次の方法で共有

前提条件