ノードとコンポーネント

Forms を使用してレンダリングできる利用可能なノードと入力フィールドコンポーネントについて説明します。

Forms では、フィールド、ブロック、ウィジェットなど、ユーザーがフォームを操作するためのノードやコンポーネントを追加できます。さらに、コンポーネントに入力されたデータは、フォームやフロー内で参照できます。

​

フォームノード

フォームノードには、Start、Step、Flow、Router、Ending screen の5種類があります。これらのノードは、フォームの構造においてそれぞれ特定の役割を担っています。

​

ステップノード

ステップノードは、フォームを視覚的に表したものです。ユーザーがデータを入力できるフィールド、ブロック、ウィジェットなど、任意の数のコンポーネントを含めることができます。

​

フィールドコンポーネント

フィールドは、Forms でユーザーが情報を入力するための UI コンポーネントです。

​

フィールド設定

フィールドには、要件に合わせて設定できる既定の項目がいくつかあります。

既定のフィールド設定は次のとおりです。

設定	説明
ID	一意の ID
ラベル	ラベルの表示/非表示
必須	入力値が必須
ヒントテキスト	ヒントテキストを表示
プレースホルダーテキスト	ユーザーに表示されるテキスト
デフォルト値	ユーザーに表示されるデフォルト値
一時的	データマスクの有効/無効

​

フィールドの検証ルール

設定	説明
最小長 / 最大長	入力値の長さを制限します。
最小値 / 最大値	数値の範囲を制限します。

​

Formsで利用できるフィールド

利用可能なフィールドと、それぞれの固有の設定およびデータ出力型は次のとおりです。

テキストフィールド

標準入力では、ユーザーは任意の文字列を入力できます。

テキストフィールドの設定

テキストフィールドの設定は次のとおりです。

設定	説明
複数行	複数行のテキスト入力を有効にします。

テキストフィールドの出力値

テキストフィールドの出力値のデータ型は string です。

{
  "text_field_id": "Auth0"
}

メールアドレス欄

標準入力では、ユーザーがメールアドレスを文字列として入力できます。

メールフィールドの出力値

メールフィールドの出力値のデータ型はstringです。

{
  "email_field_id": "[e-mail]"
}

電話番号フィールド

標準入力では、ユーザーは電話番号を入力できます。

電話フィールドの設定

電話フィールドの設定は次のとおりです。

Settings	Description
国選択	国選択の有効 / 無効を切り替えます。既定では、ユーザーの IP アドレスに基づく所在地が表示されます。
フィルタのプレースホルダーテキスト	国検索ウィンドウでユーザーに表示されるテキスト。

電話フィールドの出力値

電話フィールドの出力値のデータ型は、string、または国選択が有効な場合は object です。

電話フィールドの出力データ型の値が string の場合:

{
  "phone_field_id": "8005550175"
}

電話フィールドの出力データ型の値は、objectです:

{
  "phone_field_id": {
    "national_number": "8005550175",
    "national_format": "[phone]",
    "international_number": "[phone]",
    "international_format": "[phone]",
    "country_code_iso": "US",
    "country_code_number": "1"
  }
}

選択肢フィールド

ユーザーが単一または複数の選択肢から値を選択できる標準入力です。

Choice フィールドの設定

Choice フィールドの設定は次のとおりです。

Settings	Description
複数選択	複数の選択肢を有効にします。
その他	ユーザーが独自の選択肢を入力できるようにします。
Advanced > Internal values	各選択肢に内部値を割り当てます。
Advanced > Bulk edit	ラベルと各選択肢の内部値を一括編集します。

Choice フィールドの出力値

Choice フィールドの出力値のデータ型は、string、または複数選択が有効な場合は array of strings です。

string としての Choice フィールド出力値:

{
  "choice_field_id": "Option A"
}

選択フィールドの出力データ型の値は array of strings です:

{
  "choice_field_id": ["Option A", "Option B"]
}

カードフィールド

ユーザーが画像の選択肢を単一または複数選択できる標準入力です。

カードフィールドの設定

カードフィールドの設定は次のとおりです。

設定	説明
複数選択	複数の選択肢を有効にします。
ラベルを非表示	カードのラベルを非表示にします。
Advanced > Internal values	各選択肢に内部値を割り当てます。

カードフィールドの出力値

カードフィールドの出力値のデータ型は、string、または複数選択が有効な場合は array of strings になります。

