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

# ユーザー起点のアカウントのリンク：クライアント側実装

> ユーザーが他のアカウントに対して認証し、SPAを使用してこれらのアカウントをプライマリアカウントにリンクすることができるクライアント側UIを指定する方法を説明します。

Auth0は、様々なIDプロバイダーのユーザーアカウントのリンクをサポートします。この機能を実装する方法の1つは、ユーザーがアカウントを明示的にリンクできるようにすることです。このシナリオでは、ユーザーはシングルページアプリケーション（SPA）のUIを通じて認証を行い、後でリンクまたはボタンを使用して別のアカウントを最初のアカウントにリンクすることができます。このリンク/ボタンを押すと、アプリケーションが呼び出しを行い、ユーザーが2番目のプロバイダーでログインするときに、2番目のアカウントが最初のアカウントにリンクされます。

アカウントのリンクを始めるときに、プライマリアカウントとして使用するIDと、セカンダリアカウントとして使用するIDをそれぞれ選択することができます。プライマリアカウントからの属性のみが保持されるため、プライマリプロファイルにどの属性を保持したいかに応じて選択してください。

[GitHubで](https://github.com/auth0-samples/auth0-link-accounts-sample/tree/master/SPA)このプロジェクトを使用してサンプルのReactシングルページアプリケーションを作成します。

このプロジェクトの`auth_config.json`ファイルをテキストエディターで開き、詳細を入力してドメインと`client_id`を更新します。

［Allowed Callback URL（許可されているコールバックURL）］、［Allowed Logout URLs（許可されているログアウトURL）］、［Allowed Web Origins（許可されているWebオリジン）］に`http://localhost:3000`を追加します。

1. ユーザーをアプリケーションにログインさせます。

   ユーザーは[ユニバーサルログイン](/docs/ja-jp/authenticate/login/auth0-universal-login)を使用してSPAに対して認証し、[Management APIのアクセストークン](/docs/ja-jp/api/management/v2/get-access-tokens-for-spas)を要求します。

   通常のSPAログインでは、コールバックは同じページのクライアント側で処理され、認証に成功した後にJWTを受け取ります。詳細については、「[シングルページアプリのQuickstart](/docs/ja-jp/quickstart/spa)」をお読みください。

2. ユーザーがアカウントリンクを始めます。SPAはユーザーに、他のアカウントへのリンクを始めるためのUIを提供する必要があります。たとえば、SPAにユーザーの設定ページを含めることができます。

   ユーザーが **［Link Account（アカウントのリンク）］** ボタンをクリックすると、ユーザーはユニバーサルログインページにリダイレクトされ、リンクしたい接続でログインします。正しく認証したら、取得したトークンを使用してアカウントをリンクします。

   また、接続ごとにボタン（［Link Facebook Account（Facebookアカウントのリンク）］、［Link Google Account（Googleアカウントのリンク）］など）を追加し、`connection`パラメーターセット（例：`/authorize?connection=facebook`）を使ってユーザーを`/authorize`にリダイレクトすることもできます。

   <Frame>
     <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/ja-jp/cdy7uua7fh8z/4qxdXGBnlVRDaTkw2wv9WP/8792cff7c5fc21910ec12495828539da/account-linking-spa.png" alt="Example profile page with user account linking" />
   </Frame>

3. Auth0 Management APIの[ユーザーアカウントのリンクエンドポイント](/docs/ja-jp/api/v2#!/Users/post_identities)を呼び出してアカウントをリンクします。

   <Warning>
     セカンダリアカウントから`user_metadata`を保持・マージするには、APIエンドポイントを呼び出す前に取得し、プライマリアカウントのメタデータにマージしなければなりません。アカウントがリンクされた時点で、セカンダリアカウントのメタデータは破棄されます。

     アカウントのリンクを始めるときに、プライマリアカウントとして使用するIDと、セカンダリアカウントとして使用するIDを選択できます。プライマリプロファイルでどの属性を保持したいかに応じて、選択してください。
   </Warning>

4. `linkAccount`関数で、Management APIを呼び出します。アクセストークンであるプライマリJWTを使用してAPIで認証を行い、プライマリユーザーのIDと、セカンダリユーザーのIDトークンであるセカンダリJWTを使用してリンクします。

   ```javascript lines theme={null}
   const linkAccount = async () => {
     const accessToken = await auth0.getTokenSilently();
     const { sub } = await auth0.getUser();
     // authenticateUser should authenticate the user with the account to be linked
     // See the Github sample for more details
     const {
       __raw: targetUserIdToken,
       email_verified,
       email,
     } = await authenticateUser();
     if (!email_verified) {
       throw new Error(
         `Account linking is only allowed to a verified account. Please verify your email ${email}.`
       );
     }
     await fetch(`https://${config.domain}/api/v2/users/${sub}/identities`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         Authorization: `Bearer ${accessToken}`,
       },
       body: JSON.stringify({
         link_with: targetUserIdToken,
       }),
     });
   };
   ```

<Card title="アカウントリンク：アクセストークンとIDトークン">
  以前は一部のケースで、IDトークンを使ってユーザーアカウントのリンクやリンク解除ができました。しかし、この機能は廃止されます。今後はすべてのケースでアクセストークンを使用する必要があります。アカウントのリンク解除における変更点は、今後はIDトークンを認可ヘッダーで使用できないという点です。代わりに、アクセストークンを使用しなければなりません。機能自体は存続していますが、非推奨であり、該当するユーザーには移行を推奨しています。詳細については、「[移行ガイド：アクセストークンまたはIDトークンを使ってアカウントをリンクする](/docs/ja-jp/troubleshoot/product-lifecycle/past-migrations/link-user-accounts-with-access-tokens-migration)」を参照してください。
</Card>

## もっと詳しく

* [ユーザーアカウントをリンクする](/docs/ja-jp/manage-users/user-accounts/user-account-linking/link-user-accounts)
* [ユーザーアカウントのリンクを解除する](/docs/ja-jp/manage-users/user-accounts/user-account-linking/unlink-user-accounts)
* [ユーザーアカウントのリンク：サーバー側実装](/docs/ja-jp/manage-users/user-accounts/user-account-linking/suggested-account-linking-server-side-implementation)