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

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() }}"
       }
     }

     Was this helpful?

     Yes /No

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

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

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

• フォームエディターから<>［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) => { }

   Was this helpful?

   Yes /No
   上の例にあるコードでは、ユーザーのアプリメタデータに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値とタイムスタンプが含まれていることを確認します。