ユーザーのサインインに対するカスタムページの設定

メモ

Dynamics 365 Commerce の小売関連グループは、Yammer から Viva Engage に移行しました。新しいViva Engage コミュニティにアクセスできない場合は、追加するフォーム (https://aka.ms/JoinD365commerceVivaEngageCommunity) に入力し、最新のディスカッションに参加してください。

この記事では、Microsoft Entra 企業間 (B2C) テナントのユーザー向けにカスタマイズされたサインインを処理するカスタムページを Microsoft Dynamics 365 Commerce で作成する方法について説明します。

Dynamics 365 Commerceで作成したカスタムページを使用してユーザーサインインフローを処理するには、Commerce 環境が参照するMicrosoft Entra ポリシーを設定します。 Microsoft Entra B2C アプリケーションを使用して、B2C ポリシー Microsoft Entra"サインアップとサインイン"、"プロファイル編集"、および "パスワードリセット" を構成できます。その後、Microsoft Dynamics ライフサイクルサービス (LCS) を使用して、コマース環境のプロビジョニングプロセス中に、Microsoft Entra B2C テナントとポリシー名を参照できます。

サインイン、サインアップ、アカウントプロファイルの編集、パスワードリセット、または汎用Microsoft Entraモジュールを使用して、カスタムコマースページを構築します。 Azure ポータルの Microsoft Entra B2C ポリシー構成で、これらのカスタムページに対して発行するページ URL を参照します。

推奨される B2C ユーザーフローで Commerce バージョン 10.0.15 以降のモジュールライブラリを使用します。 Microsoft Entra ID B2Cが提供する既定のユーザーポリシーページを使用することもできます。これらのページでは、会社のブランドに関連する背景画像、ロゴ、背景色の変更を追加できます。設計機能の制限はありますが、既定のユーザーポリシーページでは、専用のカスタムページを作成して構成することなく、B2C ポリシー機能Microsoft Entra提供されます。

B2C ポリシーを設定する

Microsoft Entra B2C テナントを設定し、コマース環境に関連付けた後、Azure ポータルの Microsoft Entra B2C ページに移動します。メニューの [ ポリシー] で、[ ユーザーフロー (ポリシー)] を選択します。

メニューの [ユーザーフロー (ポリシー)] コマンドのスクリーンショット。

これで、"サインアップとサインイン"、"プロファイル編集"、および "パスワードリセット" ユーザー認証フローを構成できるようになりました。

"サインアップとサインイン" ポリシーを構成するには、次の手順に従います。

新しいユーザーフローを選択し、登録とサインインを選択し、推奨タブの作成を選択します。
ポリシーの名前を入力します (B2C_1_SignInSignUp など)。
ID プロバイダー セクションで、ポリシーに使用する ID プロバイダーを選択します。少なくとも、[ 電子メールのサインアップ] を選択します。
属性の収集の列で、電子メールアドレス、指定された名前、および姓のチェックボックスをオンにします。
返品クレームの列で、電子メールアドレス、指定された名前、ID プロバイダー、姓、およびユーザーオブジェクト IDのチェックボックスをオンにします。
[OK] を選択してポリシーを作成します。
新しいポリシー名をダブルクリックし、ナビゲーションウィンドウでプロパティを選択します。
JavaScript を使用したページレイアウト (プレビュー) を有効にするのオプションをオンに設定します。

メモ

Commerce 環境は、ポリシー名を完全に参照し、 B2C_1_ プレフィックスを参照に含めます。ポリシーの作成後にポリシーの名前を変更することはできません。既存のコマース環境のポリシーを置き換える場合は、元のポリシーを削除して、同じ名前の新しいポリシーを作成することができます。または、環境が既にプロビジョニングされている場合は、サービス要求を通じて新しいポリシー名を送信できます。

このポリシーに戻り、カスタムページをビルドした後でセットアップを完了します。ここでは、ポリシーを閉じて、Azure ポータルの User flows (policies) ページに戻ります。

「プロファイル編集」ポリシーのコンフィギュレーション

"プロファイル編集" ポリシーを構成するには、次の手順に従います。

新しいユーザーフローを選択し、プロフィールの設定を選択し、推奨タブの作成を選択します。
ポリシーの名前を入力します (B2C_1_EditProfile など)。
ID プロバイダー セクションで、ポリシーに使用する ID プロバイダーを選択します。少なくとも、[ ローカルアカウントサインイン] を選択します。
属性の収集の列で、名と姓のチェックボックスをオンにします。
返品クレームの列で、電子メールアドレス、指定された名前、ID プロバイダー、姓、およびユーザーオブジェクト IDのチェックボックスをオンにします。
[OK] を選択してポリシーを作成します。
新しいポリシー名をダブルクリックし、ナビゲーションウィンドウでプロパティを選択します。
JavaScript を使用したページレイアウト (プレビュー) を有効にするのオプションをオンに設定します。

「パスワードのリセット」ポリシーのコンフィギュレーション

"パスワードリセット" ポリシーを構成するには、次の手順に従います。

[ 新しいユーザーフロー] を選択し、[ パスワードのリセット ] オプションを選択し、[ 推奨 ] タブを選択して、[ 作成] を選択します。
ポリシーの名前を入力します (B2C_1_ForgetPassword など)。
ID プロバイダー セクションで、電子メールアドレスを使用したパスワードのリセットを選択します。
返品クレームの列で、電子メールアドレス、指定された名前、姓、およびユーザーオブジェクト ID のチェックボックスをオンにします。
[OK] を選択してポリシーを作成します。
新しいポリシー名をダブルクリックし、ナビゲーションウィンドウでプロパティを選択します。
JavaScript を使用したページレイアウト (プレビュー) を有効にするのオプションをオンに設定します。

カスタムページの構築

コマースには、Microsoft Entra B2C ユーザーポリシー用のカスタムページを構築するための専用のMicrosoft Entra モジュールが含まれています。次のセクションで詳しく説明するメイン Microsoft Entra B2C モジュールを使用して、各ユーザーポリシーページのレイアウト専用のページを作成できます。または、Microsoft Entra ID B2C のすべてのページレイアウトとポリシーに対して Microsoft Entra Generic モジュールを使用することもできます (以下のセクションに記載されていないポリシー内のページレイアウトオプションの場合でも)。

ページ固有のMicrosoft Entraモジュールは、Microsoft Entra ID B2Cがレンダリングするデータ入力項目にバインドされます。これらのモジュールでは、ページ内の要素の位置をより細かく制御することができます。ただし、次のセクションで説明する既定の設定を超える差異を考慮するために、より多くのページとモジュール拡張機能を構築する必要がある場合があります。
Microsoft Entra Generic モジュールは、Microsoft Entra B2C の "div" 要素を作成して、ユーザーポリシーページレイアウト内のすべての要素をレンダリングします。この方法では、ページの B2C 関数の柔軟性が向上しますが、配置とスタイルの制御が少なくなります (ただし、CSS を使用してサイトの外観に合わせて使用できます)。

Microsoft Entra Generic モジュールを使用して 1 つのページを作成し、すべてのユーザーポリシーページに使用できます。また、サインイン、サインアップ、プロファイル編集、パスワードリセット、パスワードリセットの検証に個々のMicrosoft Entra モジュールを使用して、特定のページを構築することもできます。また、次のセクションで説明するページレイアウトの特定のMicrosoft Entra ページと、これらのページまたは他のユーザーポリシーページ内の残りのページレイアウト用の汎用Microsoft Entra モジュールページを使用して、両方の方法を組み合わせて使用することもできます。

モジュールライブラリに付属するMicrosoft Entra モジュールの詳細については、「Identity 管理ページとモジュールを参照してください。

特定の ID モジュールを使用してカスタムページをビルドし、ユーザーのサインインを処理するには、次の手順に従います。

Commerce サイトビルダーで、ご利用のサイトに移動します。
次の 5 つのテンプレートとページを作成します (サイトにまだ存在していない場合):
- サインインモジュールを使用する サインイン テンプレートとページ。
- 登録モジュールを使用する登録テンプレートとページ。
- パスワードリセットモジュールを使用するパスワードのリセット テンプレートとページ。
- パスワードリセット検証モジュールを使用するパスワードのリセット検証テンプレートとページ。
- アカウントプロファイルの編集モジュールを使用する プロファイル編集 テンプレートとページ。

ページを構築するときは、次のガイドラインに従います。

各ページまたは各モジュールについて、ビジネス要件に最も適したレイアウトとスタイルを使用します。
Microsoft Entra B2C セットアップで使用する必要があるすべてのページと URL を発行します。
ページと URL を発行したら、Microsoft Entra B2C ポリシー構成に使用する必要がある URL を収集します。使用すると、すべての URL に ?preloadscripts=true サフィックスが追加されます。

重要

Microsoft Entra B2C は、Microsoft Entra B2C テナントのドメインから直接ページを提供します。相対リンクを含むユニバーサルヘッダーとフッターは再利用しないでください。これらのページは Microsoft Entra B2C ドメインでホストされるため、すべてのリンクに絶対 URL のみを使用します。 Microsoft Entra関連のカスタムページの絶対 URL を使用して、特定のヘッダーとフッターを作成します。 Retail Server への接続が必要なコマース固有のモジュールをすべて削除します。たとえば、お気に入り、検索バー、サインインリンク、カートモジュールは、Microsoft Entra B2C のユーザーフローで使用されるページに含めてはなりません。

Microsoft Entra B2C ポリシーをカスタムページ情報と共に構成する

Azure ポータルで、Microsoft Entra B2C ページに戻ります。メニューの [ ポリシー] で、[ ユーザーフロー (ポリシー)] を選択します。

カスタムページ情報を使用して "サインアップとサインイン" ポリシーを更新するには、次の手順に従います。

以前にコンフィギュレーションしたサインインと登録ポリシーで、ナビゲーションウィンドウで、ページレイアウトを選択します。
統一登録またはサインインのページのレイアウトを選択します。
カスタムページコンテンツの使用オプションを、はいに設定します。
カスタムページのURI フィールドに、完全なサインイン URL を入力します。 preloadscripts=true 接尾辞を追加してください。たとえば、「www.<my domain>.com/sign-in?preloadscripts=true」を入力します。
ページレイアウトバージョン フィールドで、バージョン 2.1.0 またはそれ以降を選択します (Commerce バージョン 10.0.15 以上のモジュールライブラリが必要です)。
保存を選びます。
ローカルアカウントの登録ページのレイアウトを選択します。
カスタムページコンテンツの使用オプションを、はいに設定します。
カスタムページの URI フィールドに、完全なサインアップ URL を入力します。 ?preloadscripts=true の接尾語を含めてください。たとえば、「www.<my domain>.com/sign-up?preloadscripts=true」を入力します。
ページレイアウトバージョン フィールドで、バージョン 2.1.0 またはそれ以降を選択します (Commerce バージョン 10.0.15 以上のモジュールライブラリが必要です)。
ユーザー属性 セクションで、次の手順を実行します。
1. 名と姓の属性については、検証を要求する 列にいいえ を選択します。
2. [電子メールアドレス] 属性の場合は、[確認が必要] 列で既定値の [はい] を選択したままにします。このオプションにより、入力されたメールアドレスでサインアップしたユーザーが、そのメールアドレスを所有していることを確認することができます。
3. 電子メールアドレス、名、姓の属性に対して、オプション列で、いいえを選択します。
保存を選びます。

カスタムページ情報で「プロファイル編集」ポリシーを更新する

カスタムページ情報で "プロファイル編集" ポリシーを更新するには、次の手順に従います。

以前にコンフィギュレーションしたプロファイル編集ポリシーで、ナビゲーションウィンドウで、ページレイアウトを選択します。
プロファイル編集ページ レイアウトを選択します。画面によっては、他のレイアウトオプションを超えて下にスクロールする必要がある場合があります。
カスタムページコンテンツの使用オプションを、はいに設定します。
カスタムページの URI フィールドに、完全なプロファイル編集 URL を入力します。 ?preloadscripts=true という接尾辞を含めます。たとえば、「www.<my domain>.com/profile-edit?preloadscripts=true」を入力します。
[ページレイアウトのバージョン] で、バージョン 2.1.0 以降を選択します。このバージョンには、Commerce バージョン 10.0.15 以降のモジュールライブラリが必要です。
ユーザー属性 セクションで、次の手順を実行します。
1. 名と姓の属性に対しては、オプション 列で、いいえを選択します。
2. 名と姓の属性については、検証を要求する 列にいいえ を選択します。
保存を選びます。

カスタムページ情報で「パスワードのリセット」ポリシーを更新する

カスタムページ情報で "パスワードリセット" ポリシーを更新するには、次の手順に従います。

以前にコンフィギュレーションしたパスワードのリセット ポリシーで、ナビゲーションウィンドウで、ページレイアウトを選択します。
パスワードを忘れた場合のページのレイアウトを選択します。
カスタムページコンテンツの使用オプションを、はいに設定します。
カスタムページの URI フィールドに、完全なパスワードリセット検証 URL を入力します。 ?preloadscripts=true という接尾語を含めます。たとえば、「www.<my domain>.com/password-reset-verification?preloadscripts=true」を入力します。
[ ページレイアウトのバージョン ] フィールドで、バージョン 2.1.0 以降を 選択します。このバージョンには、Commerce バージョン 10.0.15 以降のモジュールライブラリが必要です。
保存を選びます。
パスワードを変更するページのレイアウトを選択します。
カスタムページコンテンツの使用オプションを、はいに設定します。
カスタムページの URI フィールドに、完全なパスワードリセット URL を入力します。 ?preloadscripts=true という接尾語を追加してください。たとえば、「www.<my domain>.com/password-reset?preloadscripts=true」を入力します。
[ ページレイアウトのバージョン ] フィールドで、バージョン 2.1.0 以降を 選択します。このバージョンには、Commerce バージョン 10.0.15 以降のモジュールライブラリが必要です。
保存を選びます。

ラベルと説明の既定のテキスト文字列のカスタマイズ

モジュールライブラリでは、サインインモジュールにラベルと説明の既定のテキスト文字列が含まれています。これらの文字列は、作業中のモジュールのプロパティウィンドウでカスタマイズできます。 [ パスワードを忘れた 場合] リンクテキストや [アカウント 呼び出しアクションの作成] テキストなど、ページ上の他の文字列を変更するには、Commerce ソフトウェア開発キット (SDK) を使用し、サインインモジュールの global.json ファイルの値を更新する必要があります。

たとえば、パスワードリンクを忘れた場合の既定のテキストはパスワードをお忘れですかです。次のスクリーンショットは、サインインページのこの既定のテキストを示しています。

サインインページのパスワードを忘れたリンクの既定のテキストのスクリーンショット。