ユーザー主導のアカウントリンク: クライアントサイド実装

Auth0 は、さまざまなのユーザーアカウントのリンクをサポートしています。この機能を実装する方法の 1 つは、ユーザーが明示的にアカウントをリンクできるようにすることです。このシナリオでは、ユーザーは Single Page Application (SPA) の UI で認証し、その後、リンクまたはボタンを使用して別のアカウントを最初のアカウントにリンクできます。ユーザーがこのリンクまたはボタンをクリックすると、アプリケーションが呼び出しを行い、ユーザーが 2 つ目のプロバイダーでログインした際に、その 2 つ目のアカウントが 1 つ目のアカウントにリンクされます。アカウントリンクを開始する際は、どのアイデンティティをプライマリアカウントとして使用し、どのアイデンティティをセカンダリアカウントとして使用するかを選択できます。この選択は、プライマリプロファイルに残したい属性のセットによって決まります。保持されるのは、プライマリアカウントの属性のみだからです。このプロジェクトを使用して、GitHub 上の React サンプル Single Page Application を作成します。このプロジェクトでは、テキストエディターで auth_config.json ファイルを開き、ドメインと client_id をご自身の情報に更新します。 “Allowed Callback URLs”、“Allowed Logout URLs”、“Allowed Web Origins” フィールドに http://localhost:3000 を追加します。

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

ユーザーは Universal Login を使用して SPA で認証を行い、Management API 用のアクセストークンを要求します。

一般的な SPA のログインでは、コールバックは同じページ上でクライアント側により処理され、認証に成功すると JWT を受け取ります。詳細については、Single-Page App Quickstart を参照してください。
ユーザーがアカウントリンクを開始します。SPA では、ユーザーが自分の別のアカウントとのリンクを開始できる UI を提供する必要があります。たとえば、SPA にユーザー設定ページを用意できます。

ユーザーが アカウントをリンク ボタンをクリックすると、アプリはユーザーを Universal Login ページにリダイレクトし、リンク先にする接続でログインさせます。認証が成功したら、取得したトークンを使用してアカウントをリンクします。

また、各接続に対応するボタン (例: ‘Facebook アカウントをリンク’, ‘Google アカウントをリンク’) を追加し、connection パラメーターを設定して (例: /authorize?connection=facebook) /authorize にリダイレクトすることもできます。
Auth0 Management API の Link a User Account endpoint を呼び出して、アカウントをリンクします。
セカンダリアカウントの user_metadata を保持してマージするには、API endpoint を呼び出す前にそれを取得し、プライマリアカウントのメタデータにマージする必要があります。アカウントをリンクすると、セカンダリアカウントのメタデータは破棄されます。アカウントリンクを開始する際に、どのアイデンティティをプライマリアカウントとして使用し、どれをセカンダリアカウントとして使用するかを選択できます。この選択は、プライマリプロファイルに保持したい属性のセットによって決まります。

linkAccount 関数内で Management API を呼び出します。プライマリ JWT (アクセストークン) を使用して API に認証し、プライマリユーザーの ID とセカンダリ JWT (セカンダリユーザーの IDトークン) を使用してリンクします。

const linkAccount = async () => {
  const accessToken = await auth0.getTokenSilently();
  const { sub } = await auth0.getUser();
  // authenticateUser は、リンク対象のアカウントでユーザーを認証する必要があります
  // 詳細については Github サンプルを参照してください
  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,
    }),
  });
};

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

以前は、場合によっては IDトークンを使用してユーザーアカウントのリンクおよびリンク解除を行うことができました。この機能は現在、非推奨となりつつあります。今後はすべてのケースでアクセストークンを使用する必要があります。アカウントのリンク解除に関する変更点は、Authorization ヘッダーで IDトークンを使用できなくなったことです。代わりにアクセストークンを使用する必要があります。この機能は引き続き利用できますが、推奨はされておらず、該当するユーザーには移行が推奨されます。詳細については、Migration Guide: Account Linking with Access Tokens vs. ID Tokens を参照してください。

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

​詳細はこちら

詳細はこちら