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

Auth0の構成

Auth0アカウントを作成して、Dashboardに移動します。
［Dashboard］>［Applications（アプリケーション）］に移動して、［+ Create Application（アプリケーションの作成）］をクリックします。［Single-Page Application（シングルページアプリケーション）］オプションを選択して、［Settings（設定）］に移動します。クライアントIDとドメインをメモします。
コールバックURLを［Allowed Callback URLs（許可されているCallback URL）］と［Allowed Origins (CORS)（許可されているオリジン（CORS））］の方法に追加します。それをUnbounceページのURLにします。例：http://unbouncepages.com/changeit.
［Dashboard］>［Authentication（認証）］>［Social（ソーシャル）］に移動して、対応したいソーシャルプロバイダーを有効にします。

Unbounceの構成

プロバイダーでのログインをトリガーするボタンなどのUI要素を作成します。［Properties（プロパティ）］>［Element Metadata（要素のメタデータ）］にあるUI要素のIDをメモします。
新しいJavaScriptをUnbounceのランディングページに追加して、［Placement（配置）］に［Before Body End Tag（ボディの終了タグの前）］を選択し、以下のコードを追加します。また、依存関係として［jQuery］を選択します。

<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
<script type="application/javascript">
  var webAuth = new auth0.WebAuth({
    domain:       '{yourDomain}',
    clientID:     '{yourClientId}',
    audience: 'https://{yourClientId}/userinfo'
    redirectUri:  '{yourUnbouncePageUrl}', // e.g http://unbouncepages.com/changeit
    scope: 'openid profile email',
    responseType: 'token id_token',
  });
</script>

Was this helpful?

先ほど構成したアプリケーションのクライアントIDとドメインを使用します。

次に、ソーシャルプロバイダーからの情報をUnbounceに渡す方法が必要です。

フォームを作成して、それぞれのフィールドにHidden fields（隠しフィールド）を追加します。たとえば、nameやemailのフィールドです。
UnbounceのJavaScriptエディターに戻ります。
ソーシャル認証をトリガーするボタンのそれぞれにクリックハンドラーを追加します。
1. 前の手順でメモしたボタンIDと接続名を置き換えます。たとえば、Googleであればgoogle-oauth2、LinkedInであればlinkedinを使用します。
2. IDは必ず正しく置換してください。#nameや#emailではなく、フォームにあるそのフィールドのIDを入力します（フォームの編集中に［Field Name and ID（フィールド名とID）］の下に表示されます）。

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

// After authentication occurs, the parseHash method parses a URL hash fragment to extract the result of an Auth0 authentication response.

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); 
    }); 
  } 

});

Was this helpful?

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

ユーザー管理

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

Auth0の構成

Unbounceの構成