次の方法で共有

クイック スタート - サンプル Node.js Web アプリでプロファイルを編集する

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

このクイック スタートでは、Web アプリ Node.js サンプルを使用して、Web アプリでサインインとプロファイルの編集を追加する方法について説明します。 このサンプル Web アプリでは、Microsoft Authentication Library for Node (MSAL Node) と Microsoft Graph API を使用して、サインインとプロファイルの編集操作を完了します。 プロファイルの編集操作では、ユーザーが多要素認証 (MFA) を完了する必要があります。

前提条件

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

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

EditProfileService アプリの API スコープを構成する

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

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

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

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

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

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

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

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

    プロパティ 価値
    スコープ名 EditProfileService.ReadWrite
    誰が同意できるか 管理者のみ
    管理者の同意の表示名 クライアントがプロファイルの編集サービスを使用してプロファイルを編集する
    管理者の同意の説明 クライアント Web アプリがプロファイルの編集サービスを呼び出してプロファイルを編集できるスコープ。
    状態 有効

EditProfileService アプリに User.ReadWrite アクセス許可を付与する

User.ReadWrite は、ユーザーが自分のプロファイルを更新できるようにする Microsoft Graph API のアクセス許可です。 EditProfileService アプリに User.ReadWrite アクセス許可を付与するには、次の手順に従います。

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

  2. [管理] で API 許可を選択します。

  3. [Microsoft API] タブを選択し、[よく使用される Microsoft API] で [Microsoft Graph] を選択します。

  4. [委任されたアクセス許可] を選択し、アクセス許可の一覧で [User.ReadWrite] を検索して選択します。

  5. [アクセス許可の追加] ボタンを選択します。

  6. EditProfileService アプリに User.ReadWrite アクセス許可が正しく割り当てられている。 ただし、テナントは外部テナントであるため、顧客ユーザー自身がこれらのアクセス許可に同意することはできません。 テナント管理者は、テナント内のすべてのユーザーに代わってこのアクセス許可に同意する必要があります。

    1. [<テナント名> に管理者の同意を与えます] を選択してから、[はい] を選択します。
    2. [最新の情報に更新] を選択し、両方のスコープの < に、">テナント名 に付与されました" と表示されていることを確認します。

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

このセクションでは、前に登録したクライアント Web アプリ (前提条件) に API アクセス許可を付与します。

クライアント Web アプリに EditProfileService.ReadWrite アクセス許可を付与します。 このアクセス許可は EditProfileService アプリによって公開され、MFA を使用して更新プロファイル操作を保護します。 クライアント Web アプリに EditProfileService.ReadWrite アクセス許可を付与するには、次の手順に従います。

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

  2. [管理] で API 許可を選択します。

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

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

  5. API の一覧で、edit-profile-service などの API を選択します。

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

  7. アクセス許可の一覧から、[EditProfileService.ReadWrite] を選択します。

  8. [アクセス許可の追加] ボタンを選択します。

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

  10. *EditProfileService.ReadWrite アクセス許可がクライアント Web アプリに正しく割り当てられている。 ただし、テナントは外部テナントであるため、顧客ユーザー自身がこれらのアクセス許可に同意することはできません。 テナント管理者は、テナント内のすべてのユーザーに代わってこのアクセス許可に同意する必要があります。

    1. [<テナント名> に管理者の同意を与えます] を選択してから、[はい] を選択します。
    2. [最新の情報に更新] を選択し、両方のスコープの < に、">テナント名 に付与されました" と表示されていることを確認します。

条件付きアクセス MFA ポリシーを作成する

先ほど登録した EditProfileService アプリは、MFA で保護するリソースです。

MFA 条件付きアクセス (CA) ポリシーを作成するには、「アプリに多要素認証を追加する」の手順を使用します。 ポリシーを作成する際には、次の設定を使用します。

  • [名前] には、"MFA ポリシー" を使用します。
  • [ターゲット リソース] には、前に登録した EditProfileService API アプリ (edit-profile-service など) を選びます。