string としてのカードフィールドの出力データ型の値:

{
  "card_field_id": "Option A"
}

cards フィールドは、データ型の値をarray of stringsとして出力します。

{
  "card_field_id": ["Option A", "Option B"]
}

URL フィールド

標準入力では、ユーザーはURLを入力できます。

URL フィールドの出力値

URL フィールドの出力値のデータ型は文字列です:

{
  "url_field_id": "https://auth0.com"
}

パスワード欄

ユーザーがパスワードや秘密の値を入力できる標準的な入力欄です。

パスワードフィールドの設定

パスワードフィールドの設定は次のとおりです。

Settings	Description
複雑なパスワードを必須にする	パスワードには、大文字、小文字、記号、数字を含める必要があります。
NIST ガイドラインを適用する	パスワードは 8 文字未満にはできません。また、過去の漏えいデータに含まれるパスワード、辞書語、同じ文字の繰り返しや連続する文字列、内容に関連する語句は使用できません。
強度メーターを追加する	パスワード入力の強度を示すため、赤・黄・緑のスケールを持つグラフィカルなメーターがパスワードフィールドの下に表示されます。
ハッシュ化	入力値をブラウザー内で直接ハッシュ化するためのアルゴリズムを選択します。

パスワードフィールドの出力値

パスワードフィールドの出力値のデータ型は、マスクされた string です。

{
  "password_field_id": "███"
}

支払いフィールド

決済プロバイダーを使用して、ユーザーが支払い情報を入力できる標準入力フィールドです。支払いは Ending ノードに到達する前に処理されます。

支払いフィールドの設定

支払いフィールドの設定は次のとおりです。

Settings	Description
Payment type	1 回限りの支払い (Charge) または継続課金 (Subscription) のいずれかを選択します。
Amount	1 回限りの支払い (Charge) の金額を指定します。
Currency	1 回限りの支払い (Charge) の通貨を指定します。
Subscription action	既存のサブスクリプションを新規作成するか、更新するかを選択します。
Customer action	顧客を新規作成するか、既存の顧客を更新するかを選択します。
Display options	カード番号、有効期限、セキュリティコードのラベルとトラストマークの表示・編集を行います。

支払いフィールドの出力値

支払いフィールドの出力値のデータ型は、送信後フローでは string または object です。

string としての支払いフィールドの出力値のデータ型:

{
  "payment_field_id": "pm_1P19e..."
}

サブスクリプションの支払いフィールドの出力値のデータ型は object です：

{
  "payment_field_id": {
    "payment_method_id": "pm_1P19e...",
    "customer_id": "cus_PqrM...",
    "price_ids": [
      "price_1ONHR..."
    ],
    "subscription_id": "sub_1P1A...",
    "payment_intent_id": "pi_3P19e5..."
  }
}

charge の支払いフィールドの出力値のデータ型は object です:

{
  "payment_field_id": {
    "payment_method_id": "pm_1P19e...",
    "customer_id": "cus_PqrM...",
    "amount": 100,
    "payment_intent_id": "pi_3P19e5..."
  }
}

法的事項フィールド

法的な文言とチェック入力を追加する標準フィールド。

Legal フィールドの出力値

Legal フィールドの出力値のデータ型は boolean です。

{
  "legal_field_id": true
}

ドロップダウンフィールド

ユーザーがドロップダウンから単一または複数の選択肢を選べる標準入力です。

ドロップダウンフィールドの設定

ドロップダウンフィールドの設定は次のとおりです。

Settings	Description
複数選択	複数の選択肢を有効にします。
Advanced > 内部値	各オプションに内部値を割り当てます。
Advanced > 一括編集	ラベルと内部値を一括で編集します。

ドロップダウンフィールドの出力値

ドロップダウンフィールドの出力値のデータ型は、string、または複数選択が有効になっている場合はarray of stringsです。

string型のドロップダウンフィールド出力値:

{
  "dropdown_field_id": "Option A"
}

ドロップダウンフィールドの出力データ型の値は array of strings です:

{
  "dropdown_field_id": ["Option A", "Option B"]
}

数値フィールド

ユーザーが数値を入力できる標準的な入力フィールドです。

数値フィールドの出力値

数値フィールドの出力値のデータ型は number です。

{
  "number_field_id": 123
}

日付 / 時刻フィールド

ユーザーが日付または時刻の値を入力できる標準入力フィールドです。

