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

​

Auth0 Configuration

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

​

Unbounce の設定

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

1. Form を作成し、各項目に Hidden fields を追加します。たとえば、name フィールドや email フィールドです。
2. Unbounce の JavaScript エディターに戻ります。
3. 各ボタンに、ソーシャル認証をトリガーするクリックハンドラーを追加します。
   1. 先ほど控えたボタン ID と 接続名 に置き換えます。たとえば、Google には google-oauth2、LinkedIn には linkedin を使用します。
   2. ID を正しく置き換えていることを確認してください。#name と #email の代わりに、該当する Form フィールドの ID を指定する必要があります (Form の編集中に 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); 
    }); 
  } 

});