次の方法で共有

ローカル開発中にサインイン状態をモックする

  • [アーティクル]

重要

この記事に記載されている一部またはすべての機能は、プレビュー リリースの一部として使用可能です。 コンテンツおよび機能は、変更されることがあります。 プレビュー リリースの詳細については、1 つのバージョンのサービス更新に関するよく寄せられる質問を参照してください。

この記事では、Dynamics 365 Commerce オンライン ローカル開発環境でサインインしたユーザーをモックする方法について説明します。

eコマース オンライン サイトを開発する過程で、サインインしたユーザー向けのシナリオを開発およびテストすることが必要になる場合があります。 これらのページを公開してライブ ページに対してテストする代わりに、開発者モードで実行しているときにサインイン状態をモックできます。

Azure AD B2C テナントの構成

この機能を利用するには、Azure Active Directory (Azure AD) の企業と顧客間 (B2C) テナントで 1 回の設定を実行して、サインインしたユーザーの状態をモックできるようにする必要があります。 次の手順を実行するには、グローバル管理者権限を持つユーザーとしてサインインする必要があります。

新しいリソース所有者パスワード資格情報 (ROPC) のフローを作成する

最初の手順は、Azure AD B2C テナントに新しいリソース所有者パスワード資格情報 (ROPC) フローを作成するために行います。

新しい ROPC フローを作成するには、次の手順に従います。

  1. Azure AD B2C テナントのグローバル管理者として Azure ポータルにサインインし、次に Azure AD B2C サービスを選択します。
  2. ユーザー フローおよび新規ユーザー フローを選択します。
  3. リソース所有者のパスワード認証情報 (ROPC) を使用してサインインを選択し、次に作成を選択します。
  4. たとえば、"ROPC_Auth" など、ユーザー フローの名前を入力します。 後で credentials.json ファイルの ropcUserFlowName 値として使用するため、フル ネームをコピーして保存します。
  5. アプリケーション クレームで、詳細表示を選択します。
  6. 次のアプリケーション クレームを選択します。
    • 表示名
    • 電子メール アドレス
    • 指定された名前
    • ID プロバイダー
    • 姓
    • ユーザーのオブジェクト ID
  7. OKを選択し、作成を選択します。
  8. 新しいユーザー フローを選択し、ユーザー フローの実行を選択します。

ローカル サインインを有効にする新しい ROPC ポリシーを作成しました。 ユーザー フローの実行には、https://<LOGIN_DOMAIN>//<B2C_TENANT>.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_ROPC_Auth のようなエンドポイント URL が表示されます。 URL の <LOGIN_DOMAIN> と <B2C_TENANT> の値を書き留めておいてください。この情報は後で credentials.json file で使用されるためです。

次の例の画像では、ユーザー フローの実行の下にリストされているエンドポイント URL は https://commerceonboardingb2c.b2clogin.com/commerceonboardingb2c.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_ROPC_Auth です。

ユーザー フローの例を実行します。

上記の例から、次のように ropcUserFlowName、loginDomain、および b2cTenant プロパティの値を取得できます。

プロパティ名 サンプル値
ropcFlowUserName B2C_1_ROPC_Auth
loginDomain commerceonboardingb2c.b2clogin.com
b2cTenant commerceonboardingb2c

ネイティブ アプリケーション ユーザーの作成

次に、ローカル開発中に実行する Node アプリケーションを表すネイティブ アプリケーションを作成します。

  1. Azure AD B2C 設定で、アプリの登録を選択し、新規登録を選択します。

  2. 「local_node_app」など、アプリケーションの名前を入力します。

  3. サポートされているアカウント タイプ については、任意の ID プロバイダーまたは組織のディレクトリ内のアカウント (ユーザー フローでユーザーを認証するため) を選択します。

  4. リダイレクト URL については、ドロップダウン リストからパブリック クライアント/ネイティブ (モバイル & デスクトップ) を選択し、URI はそのままにします。

  5. 他の既定値はすべてそのままにし、登録を選択します。

  6. 新しいアプリケーションを選択し、アプリケーション (クライアント) ID の値をコピーして保存します。この ID は後で credentials.json の nativeApplicationId プロパティの値として使用されるためです。

    ローカル Node アプリ。

  7. 管理の左側のナビゲーション ウィンドウで、認証を選択します。

  8. 新しいエクスペリエンスを試す (表示されている場合) を選択します。

  9. 既定のクライアント タイプの下で、アプリケーションをパブリック クライアントとして扱うに対してはいを選択します。 この設定は、ROPC フローに必要です。

  10. 保存を選択します。

  11. 管理の左側のナビゲーション ウィンドウでマニフェストを選択し、マニフェスト エディターを開きます。

  12. oauth2AllowImplicitFlow 属性を true に設定し、保存を選択します。

    ローカル Node アプリ マニフェスト。

