
Okta
オクタ
Auth0 Forms機能を利用したProgressive Profilingの実現
はじめに
Progressive Profilingとは、会員登録画面等において、段階的にユーザー情報を収集する手法です。
段階的に情報入力を求め、ユーザーへの回答負担を減らすことで、回答率の向上及びより多くのユーザー情報収集を期待できます。また、回答が面倒等の理由で、ユーザーが登録を途中で断念してしまうことを回避し、ユーザーの離脱率を改善することも期待できます。
Auth0ではForms機能を利用することで、Progressive Profilingを容易に実現できます。
user_metadataへのデータ格納有無に応じた入力フォームの表示切替、フォーム内容の変更等柔軟な対応ができます。
本ページでは、user_metadataへのデータ格納有無に応じた入力フォームの表示について、Forms機能を利用した実現方法と動作例をご紹介します。
前提
本ページ記載の機能及び設定に関する内容は、2025年7月現在の情報となります。
設定概要
- 事前準備
- Auth0連携アプリケーション作成
- Formsと連携するためのMachine to Machine Applicationの作成
- Forms設定その1
- Formsを利用するための事前設定
- Forms設定その2
- ユーザーに表示するフォームの設定及びuser_metadataへのデータ格納設定
- Actionsへの組み込み
- Formsを呼び出すためのActions設定
今回使用するFormsのコンポーネントは、以下の通りです。
コンポーネント | 使用用途 |
Rich text | 表示させたい文言を設定 |
Text | ユーザーに入力させるテキストボックスを設定 |
Phone | ユーザーに入力させる電話番号入力欄を設定 |
Next button | 次のステップに進むためのボタンを設定 |
Dropdown | ユーザーに選択させるドロップダウンリストを設定 |
設定例
- 事前準備
- Auth0連携サンプルアプリケーション作成
サンプルアプリケーションの作成方法は、Auth0とサンプルアプリケーションの連携設定方法をご確認ください。 - Formsと連携するためのMachine to Machine Applicationの作成
以下のAuth0 Management APIのスコープを有効にしているMachine to Machine Applicationを作成します。
・read:users
・update:users
・create:users
・read:users_app_metadata
・update:users_app_metadata
・create:users_app_metadata
- Auth0連携サンプルアプリケーション作成
①Auth0管理画面 > アクション > フォームをクリックし、Forms設定画面へ遷移

②[Create form]をクリック

③[Use a template]をクリック

④Templatesの中から、左上のProgressive Profiling上にカーソルを合わせる

⑤[Configure Template]をクリック

⑥任意のForm nameとFlow 1 nameを設定し、[Continue]をクリック

⑦Vault connection選択欄右側の[+]をクリック

⑧任意のVault Connection nameを設定し、[Continue]をクリック

⑨Vault接続として、事前準備で作成したMachine to Machine ApplicationのTenant domain、Client ID、Client Secretを設定し、[Add Vault Connection]をクリック

⑩[Create]をクリック

①Forms設定その1が終わると以下画像の画面が表示

②Router設定
フォームを表示する条件を設定

(ア)Missing Profile Dataの内容
ユーザーのuser_metadataにjob_titleがなければフォームを表示する条件

(イ)Missing company dataの内容
ユーザーのuser_metadataにcompany_nameがなければフォームを表示する条件

③Step設定
ユーザーに表示するフォーム内容を設定
(ア)初回ログイン時表示用のフォーム設定
I.Rich text

II.Text

III.Phone

IV.Next button

(イ)2回目以降にユーザーに表示させるフォーム設定
I.Rich text

II.Text

III.Dropdown

IV.Next button

④Flow設定
ユーザーがフォームに入力したデータのuser_metadataへの格納設定
(ア)[Edit Flow]をクリック

(イ)Update userをクリック

(ウ)ユーザーがフォームに入力したデータをuser_metadataに格納するための設定
I.Valut connection:Forms設定その1の⑩で作成したConnectionを設定
II.User ID:ユーザーのuser_idを設定
-{{context.user.user_id}}でユーザーのuser_idが取得可能
III.Body:user_metadataにデータを格納するためのスクリプトを記述
-{{fields.XXX}}で、XXXにユーザーが入力するフォームのIDを設定することで、ユーザーが入力したデータを取得可能
Formsで利用可能な変数については、変数とヘルパー関数をご確認ください。

⑤[Publish]をクリックし、設定を保存

⑥正常に保存されたことを確認

①Forms設定画面上部の[<> Render]をクリック

②[Copy]をクリックし、表示されているコードをコピー

③Auth0管理画面 > アクション > ライブラリーに遷移

④アクションの作成 > 初めから構築するをクリック

⑤任意の名前を入力し、[作成]をクリック

⑥ ①でコピーしたコードをペーストし、[デプロイ]をクリック

⑦正常に保存されたことを確認

⑧アクション > トリガーをクリック

⑨[post-login]をクリック

⑩作成したActionをフローにドラッグ&ドロップし、[適用]をクリック

⑪正常に保存されたことを確認

動作例
①Auth0と連携済みのサンプルアプリケーションを起動し、[Log in]をクリック

②[サインアップ]をクリック

③メールアドレスとパスワードを入力し、[続ける]をクリック

④表示されたフォームに情報を入力し、[続ける]をクリック
※事前に Forms 内 Router で設定した Missing Profile Data に応じた画面が表示されます。

⑤ログイン完了
以下画面にて、フォームに入力した情報が格納されていることを確認
-Auth0管理画面 > ユーザー管理 > ユーザー > 対象ユーザー > メタデータ

①ログイン画面にて、初回ログインで登録したユーザーのメールアドレスとパスワードを入力し、[続ける]をクリック

②表示されたフォームに情報を入力し、[続ける]をクリック
※事前に Forms 内 Router で設定した Missing Company Data に応じた画面が表示されます。

③ログイン完了
以下画面にて、フォームに入力した情報が格納されていることを確認
-Auth0管理画面 > ユーザー管理 > ユーザー > 対象ユーザー > メタデータ

おわりに
本ページでは、Auth0 Forms機能を利用したProgressive Profilingの実現方法をご紹介しました。Forms機能を利用することで、user_metadataへのデータ格納有無に応じた入力フォームの表示切り替え、フォーム内容の変更等、ご要件に合わせた柔軟な対応を採ることができます。
無償のAuth0トライアル環境においても、Progressive Profilingの実現をお試しいただけます。
Auth0によるProgressive Profilingの実現にご興味ある方は、是非弊社までお問合せください。
参考
お問い合わせ・資料請求
株式会社マクニカ Okta 担当
- TEL:045-476-2010
- E-mail:okta@macnica.co.jp
平日 9:00~17:00