次の方法で共有

クイック スタート - サンプル Node.js Web アプリでユーザーをサインインさせ、Web API を呼び出す

適用対象: 灰色の X 記号がある白い円。 従業員テナント 白いチェック マーク記号がある緑の円。 外部テナント (詳細情報)

このクイック スタートでは、ユーザーをサインインさせ、外部テナントの Node.js Web アプリケーションから Web API を呼び出す方法について説明します。 サンプル アプリケーションは.NET API を呼び出します。 サンプル Web アプリケーションでは、Node 用の Microsoft Authentication Library (MSAL) を使用して認証を処理します。

[前提条件]

API のスコープとロールを構成する

Web API を登録することで、クライアント アプリケーションが Web API へのアクセスを要求できるアクセス許可を定義するように API スコープを構成する必要があります。 さらに、ユーザーまたはアプリケーションで使用できるロールを指定するようにアプリ ロールを設定し、Web API を呼び出せるようにするために必要な API アクセス許可を Web アプリに付与する必要があります。

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 リストを読み取ることを許可します。
    状態 有効

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

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

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 とロール要求の組み合わせを同じ目的で使用できますが、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 に置き換えます。 Web API アプリは、前提条件の一環として以前に登録したものです。
    • 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 install
npm start

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

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

    ノード Web アプリへのサインインのスクリーンショット。

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

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

    ノード Web アプリへのサインインと API の呼び出しのスクリーンショット。

API の呼び出し

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

    API To Do リストを操作するスクリーンショット。

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

動作方法

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

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

関連コンテンツ