これで、ローカル Node アプリケーションを表すために使用される新しいネイティブ アプリケーションが作成されました。

上記の例から、次の情報を取得しました。

プロパティ名 サンプル値
ropcFlowUserName B2C_1_ROPC_Auth
loginDomain commerceonboardingb2c.b2clogin.com
b2cTenant commerceonboardingb2c
nativeApplicationId 25f6742d-f8b8-44d9-a6a0-f06d2854ac5f

スコープの構成とネイティブ アプリケーションの登録

  1. Azure AD B2C 設定で、アプリの登録に移動します。

  2. eコマース レンダリング アプリケーションで現在使用されているアプリケーションを開きます。 Azure ポータルでは、これはサイトの Azure AD B2C 構成でクライアント ID が使用されるアプリケーションです。 Azure AD B2C が既に構成されている場合、eコマース サイトに使用されるアプリケーション ID は 依存する関係者の ClientId フィールド の 、コマース共有パラメーター > ID プロバイダー の Commerce headquarters にあります。 アプリケーション ID は、テナント設定 > B2C 設定の Commerce サイト ビルダーで、サイトに使用される B2C アプリケーション構成内のクライアント GUID として見つけることもできます。

  3. 管理の左ナビゲーション ウィンドウで、APIの 公開を選択し、user_impersonation スコープが存在することを確認します。 存在しない場合は、スコープの追加を選択して作成します。 アプリケーション ID URI の入力を求められたら、アプリケーション ID URI をそのままにして、スコープ名に「user_impersonation」を追加します。 次に、管理者の同意の表示名と管理者の同意の説明に対応する値を入力します。

    API を公開します。

  4. この情報は後で credentials.json ファイルの userImpersonationScopeURL プロパティ値として使用されるため、フル スコープ値をコピーして保存します。

  5. 作成したばかりのネイティブ アプリケーションに戻り、左側のナビゲーション ペインの管理で、API のアクセス許可を選択します。

  6. アクセス許可の追加を選択し、組織で使用している API タブを選択します。

  7. 上記で作成した eコマース レンダリング アプリケーションを検索し、それを選択して、アクセス許可として user_impersonation を追加します。

    API アクセス許可。

  8. アクセス許可の追加 を選択します。

  9. 管理者の同意の付与 (この名前にはドメインが含まれます) を選択し、はいを選択して、同意を適用します。 user_impersonation の状態に緑色のチェック マークが表示されます。

これで Azure AD の設定部分が完了し、次のすべてのサンプル値のバージョンが用意されているはずです。

プロパティ名 サンプル値
ropcFlowUserName B2C_1_ROPC_Auth
loginDomain commerceonboardingb2c.b2clogin.com
b2cTenant commerceonboardingb2c
nativeApplicationId 25f6742d-f8b8-44d9-a6a0-f06d2854ac5f
userImpersonationScopeURL https://commerceonboardingb2c.onmicrosoft.com/b7ad3e87-d8b0-4c83-b08d-7c34c19f7933/user_impersonation

Node アプリケーションを構成する

Azure AD B2C テナントを構成する手順を完了したら、オンライン ソフトウェア開発キット (SDK) Node アプリケーションで資格情報ファイルを作成する必要があります。

資格情報は、Node アプリケーションの secrets/ ディレクトリに存在します。 アプリケーションに secrets/ ディレクトリをまだ作成していない場合は作成し、上記のデータを収集して使用する次の例に似た credentials.json という名前の新しいファイルを作成します。

{
    "loginDomain": "commerceonboardingb2c.b2clogin.com",
    "b2cTenant": "commerceonboardingb2c",
    "nativeApplicationId": "25f6742d-f8b8-44d9-a6a0-f06d2854ac5f",
    "ropcUserFlowName": "B2C_1_ROPC_Auth",
    "userImpersonationScopeURL": "https://commerceonboardingb2c.onmicrosoft.com/b7ad3e87-d8b0-4c83-b08d-7c34c19f7933/user_impersonation",
    "defaultUser": {
        "name": "default",
        "email": "",
        "password": "",
        "customerAccountNumber": ""
    },
    "additionalUsers":[ 
        {
            "name": "test-user-1",
            "email": "test-user-1@example.com",
            "password": "password",
            "customerAccountNumber": ""
        }
    ]
}

