> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Unbounceのランディングページでワンクリックのソーシャル認証を使用してユーザー情報を取得する方法について説明します。

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

## Auth0の構成

1. Auth0アカウントを作成して、[Dashboard](https://manage.auth0.com/#)に移動します。
2. [［Dashboard］>［Applications（アプリケーション）］](https://manage.auth0.com/#/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（ソーシャル）］](https://manage.auth0.com/#/connections/social)に移動して、対応したいソーシャルプロバイダーを有効にします。

## Unbounceの構成

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

export const codeExample = `<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>`;

<AuthCodeBlock children={codeExample} language="html" />

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

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

1. フォームを作成して、それぞれのフィールドに`Hidden fields`（隠しフィールド）を追加します。たとえば、`name`や`email`のフィールドです。
2. UnbounceのJavaScriptエディターに戻ります。
3. ソーシャル認証をトリガーするボタンのそれぞれにクリックハンドラーを追加します。

   1. 前の手順でメモしたボタンIDと[接続名](/docs/ja-jp/authenticate/identity-providers/locate-the-connection-id)を置き換えます。たとえば、Googleであれば`google-oauth2`、LinkedInであれば`linkedin`を使用します。
   2. IDは必ず正しく置換してください。`#name`や`#email`ではなく、フォームにあるそのフィールドのIDを入力します（フォームの編集中に［`Field Name and ID`（フィールド名とID）］の下に表示されます）。

```javascript lines theme={null}
$('#{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); 
    }); 
  } 

});
```

これで、ユーザーがフォームを送信すると、<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-2" href="/docs/ja-jp/glossary?term=idp" tip="IDプロバイダー（IdP）: デジタルIDを保存および管理するサービス。" cta="用語集の表示">IdP</Tooltip>からの情報をUnbounce Admin Panelの`Leads`セクションで確認できるようになりました。