日付 / 時刻フィールドの設定

日付 / 時刻フィールドの設定には、次の項目があります。

Key	Description
Format	日付形式または時刻形式を選択します。

日付 / 時刻フィールドの出力値

日付 / 時刻フィールドで日付を選択した場合、出力データ型の値は string です。

{
  "date_time_field_id": "2023-04-11"
}

日付/時刻フィールドの出力データ型では、時刻の値は string です。

{
  "date_time_field_id": "23:15"
}

真偽値フィールド

ユーザーが true または false の値を入力できる標準的な入力フィールドです。

Boolean フィールドの出力値

Boolean フィールドの出力値のデータ型は boolean です。

{
  "boolean_field_id": true
}

カスタムフィールド

独自のフィールドを作成できるようにカスタマイズ可能な標準フィールドです。

カスタムフィールドの設定

カスタムフィールドの設定は次のとおりです。

Settings	Description
Params	カスタムフィールドのソースコード内で参照するキーと値のペアを追加します。
Source code	カスタムフィールドに JavaScript コードを追加します。
JSON Schema	デフォルトでは、カスタムフィールドはあらゆる形式の値を受け付けます。ただし、JSON Schema を使用して値を検証できます。

詳しくは、フォームのカスタムフィールドコンポーネントをお読みください。

​

ブロックコンポーネント

ブロックは、フォームに機能を追加するためのUIコンポーネントで、ユーザー情報は収集しません。

​

Forms で使用できるブロック

使用できるブロックは次のとおりです。

次へボタンブロック

ユーザーが次のフォームノードに進むためのボタンです。

• 続行前に、フィールドのバリデーションルールがクライアント側とサーバー側の両方で適用・検証されます。バリデーションに失敗した場合は、ユーザーが内容を確認できるようエラーメッセージが表示されます。
• 次のノードがフローノードの場合は、フローが完了するまでスピナーが表示されます。フローが失敗した場合、またはカスタムエラーメッセージが返された場合は、エラーメッセージが表示されます。

戻るボタンブロック

ユーザーが前のステップノードに戻るためのボタンです。

ユーザーが戻るボタンを選択した場合、続行前に入力データが変更されていなくても、フィールドのバリデーションルールが再実行されます。

ジャンプボタンブロック

ユーザーが現在のステップをスキップして、遷移先ノードに直接移動するためのボタンです。

現在のステップをスキップする場合、そのステップで入力された情報は検証も収集もされません。

再送ボタンブロック

ユーザーがフローを再実行して、新しい OTP コードを生成・送信できるコンポーネントです。

ユーザーが再送ボタンを選択すると、関連するフローによって新しい OTP コードが生成され、送信されます。

Settings	Description
Text alignment	テキストの配置を左、中央、右から選択します
Text	ユーザーが再送ボタンを選択したときに表示されるデフォルトのテキスト
Button text	ボタンのテキスト
Waiting text	ユーザーが再送ボタンを選択したときに表示されるテキストです。Text および Button text の設定の代わりに表示されます。“{{remaining_seconds}}” 変数を使用すると、送信ボタンが再び有効になるまでの残り秒数を動的に表示できます。例: “{{remaining_seconds}} 秒後に再送”
Flow	ユーザーが再送ボタンを選択した後に実行されるフロー
Max attempts	ユーザーが再送ボタンを選択できる最大回数
Waiting time	試行間の待機時間 (秒)

リッチテキストブロック

追加情報を表示してステップノードをカスタマイズするためのリッチテキストブロックです。

区切り線ブロック

ステップノード内の異なるセクションを区切るための線です。短いテキストを含めることもできます。

HTML ブロック

カスタム UI を作成するための HTML ブロックです。

画像ブロック

画像を追加してステップをカスタマイズするための画像ブロックです。

​

Widgets コンポーネント

Widgets は、サードパーティ連携が組み込まれた事前構築済みのコンポーネントで、フォームにクライアントサイドとサーバーサイドのロジックを追加できます。

​

Forms で使用できるウィジェット

使用できるウィジェットは次のとおりです。

Google Address ウィジェット

ユーザーが住所を入力して検証できるウィジェットです。

Google Address ウィジェットの設定

Google Address ウィジェットの設定は次のとおりです。

Settings	Description
API key	リクエストの認証には Google Maps API キーが必要です。

Google Address ウィジェットの出力値