credentials.json ファイルの例。

メモ

secrets/ ディレクトリの下にあるすべてのものを .gitignore ファイルに追加して、資格情報がオンラインで漏洩するのを防ぐ必要があります。

Azure のセットアップ手順で収集した情報を使用して credentials.json ファイルを設定したら、ローカル開発中に使用するテスト アカウントを追加する必要があります。 ここで定義するアカウントは、Dynamics 365 Commerce Headquarters で既に作成されている有効なアカウントである必要があります。

  • defaultUser: mockUser クエリ パラメータが true に設定されている場合に使用される既定のユーザー。 名前の値は 既定 である必要があります。
  • additionalUsers: テスト対象として追加のユーザーを構成できるユーザー オブジェクトの配列。 この配列の各エントリは、名前、電子メール アドレス、パスワード、および顧客アカウント番号を持つオブジェクトである必要があります。 これらのユーザーの 1 人としてサインインするには、クエリ パラメータ mockUser=<name> を使用します。

サインインした B2B ユーザーをモックする

サインインしている企業間 (B2B) ユーザーをモックする必要がある場合は、ユーザー資格情報に isB2bUser プロパティを使用し、それを次の例に示すように、true に設定できます。

{
    "loginDomain": "commerceonboardingb2c.b2clogin.com",
    "b2cTenant": "commerceonboardingb2c",
    "nativeApplicationId": "25f6742d-f8b8-44d9-a6a0-f06d2854ac5f",
    "ropcUserFlowName": "B2C_1_ROPC_Auth",
    "userImpersonationScopeURL": "https://commerceonboardingb2c.onmicrosoft.com/b7ad3e87-d8b0-4c83-b08d-7c34c19f7933/user_impersonation",
    "defaultUser": {
        "name": "default",
        "email": "",
        "password": "",
        "customerAccountNumber": "",
        "isB2bUser": true
    },
    "additionalUsers":[ 
        {
            "name": "test-user-1",
            "email": "test-user-1@example.com",
            "password": "password",
            "customerAccountNumber": ""
        }
    ]
}

モック サインイン状態

上記の構成手順がすべて完了したら、yarn start コマンドを使用して、eコマース Node アプリケーションをローカル開発モードで開始します。 サインイン状態は、mockUser クエリ パラメータを使用して制御され、モック ページと公開されたページ (例: https://localhost:4000?mock=homepage&mockUser=true または https://localhost:4000?mockUser=true) などにサインインした状態をモックできます。

サインイン時の動作を制御するには、mockUser=<true|false|name> を使用します。 各クエリ パラメータ値の動作は次の表で説明されています。

mockUser 値 例 サインイン/サインアウト Description
はい mockUser=true サインイン 既定のユーザーとしてサインインします。
name mockUser=test-user-1 サインイン クエリ パラメータで指定したユーザーとしてサインインします。
false mockUser=false サインアウト 現在サインイン しているユーザーにサインアウトします。

mockUser クエリ パラメータを使用すると、異なるユーザーごとにサインアウトして再度サインインすることなく、ページを異なるユーザーとしてテストできます。 たとえば、https://localhost:4000?mock=homepage&mockUser=true を押してから、https://localhost:4000?mock=homepage&mockUser=test-user-1 を使用すると、異なるサインイン ユーザーとしてホームページのモックをテストできます。

mockUser がオンになっているページにアクセスしてサインインに成功すると、異なるユーザーでサインインするかサインアウトするまで、サインイン状態がページ間で維持されます。

Web ページ自体のサインイン ボタンとサインアウト ボタンを使用して、サインインしているユーザーの動作を模倣モックすることもできます。 サインイン ボタンは既定のユーザーとしてサインインし、サインアウト ボタンは現在サインインしているユーザーをサインアウトします。

追加リソース

要求プロパティ オブジェクト

アプリ設定

プラットフォーム設定ファイル

モジュール定義ファイルの拡張

Cookie API の概要

対話型コンポーネントの概要

コンテキストに基づいてモジュール プロパティを表示するように構成する

CultureInfoFormatter クラスを使用したグローバライズ モジュール

Azure Key Vault を使用してキー管理のセキュリティを強化する