フォームアシスト機能
フォームアシストとは、会員の新規登録フォームなどに、ソーシャルログイン時に得られた個人情報（氏名やメールアドレス、住所など）をシステム的に自動入力し、ユーザーのフォーム入力の利便性を向上させる機能です。
ソーシャルPLUS が提供する「フォームアシスト機能」は、お客様サーバ側でフォームに個人情報を自動入力する処理を実装することなく、ソーシャルログインマネージャーでの設定と JavaScript タグの貼り付けのみで実現する機能となります。
フォームアシスト可能な項目
詳しくは フォームアシスト可能な項目 のページを参照してください。
導入の流れ
おおまかな追加実装は以下となります。
- ソーシャルログインの設置
- フォームアシスト 貼り付けタグの設置
汎用的なサービスでのご利用イメージとして、以下の導入イメージをご確認ください。
1. ソーシャルログインの設置
フォームアシストを行いたいフォームのあるページに、ソーシャルログインのコールバック時に返される「ID Token」のフラグメントパラメータが渡されるようにソーシャルログインを設置します。
つまり、Authorization エンドポイントの redirect_uri に「フォームが設置されたページの URL」を指定します。
- Implicit フロー：フォームアシストのみ利用する場合
- Hybrid フロー：フォームアシスト（フロントエンドの処理）だけでなく、認可コードを使ってバックエンドの処理も行いたい場合
Authroization Code フローではフロントエンドに ID Token を直接返さないため、フォームアシストを利用することはできません。
ソーシャルログインを利用するための設定も必要です。
2. ソーシャルログインマネージャーでフォームアシスト設定を行う
お客様サービスのフォーム項目（"name" 属性値）と、利用したい「個人情報項目」の対応を［フォームアシスト設定］から設定します。
- ソーシャルログインマネージャー にアクセスし、ご利用のサービスを選択したあと［フォームアシスト設定］のページを表示します。
- 各カテゴリの［フィールドを追加する］ボタンから、利用したい項目を選択して追加します。
- フィールドごとに、サイト上のフォームに対応する［name 属性］の値を入力します。
- すべて入力したら［保存する］で設定を完了します。
ご利用サービスのフォーム設置ページ内に複数の form タグが存在する場合は、フォームアシスト機能を適用したいフォームを区別するために、対象とするフォームの name 属性値、または id 属性値を指定してください。
ページ内に form タグが１つの場合は空欄のままでも構いません。
例えば、「会員登録フォーム」のあるページ上部に「検索フォーム」がある場合などが想定されます。
3. 貼り付けタグの設置
フォームアシストを行いたいフォームのあるページに貼り付けタグを設置します。
貼り付けタグは［フォームアシスト設定］ページから取得できます。
4. 動作確認
設定と設置が完了しましたら、実際にソーシャルログインを行い、フォームアシストが動作するかご確認ください。
上手くフォームアシストされない場合は、以下をご確認ください。
ソーシャルログイン
- Authorization エンドポイントの
scopeパラメータに、取得したい個人情報を正しく指定しているか - Authorization エンドポイントの
redirect_uriパラメータに、フォームのあるページ URL を指定しているか
ソーシャルログインマネージャー
- ［フォームアシスト設定］が正しく設定されているか
- ［サービス設定］>［コールバックURL］に、フォームのあるページ URL を設定しているか
サービス側のフォーム画面
- フォームアシストの貼り付けタグが正しく設置されているか
ブラウザの JavaScript コンソール
- JavaScript エラーが表示されていないか
- JavaScript エラーが表示されている場合は、一度フォームアシストの貼り付けタグを外し、エラーが再現するかご確認ください（エラー発生箇所の切り分け）
機能に関する注意事項
- 「フォームアシスト設定」は、１つのサービス設定につき１パターンのみ登録可能です。
- フォームアシスト機能は JavaScript で提供されている仕様上、お客様サービスに導入されている他の JavaScript ライブラリと競合が発生する可能性があります。導入の際にはお客様サービス上で競合による問題が発生していないか検証をお願いいたします。
JavaScript やフォームの読み込み順、レンダリングなどで問題が発生しやすいため、Google Tag Manager を用いた設置は非推奨です。 ご利用の場合は、必ずお客様サービス側での検証や動作確認を行ってください。
すでに入力値のあるフォーム項目について
フォームアシスト機能では、基本的には、すでに入力値のあるフォーム項目にはフォームアシストされません。
- 「ドロップダウン」の場合、選択済みの子要素が一番上の場合は選択状態を更新します
- それ以外の場合、値が空のときのみフォームアシストします