サンプル Web API を複製またはダウンロードする

サンプル アプリは前提条件から 複製済みですが、まだ複製していない場合は、GitHub から複製するか、.zip ファイルとしてダウンロードできます。

.zip ファイルをダウンロードするか、次のコマンドを実行して GitHub からサンプル Web アプリを複製します。

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

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

このコード サンプルには、クライアント Web アプリと API アプリ (EditProfileService アプリ) の 2 つのアプリが含まれています。 外部テナント設定を使用するには、これらのアプリを更新する必要があります。 そのためには、次の手順を行ってください。

  1. コード エディターで 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js ファイルを開き、次のプレースホルダーを検索します。

    • Enter_the_Application_Id_Here し、先ほど登録したクライアント Web アプリのアプリケーション (クライアント) ID に置き換えます。
    • Enter_the_Tenant_Subdomain_Here をディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント名がない場合は、テナントの詳細を読み取る方法を確認してください。
    • Enter_the_Client_Secret_Here し、先ほどコピーしたクライアント Web アプリのアプリ シークレット値に置き換えます。
    • graph_end_pointを Microsoft Graph API エンドポイントであるhttps://graph.microsoft.com/に置き換えます。
    • Add_your_protected_scope_here を API アプリ (EditProfileService アプリ) スコープに置き換えます。 この値は、api://{clientId}/EditProfileService.ReadWrite のようになります。 {clientId} は、先ほど登録した EditProfileService のアプリケーション (クライアント) ID 値です。

  2. コード エディターで 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js ファイルを開き、次のプレースホルダーを検索します。

    • Enter_the_Tenant_Subdomain_Here。これを、ディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント名がない場合は、テナントの詳細を読み取る方法を確認してください。
    • Enter_the_Tenant_ID_Here。これを、テナント ID に置き換えます。 テナント ID がわからない場合は、テナントの詳細を読み取る方法を確認してください。
    • Enter_the_Edit_Profile_Service_Application_Id_Here を使用して、 EditProfileService アプリケーションのアプリケーション (クライアント) ID 値に置き換えます。
    • Enter_the_Client_Secret_Here 前提条件の一部として作成されたクライアント シークレット値に置き換えます。
    • graph_end_pointを Microsoft Graph API エンドポイントであるhttps://graph.microsoft.com/に置き換えます。

プロジェクトの依存関係をインストールしてアプリを実行する

アプリをテストするには、クライアント アプリとサービス/API アプリの両方にプロジェクトの依存関係をインストールし、次にそれらのアプリを実行します。

  1. クライアント アプリを実行するには、ターミナル ウィンドウを開き、次のコマンドを実行します。

    cd 1-Authentication\7-edit-profile-with-mfa-express\App
npm install
npm start

  2. サービス/API の編集アプリを実行するには、ディレクトリをサービス/API の編集アプリ (1-Authentication\7-edit-profile-with-mfa-express\Api) に変更し、次のコマンドを実行します。

    npm install
npm start

  3. ブラウザーを開き、http://localhost:3000. に移動します SSL 証明書エラーが発生した場合は、.env ファイルを作成し、次の構成を追加します。

    # Use this variable only in the development environment. 
# Remove the variable when you move the app to the production environment.
NODE_TLS_REJECT_UNAUTHORIZED='0'

  4. [サインイン] ボタンを選択し、サインインします。

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

  6. プロファイルを更新するには、[プロファイル編集] リンクを選択します。 次のスクリーンショットのようなページが表示されます。

    ユーザー プロファイルの更新のスクリーンショット。

  7. プロファイルを編集するには、[プロファイルの編集] ボタンを選択します。 MFA チャレンジをまだ完了していない場合、アプリから、完了するように求められます。

  8. プロファイルの詳細を変更し、[保存] ボタンを選択します。

関連コンテンツ