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

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

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

GitHubでこのプロジェクトを使用してサンプルのReactシングルページアプリケーションを作成します。

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

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

ユーザーをアプリケーションにログインさせます。
ユーザーはユニバーサルログインを使用してSPAに対して認証し、Management APIのアクセストークンを要求します。
通常のSPAログインでは、コールバックは同じページのクライアント側で処理され、認証に成功した後にJWTを受け取ります。詳細については、「シングルページアプリのQuickstart」をお読みください。
ユーザーがアカウントリンクを始めます。SPAはユーザーに、他のアカウントへのリンクを始めるためのUIを提供する必要があります。たとえば、SPAにユーザーの設定ページを含めることができます。
ユーザーが［Link Account（アカウントのリンク）］ボタンをクリックすると、ユーザーはユニバーサルログインページにリダイレクトされ、リンクしたい接続でログインします。正しく認証したら、取得したトークンを使用してアカウントをリンクします。
また、接続ごとにボタン（［Link Facebook Account（Facebookアカウントのリンク）］、［Link Google Account（Googleアカウントのリンク）］など）を追加し、connectionパラメーターセット（例：/authorize?connection=facebook）を使ってユーザーを/authorizeにリダイレクトすることもできます。
Auth0 Management APIのユーザーアカウントのリンクエンドポイントを呼び出してアカウントをリンクします。
セカンダリアカウントからuser_metadataを保持・マージするには、APIエンドポイントを呼び出す前に取得し、プライマリアカウントのメタデータにマージしなければなりません。アカウントがリンクされた時点で、セカンダリアカウントのメタデータは破棄されます。
アカウントのリンクを始めるときに、プライマリアカウントとして使用するIDと、セカンダリアカウントとして使用するIDを選択できます。プライマリプロファイルでどの属性を保持したいかに応じて、選択してください。
linkAccount関数で、Management APIを呼び出します。アクセストークンであるプライマリJWTを使用してAPIで認証を行い、プライマリユーザーのIDと、セカンダリユーザーのIDトークンであるセカンダリJWTを使用してリンクします。
```
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,
    }),
  });
};
```
Was this helpful?
/

アカウントリンク：アクセストークンとIDトークン

以前は一部のケースで、IDトークンを使ってユーザーアカウントのリンクやリンク解除ができました。しかし、この機能は廃止されます。今後はすべてのケースでアクセストークンを使用する必要があります。アカウントのリンク解除における変更点は、今後はIDトークンを認可ヘッダーで使用できないという点です。代わりに、アクセストークンを使用しなければなりません。機能自体は存続していますが、非推奨であり、該当するユーザーには移行を推奨しています。詳細については、「移行ガイド：アクセストークンまたはIDトークンを使ってアカウントをリンクする」を参照してください。

ユーザー管理

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

アカウントリンク：アクセストークンとIDトークン

もっと詳しく