Actions を使用してフォームをレンダリングする

Actions を使用してフォームをレンダリングする方法を説明します。

フォームを作成したら、api.prompt.render() メソッドを使って Actions でレンダリングできます。

// post-loginトリガーを使用した例

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後のロジックをここに追加
}

form_id はフォームの ID に置き換えてください。ID は、フォームの URL (例:  ap_pUMG...) で確認するか、フォームエディターの Render タブから選択できます。 Actions コードエディター では、フォームをいつどのようにレンダリングするかを決めるビジネスロジックを定義できます。

exports.onExecutePostLogin = async (event, api) => {

  // ユーザーに company_name メタデータがない場合のみフォームをレンダリングする
  if (!event.user.user_metadata.company_name) {
    api.prompt.render(':form_id');
  }
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後のロジックをここに追加する
}

これらのオブジェクトの詳細については、以下を参照してください。

• Event Object: Event オブジェクトとそのプロパティについて確認できます。
• API object: API オブジェクトとそのメソッドについて確認できます。

​

既存フィールドと非表示フィールドの値を設定する (クライアント側)

render メソッドの第 2 引数で fields プロパティを使用すると、既存フィールドと非表示フィールドの値を設定できます。

以下の例では、Jane という値が first_name フィールドに設定されます。

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    fields: {
      first_name: 'Jane',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後の処理をここに追加してください
}

機密情報は設定しないでください。設定した値はブラウザー (クライアント側) に公開されます。

第2引数で参照しているフィールド ID が、nodes and components でクライアント側から利用可能であることを確認してください。そうでない場合、値は反映されません。

​

共有変数を使用してカスタムデータを渡す (サーバーサイド)

render メソッドの第2引数で vars プロパティを使用すると、サーバーサイド変数を渡せます。これにより、機密情報をクライアントサイドに公開することなく渡せます。

以下の例では、値 123456789 が変数 external_user_id に設定されます。

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id', {
    vars: {
      external_user_id: '123456789',
    }
  });
}

exports.onContinuePostLogin = async (event, api) => {
  // フォーム完了後の処理をここに追加してください
}

共有変数 {{vars.*}} には、データ型の制限はありません。

共有変数 {{vars.*}} は、常に自動的にマスクされます。

{{fields.*}} 変数に値を設定する場合と異なり、値を挿入する前に {{vars.*}} プロパティがフォーム内に存在している必要はありません。

{{vars.*}} プロパティを使用すると、Forms と関連付けられた Flows で共有変数を参照できます。詳細については、Variables を参照してください。

​

Actions のフィールドデータと共有変数データ

フォームで収集したフィールドデータと共有変数データは、現在の Action の resume 関数で event.prompt から自動的に利用できます。

• id プロパティ。現在レンダリングしているプロンプトの ID が含まれます。
• fields オブジェクト。すべてのフィールドと非表示フィールドのデータが含まれます。
• vars オブジェクト。すべての共有変数のデータが含まれます。

event.prompt オブジェクトの例

{
  "id": "ap_fuVuFiiQWN3mTEujWTy966",
  "fields": {
    "first_name": "Jane",
    "company_name": "Okta"
  },
  "vars": {
    "external_crm_uuid": "f8f32e6f-2329-49bd-bf21-fa8b0bea2652",
    "api_hostname": "api.example.com"
  }
}

以下の例では、api.user.setUserMetadata は、フォームから収集した event.prompt.fields.company_name プロパティの値を user_metadata の company_name 属性に設定します。

exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render(':form_id');
}

exports.onContinuePostLogin = async (event, api) => {
  api.user.setUserMetadata('company_name', event.prompt.fields.company_name);
}

​

制限事項

• 同じ Action 内で、ユーザーをリダイレクトすると同時にフォームをレンダリングすることはできません。両方が必要な場合は、別々の Actions を使用することを検討してください。

• 1 つの Action でレンダリングできるフォームは 1 つだけです。複数のフォームをレンダリングする必要がある場合は、別々の Actions でレンダリングする必要があります。

• fields プロパティのサイズ上限は 24 KB です。

• api.prompt.render() メソッドは、次のトリガーで使用できます。

  • post-login
  • post-challenge