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

[アーティクル]
11/25/2023

このガイドでは、サンプルの 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 を実行してテストします。

前提条件

Visual Studio Code、または別のコードエディター。
Node.js。
.NET 7.0 以降。
外部テナント。お持ちでない場合は、無料試用版にサインアップしてください。

Web アプリケーションと 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 です。

Web アプリを登録する

Microsoft Entra を使用してアプリケーションでユーザーをサインインできるようにするには、作成するアプリケーションを Microsoft Entra 外部 ID に認識させる必要があります。アプリの登録によって、アプリと Microsoft Entra の間に信頼関係が確立されます。アプリケーションを登録すると、外部 ID によって、アプリケーション (クライアント) ID と呼ばれる一意識別子が生成されます。これは、認証要求を作成するときにアプリを識別するために使用される値です。

Microsoft Entra 管理センターにアプリを登録する方法を次の手順に示します。

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

アプリの登録に対してアプリの種類を指定するには、次の手順に従います。

[管理] で、 [認証] を選択します。
[プラットフォーム構成] で、[プラットフォームの追加] を選択し、[Web] を選択します。
[リダイレクト URI] には、「http://localhost:3000/auth/redirect」と入力します。
[構成] を選択して変更を保存します。

クライアントシークレットの作成

登録したアプリケーションに対してクライアントシークレットを作成します。 Web アプリケーションでは、トークンを要求するときに、このクライアントシークレットを使って自身の ID を証明します。

[アプリの登録] ページで、作成したアプリケーション ("ciam-client-app" など) を選択して、その [概要] ページを開きます。
[管理] で、[証明書とシークレット] を選択します。
[新しいクライアントシークレット] を選択します。
[説明] ボックスにクライアントシークレットの説明を入力します (例、ciam app client secret)。
[有効期限] で、シークレットが (組織のセキュリティ規則に基づいて) 有効な期間を選択してから、[追加] を選択します。
シークレットの値を記録します。この値は、後の手順での構成に使用します。シークレットの値は再表示されず、[証明書とシークレット] から移動した後はどのような手段でも取得できません。必ず記録しておくようにしてください。

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} のようになります。

ユーザーフローを作成する

次の手順に従って、顧客がアプリケーションにサインインまたはサインアップするために使用できるユーザーフローを作成します。

Microsoft Entra 管理センターに少なくとも外部 ID ユーザーフロー管理者としてサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを使用して、[ディレクトリとサブスクリプション] メニューから外部テナントに切り替えます。
[ID]>[External Identities]>[ユーザーフロー] に移動します。
[+ 新しいユーザーフロー] を選択します。
[作成] ページで、次のようにします。
1. ユーザーフローの [名前] ("SignInSignUpSample" など) を入力します。
2. [ID プロバイダー] の一覧で、[メールアカウント] を選択します。この ID プロバイダーを使用すると、ユーザーが自分のメールアドレスを使用してサインインまたはサインアップできます。
  
  注意
  
  追加の ID プロバイダーは、それらとのフェデレーションを設定した後にのみここに一覧表示されます。たとえば、Google または Facebook とのフェデレーションを設定すると、それらの追加 ID プロバイダーをここで選択できます。
3. [メールアカウント] で、2 つのオプションのいずれかを選択できます。このチュートリアルでは、[Email with password] (メールアドレスとパスワード) を選択します。
  - [Email with password] (メールアドレスとパスワード): 新しいユーザーは、サインイン名としてメールアドレスを、その最初の要素の資格情報としてパスワードを使用してサインアップおよびサインインできます。
  - メールのワンタイムパスコード: 新しいユーザーが、サインイン名としてメールアドレスを、最初の要素の資格情報としてメールのワンタイムパスコードを使用してサインアップおよびサインインできるようにします。このオプションをユーザーフローレベルで使用可能にするには、メールのワンタイムパスコードをテナントレベルで有効にする必要があります ([All Identity Providers] (すべての ID プロバイダー)>[メールのワンタイムパスコード])。
4. [ユーザー属性] で、サインアップ時にユーザーから収集する属性を選択します。 [さらに表示] を選択すると、[国または地域]、[表示名]、[郵便番号] の属性と要求を選択できます。 [OK] を選択します。 (ユーザーは、初めてサインアップするときにのみ属性の入力を求められます)。
［作成］ を選択します新しいユーザーフローは [ユーザーフロー] の一覧に表示されます。必要に応じて、ページを更新してください。

セルフサービスパスワードリセットを有効にするには、「セルフサービスパスワードリセットを有効にする」の記事の手順を使用します。

Web アプリケーションをユーザーフローに関連付ける

ユーザーフローには多くのアプリケーションを関連付けることができますが、1 つのアプリケーションは 1 つのユーザーフローにしか関連付けることができません。ユーザーフローを使用すると、特定のアプリケーション用のユーザーエクスペリエンスを構成できます。たとえば、ユーザーにメールアドレスを使用してサインインまたはサインアップすることを要求するユーザーフローを構成できます。

サイドバーメニューで、[ID] を選択します。
[External Identities]、[User flows] (ユーザーフロー) の順に選択します。
[ユーザーフロー] ページで、前に作成した [ユーザーフロー名] (SignInSignUpSample など) を選びます。
[使用] で、[アプリケーション] を選択します。
[アプリケーションの追加] をクリックします。
一覧からアプリケーション ("ciam-client-app" など) を選択するか、検索ボックスを使用してアプリケーションを見つけ、それを選択します。
[選択] を選択します。

サンプル 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 エラーで応答します。

次の方法で共有

前提条件