Google Address ウィジェットの出力値のデータ型は object です。

{
  "google_address_widget_id": {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -73.9654415,
        40.8054491
      ]
    },
    "properties": {
      "geocoding": {
        "type": "house",
        "housenumber": "2880",
        "street": "Broadway",
        "city": "New York",
        "county": "New York County",
        "state": "New York",
        "country": "United States",
        "postcode": "10025"
      }
    }
  }
}

Google reCAPTCHA

ユーザーが人間でありボットではないことを検証することで、Web サイトをスパムや不正利用から保護するのに役立つウィジェットです。

このウィジェットでは、次のタイプをサポートしています。

• スコアベース (v3)

• チャレンジ (v2)

  • 非表示の reCAPTCHA バッジ

v2 と v3 の違い:

• v2 では、チェックボックスをクリックしたりパズルを解いたりするなど、表示されるチャレンジに対するユーザー操作が必要です。
• v3 はバックグラウンドで実行され、ユーザー操作なしで、ユーザーの行動に基づくスコアを提供します。このバージョンを使用する場合は、スコアを処理し、追加の対応が必要かどうかを判断するためのビジネスロジックを必ず実装してください。

Google reCAPTCHA ウィジェットの設定

Google reCAPTCHA ウィジェットの設定は次のとおりです。

Settings	Description
Site key	Web サイトで reCAPTCHA を初期化するために使用する公開サイトキーです。Google reCAPTCHA console または Google Cloud Platform プロジェクトで作成できます。
Secret key	サーバー側で reCAPTCHA サービスと安全に通信するために使用するシークレットキーです。Google reCAPTCHA console または Google Cloud Platform プロジェクトで作成できます。

Google reCAPTCHA の出力値

Google reCAPTCHA ウィジェットの出力値のデータ型は object です。

v2 レスポンスの例:

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com"
  }
}

v3 レスポンスの例:

{
  "recaptcha_widget_id": {
    "success": true,
    "challenge_ts": "2025-03-26T11:22:18Z",
    "hostname": "auth.example.com",
    "score": 0.9
  }
}

Verifiable Credentials

デジタルウォレットに保存された検証可能な資格情報を使用して、ユーザーが本人確認を行えるようにするウィジェットです。

Verifiable Credentials ウィジェットの設定

Verifiable Credentials ウィジェットの設定は次のとおりです。

Settings	Description
URL	QR コードの生成に使用する URL 値です。この値は、検証リクエストの engagement プロパティで返されます。
Link text	QR コードをスキャンできず、代わりに自分のデバイスでリンクを直接開きたいユーザー向けに表示される代替テキストです。
Size	QR コードのサイズです。
Public token	ポーリングエンドポイントを利用するために必要なアクセストークンです。他のリソースへのアクセスが公開されないよう、このトークンは read:verification_request スコープのみで生成されていることを確認してください。
Verification ID	検証リクエストの開始時に生成される検証 ID です。
Maximum waiting time	検証プロセスの完了を待機する最大時間です。設定した時間に達すると、検証ステータスに関係なくポーリングは停止し、エラーがスローされます。

Verifiable Credentials の出力値

Verifiable Credentials ウィジェットの出力値のデータ型は object です。

{
  "verifiable_credentials_widget_id": {
    "state": "honored",
    "reason": "...", // reason フィールドには、検証リクエストの state に関する追加情報（利用可能な場合）が含まれます。 
    "presentation": {} // presentation には、presentation definition への応答としてウォレットから提供されたクレームが含まれます。
  }
}

​

ルーターノード

ルーターノードでは、ルールを追加して、ノード間の条件分岐を作成できます。

デフォルトでは、ルーターノードには Default Case という名前の通過ルールが 1 つあり、他のノードに接続されます。さらに、変数が満たす条件のセットに基づいてルールを追加し、他のノードに接続できます。詳しくは、Router をご覧ください。

​

フローノード

フローノードを使用すると、フォームにカスタムロジックや統合フローを追加し、作成できます。詳しくは、Flowsをご覧ください。

​

開始ノード

開始ノードはユーザーには表示されません。ここでは、Action を使用してフォームをレンダリングする際のユーザー属性など、非表示フィールド変数を設定できます。

​

終了画面ノード

すべてのフォームには終了画面ノードがあります。既定では、このノードで認証フローが再開され、ここで送信後フローを設定できます。