ユースケース：Formsを使用して更新ポリシーフォームを構成する

Forms for Actionsを使用して更新ポリシーフォームを構成する

始める前に

1. 以下のスコープを有効にして、マシンツーマシンアプリケーションを作成します。

• read:users
• update:users
• create:users
• read:users_app_metadata
• update:users_app_metadata
• create:users_app_metadata

2. マシンツーマシンアプリケーションの資格情報を使ってVault接続を追加します。

Forms for Actionsは、カスタムプライバシーポリシーフローを作成し、app_metadataオブジェクトの下に同意を保存できるようにします。

以下のセクションでは、ノードとフローを使用して更新ポリシーフォームを作成する方法と、フォームをログイン後のアクションに追加する手順について説明します。

​

フォームをゼロから作成する

情報を収集するためのフォームを作成するには、次の手順に従ってください。

1. ［Auth0 Dashboard］>［Actions（アクション）］>［Forms（フォーム）］ の順に選択して、フォームエディターを開きます。
2. ［Create Form（フォームを作成）］ > ［Start from scratch（初めから作成する）］ の順に選択します。

特に設定を変更しない限り、新しいフォームには開始ノード、ステップノード、および終了スクリーンノードが含まれます。

​

ステップノードを構成する

ステップノードは、ユーザーに表示されるグラフィカルインターフェースです。次の手順に従って、ステップノードにフィールドを追加し、新しい同意の値を収集します。

1. ［Components menu（コンポーネントメニュー）］ から ［Rich text（リッチテキスト）］ フィールドを Step（ステップ） ノードにドラッグします。

   • Rich text（リッチテキスト） ：プライバシーポリシー更新の説明を入力します。
   • ［Save（保存）］ を選択します。

2. ［Legal（法務）］ フィールドを Step（ステップ） ノードにドラッグします。

   • Id ：privacy_policiesを入力します。
   • Required（必要） ：チェックボックスを有効にします。
   • Legal（法的文） ：「I agree to the Privacy Policy（プライバシーポリシーに同意します）」と入力します。
   • ［Save（保存）］ を選択します。

3. ［Publish（公開）］ を選択して保存します。

​

フローノードを構成する

次の手順に従って、 Step（ステップ） ノードの後に Flow（フロー） ノードを追加し、app_metadataを更新して認証フローを再開します。

1. フォームエディターの下にある ［Flow（フロー）］ を選択します。

2. Step（ステップ） ノードと Ending Screen（終了画面） ノードの間にある既存のリンクを削除します。

3. 新たに ［Flow（フロー）］ > ［Click to add a flow（クリックしてフローを追加する）］ > ［Create a new flow（新しいフローを作成する）］ を選択します。

   • ［Name（名前）］ フィールドにUpdate app_metadataと入力します。
   • ［Create（作成）］ を選択します。
   • ［Save（保存）］ を選択します。

4. 下の画像のように Flow（フロー）ノード を Step（ステップ） ノードと Ending Screen（終了画面） ノードにリンクします。

5. ［Publish（公開）］ を選択して保存します。

Auth0ユーザーの更新アクションをフローに追加するには、次の手順に従います。

1. ［Update user_metadata（user_metadata更新）］ *** フロー* を選択してから ［Edit flow（フローの編集）］ を選択し、新しいタブにフローエディターを開きます。

2. アクションの ［Start（開始）］ の下にある ［+］ アイコンを選択し、 Update user（ユーザー更新） アクションを追加します。以下のフィールドに入力して、 ［Save（保存）］ を選択します。

   • Connection（接続） ：ドロップダウンからM2MアプリケーションへのVault接続を選択します。

   • User ID（ユーザーID） ：{{context.user.user_id}}と入力します。

   • Body（ボディー） ：以下のコードをコピーして貼り付け、privacy_policiesとprivacy_policies_timestampのプロパティを含むapp_metadataを更新します。

     {
       "app_metadata": {
         "privacy_policies": true,
         "privacy_policies_timestamp": "{{ functions.toTimestamp() }}"
       }
     }
     

   • ［Save（保存）］ を選択します。

3. ［Publish（公開）］ を選択して保存します。

Update app_metadata フローは、privacy_policies true値をapp_metadataオブジェクトに追加し、ヘルパー関数を使ってタイムスタンプを生成します。

​

フォームのレンダーコードを取得する

フォームのレンダーコードを取得して、カスタムのログイン後アクションでフォームを視覚的にレンダリングするには、以下の手順に従います。

• フォームエディターから <>［Render（レンダー）］ を選択します。
• ［Copy（コピー）］ を選択します。

​

ログイン後のアクションを作成する

ログイン後のアクションを作成してフォームをレンダリングするには、次の手順に従います。

1. ［Auth0 Dashboard］>［Actions（アクション）］>［Flows（フロー）］>［Login（ログイン）］ に移動します。

2. ［+］ アイコンを選択し、 ［Build from scratch（初めから構築する）］ を選択します。

   • Name（名前） ：Render Update Policy Form（更新ポリシーフォームのレンダリング）と入力します。
   • Trigger（トリガー） ：［Login / Post Login（ログイン/ログイン後）］を選択します。
   • Runtime（ランタイム） ：推奨バージョンを選択します。

3. ［Create（作成）］ を選択します。

ログイン後のアクションを構成するには、以下を行います。

1. 既存のコードをコードエディターから削除します。

2. フォームのレンダリングコードをコードエディターに貼り付けます。

3. コードを編集して、フォームをレンダリングする条件ロジックを定義します。

   /**
   * @param {Event} event - Details about the user and the context in which they are logging in.
   * @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.
   */
   exports.onExecutePostLogin = async (event, api) => {
     const FORM_ID = 'REPLACE_WITH_YOUR_FORM_ID';
   
     if (event.user.app_metadata.privacy_policies !== true) {
       api.prompt.render(FORM_ID);
     }
   }
   
   exports.onContinuePostLogin = async (event, api) => { }
   

   上の例にあるコードでは、ユーザーのアプリメタデータにprivacy_policiesプロパティがない場合にフォームが表示されます。

4. ［Deploy（デプロイ）］ を選択します。

5. ［Render Update Policy Form（更新ポリシーフォームのレンダリング）］ アクションを Login（ログイン） フローにドラッグ＆ドロップします。

   

6. ［Apply（適用）］ を選択します。

​

実装をテストする

次の手順に従って実装をテストします。

1. app_metadata属性のprivacy_policiesに値がない既存のユーザーとしてログインします。
2. ログインフローのログイン後アクションがフォームをレンダリングして、同意を求めます。
3. ［Auth0 Dashboard］>［User Management（ユーザー管理）］>［Users（ユーザー）］ に移動し、ユーザーを見つけて、app_metadata属性のprivacy_policiesにtrue値とタイムスタンプが含まれていることを確認します。