サイト内検索

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
Forms設定その1
Formsを利用するための事前設定

①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設定その2
ユーザーに表示するフォームの設定及びuser_metadataへのデータ格納設定

①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]をクリックし、設定を保存

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

Actionsへの組み込み
Formsを呼び出すためのActions設定を行います。

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

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

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

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

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

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

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

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

⑨[post-login]をクリック

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

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

動作例

初回ログイン動作

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

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

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

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

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

2回目以降のログイン動作

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

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

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

おわりに

本ページでは、Auth0 Forms機能を利用したProgressive Profilingの実現方法をご紹介しました。Forms機能を利用することで、user_metadataへのデータ格納有無に応じた入力フォームの表示切り替え、フォーム内容の変更等、ご要件に合わせた柔軟な対応を採ることができます。

無償のAuth0トライアル環境においても、Progressive Profilingの実現をお試しいただけます。

Auth0によるProgressive Profilingの実現にご興味ある方は、是非弊社までお問合せください。

参考

お問い合わせ・資料請求

株式会社マクニカ  Okta 担当

平日 9:00~17:00