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

post-login または pre-user-registration Action を使用して、ログインまたはサインアップフロー中に Form をレンダリングする方法を説明します。

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

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

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

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

form_id を Form の ID に置き換えます。ID は、たとえば ap_pUMG... のように Form の URL で確認するか、Form エディタの Render タブで選択できます。 Actions Code editor では、Form をいつ、どのようにレンダリングするかを決めるビジネスロジックを定義できます。

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.*}} プロパティを使うと、フォームやそれにリンクされたフローで共有変数を参照できます。詳しくは、Variables をご覧ください。

​

Actions におけるフィールドと共有変数のデータ

フォームで収集されたフィールドと共有変数のデータは、現在のアクションの 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 内でユーザーをリダイレクトしながらフォームをレンダリングすることはできません。両方を使用する必要がある場合は、別々の Action を使用することを検討してください。

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

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

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

  • post-login
  • post-challenge