メインコンテンツへスキップ

​
Auth0の構成

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

​
Unbounceの構成

  1. プロバイダーでのログインをトリガーするボタンなどのUI要素を作成します。［Properties（プロパティ）］>［Element Metadata（要素のメタデータ）］ にあるUI要素のIDをメモします。
  2. 新しい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>
先ほど構成したアプリケーションのクライアントIDとドメインを使用します。 次に、ソーシャルプロバイダーからの情報をUnbounceに渡す方法が必要です。
  1. フォームを作成して、それぞれのフィールドにHidden fields（隠しフィールド）を追加します。たとえば、nameやemailのフィールドです。
  2. UnbounceのJavaScriptエディターに戻ります。
  3. ソーシャル認証をトリガーするボタンのそれぞれにクリックハンドラーを追加します。
    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); 
    }); 
  } 

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