Unbounce のランディングページでユーザー情報を取得する

Unbounce のランディングページでワンクリックのソーシャル認証を使ってユーザー情報を取得する方法。

​

Auth0 の設定

1. Auth0 アカウントを作成し、ダッシュボードに移動します。
2. Dashboard > Applications に移動して + Create Application をクリックします。Single-Page Application を選択し、Settings に進みます。Client ID と Domain を控えておきます。
3. Allowed Callback URLs と Allowed Origins (CORS) の両方に callback URL を追加します。Unbounce ページの URL を指定してください。例: http://unbouncepages.com/changeit
4. Dashboard > Authentication > Social に移動し、利用するソーシャルプロバイダーを有効にします。

​

Unbounce の設定

1. ボタンなど、プロバイダーでのログインを開始するための新しい UI 要素を作成します。UI 要素の ID は Properties > Element Metadata で確認してください。
2. Unbounce のランディングページに新しい JavaScript を追加し、Placement で Before Body End Tag を選択して、以下のコードを追加します。あわせて、依存関係として jQuery にチェックを入れてください。

先ほど設定したアプリケーションのClient IDとDomainを使用します。

次に、ソーシャルプロバイダーから渡される情報を Unbounce に渡す仕組みが必要です。

1. フォームを作成し、各項目に Hidden fields を追加します。たとえば、name フィールドと email フィールドです。

2. Unbounce の JavaScript エディターに戻ります。

3. ソーシャル認証を開始するため、各ボタンにクリックハンドラーを追加します。

   1. 先ほど控えたボタン ID と connection name に置き換えます。たとえば、Google の場合は google-oauth2、LinkedIn の場合は linkedin を使用します。
   2. ID を正しく置き換えていることを確認してください。#name と #email の代わりに、該当するフォームフィールドの ID を指定してください (フォームの編集中に Field Name and ID で確認できます) 。

$('#{buttonId}').bind('click', function() { 
  webAuth.authorize({
    connection: '{yourConnectionName}'
  });
});

// 認証完了後、parseHash メソッドが URL ハッシュフラグメントを解析し、Auth0 認証レスポンスの結果を取得します。

webAuth.parseHash({ hash: window.location.hash }, function(err, authResult) { 
  if (err) { 
    return console.log(err); 
  }

  if (authResult != null && authResult.accessToken != null) {
    webAuth.client.userInfo(authResult.accessToken, function(err, user) {
      $('#name').val(user.name); 
      $('#email').val(user.email); 
    }); 
  } 

});

これで、ユーザーがフォームを送信すると、Unbounce Admin Panel の Leads セクションで、IdP から提供された情報を確認できるようになります。