ノードとコンポーネント

Form ノードと利用可能なコンポーネントについて学習します。

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

​

フォームノード

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

​

Step ノード

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

​

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

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

​

フィールド設定

フィールドには、要件に応じて設定できるデフォルト設定がいくつかあります。

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

設定	説明
ID	一意の ID
Label	ラベルの表示 / 非表示
Required	入力値を必須にする
Hint text	ヒントテキストを表示する
Placeholder text	ユーザーに表示されるプレースホルダーテキスト
Default value	ユーザーに表示されるデフォルト値
Transient	データのマスキングを有効または無効にする

​

フィールドのバリデーションルール

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

​

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

choice フィールドの出力データ型は、array of strings です。

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

カード フィールド

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

Cards フィールドの設定

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

Settings	Description
複数選択	複数の選択肢を有効にします。
ラベルを非表示	カードのラベルを非表示にします。
Advanced > Internal values	各オプションに内部値を割り当てます。

Cards フィールドの出力値

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

Cards フィールドの出力値が 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"
}

パスワードフィールド

ユーザーがパスワードまたはシークレット値を入力できる標準の入力フィールドです。

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

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

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

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

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

{
  "password_field_id": "███"
}

決済フィールド

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

Payment field settings

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

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

Payment field output value

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

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

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

サブスクリプションの payment フィールドの出力値のデータ型は 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 の payment フィールドの出力値のデータ型は 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
}

ドロップダウン項目

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

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

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

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

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

ドロップダウンフィールドの出力値のデータ型は、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"
}

日付/時刻フィールドにおける time の出力データ型の値は 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 を使用して値を検証できます。

詳細については、Forms のカスタムフィールドコンポーネントを参照してください。

​

ブロックコンポーネント

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

​

Forms で使用可能なブロック

使用可能なブロックは次のとおりです。

次へボタンブロック

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

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

前へボタンブロック

ユーザーが前のStep ノードに戻るためのボタンです。

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

ジャンプボタンブロック

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

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

再送ボタンブロック

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

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

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

リッチテキストブロック

追加情報を加えてStep ノードをパーソナライズするためのリッチテキストブロックです。

区切り線ブロック

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

HTML ブロック

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

画像ブロック

画像を追加してステップをパーソナライズするための画像ブロックです。

​

ウィジェットコンポーネント

ウィジェットは、サードパーティ統合を備えた事前構築済みコンポーネントで、フォームにクライアントサイドおよびサーバーサイドのロジックを追加します。

​

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

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

Google Address ウィジェット

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

Google Address ウィジェットの設定

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

設定	説明
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 ウィジェットの設定項目は次のとおりです。

設定	説明
Site key	Web サイトで reCAPTCHA を初期化するために使用する公開サイトキーです。Google reCAPTCHA コンソール または Google Cloud Platform プロジェクトで作成できます。
Secret key	サーバー側で reCAPTCHA サービスと安全に通信するために使用するシークレットキーです。Google reCAPTCHA コンソール または 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 ウィジェットの設定項目は次のとおりです。

設定	説明
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 には、プレゼンテーション定義に応じてウォレットから提供されたクレームが含まれます。
  }
}

​

ルーターノード

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

デフォルトでは、ルーターノードには Default Case という名前のパススルールールが 1 つあり、他のノードに接続します。変数が満たす一連の条件に基づいてルールを追加し、他のノードに接続できます。詳しくは、Router. を参照してください。

​

フローノード

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

​

開始ノード

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

​

終了画面ノード

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