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

> 同じメールアドレスに紐づく2つのアカウントを持つユーザーに、それらをリンクするよう促す Account Link 拡張機能について説明します。

# Account Link 拡張機能

Account Link 拡張機能は、誤って2つ目のアカウントを作成してしまった可能性があるユーザーに対して、初回ログイン時に新しいアカウントを既存のアカウントにリンクするよう促します。2つ目のアカウントを意図的に作成した場合は、2つのアカウントをリンクするか、別々のままにしておくかをユーザーが選択できます。

<div id="how-does-the-extension-work">
  ## 拡張機能はどのように動作しますか？
</div>

この拡張機能は、認証後、認証したユーザーのメールアドレスが、別の<Tooltip tip="IDプロバイダー（IdP）: デジタルアイデンティティを保存・管理するサービス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=identity+provider">アイデンティティプロバイダー</Tooltip>に紐づく既存ユーザーアカウントのメールアドレスと一致した場合に実行されます。

たとえば、ユーザーが `john@acme.com` というメールアドレスで Facebook アカウントを使ってログインし、その後、同じメールアドレスで Google を使って認証すると、次のようなページが表示されます。

<Frame>
  <img src="https://mintcdn.com/translations/MV7tE-x71x8RWRES/docs/images/cdy7uua7fh8z/5K3KBOkhyP1SbAVaYg1yxD/618568208eca3cd15000d716ae9a1e00/account-linking-extension.png?fit=max&auto=format&n=MV7tE-x71x8RWRES&q=85&s=deb2c930383073729cf3fa9eb22fbe5b" alt="Auth0 Dashboard - 拡張機能 - Account Link - 拡張機能の例" width="1502" height="1021" data-path="docs/images/cdy7uua7fh8z/5K3KBOkhyP1SbAVaYg1yxD/618568208eca3cd15000d716ae9a1e00/account-linking-extension.png" />
</Frame>

この拡張機能では、メールアドレスが確認済みであっても、同じメールアドレスを持つユーザーが自動的にリンクされることはありません。確認済みのメールアドレスだけでは、ユーザーがその時点で両方のアカウントに認証できることを証明するには不十分だからです。

ユーザーが **Continue** を選択すると、認証のために Facebook にリダイレクトされます。すでにログインしている場合は、Facebook からアプリケーションにリダイレクトされ、ユーザーアカウントは自動的にリンクされます。ログインしていない場合は、Facebook の認証情報を使って認証するよう求められます。Facebook から Auth0 にリダイレクトされた後、Facebook アカウントは Google アカウントとリンクされます。このプロセスにより、ユーザーが両方のアカウントに認証するための認証情報を持っていることが確認されるため、アカウントを安全かつ適切にリンクできます。

<div id="limitations">
  ### 制限事項
</div>

この拡張機能は、<Tooltip tip="Passwordless: 第1要素としてパスワードに依存しない認証の形式。" cta="用語集を表示" href="/docs/ja-jp/glossary?term=passwordless">パスワードレス</Tooltip> 接続、device authorization を使用して開始されるフロー、ならびに <Tooltip tip="Security Assertion Markup Language (SAML): パスワードなしで2者間の認証情報のやり取りを可能にする標準化されたプロトコル。" cta="用語集を表示" href="/docs/ja-jp/glossary?term=SAML">SAML</Tooltip> および WS-Federation プロトコルには対応していません。Account Link 拡張機能でサポートされていない接続については、代替手段として [Account Linking – サーバーサイド実装](/docs/ja-jp/manage-users/user-accounts/user-account-linking/suggested-account-linking-server-side-implementation) および [ユーザー主導の Account Linking – クライアントサイド実装](/docs/ja-jp/manage-users/user-accounts/user-account-linking/user-initiated-account-linking-client-side-implementation) を参照してください。

<div id="install-and-configure-extension">
  ## 拡張機能のインストールと設定
</div>

[Auth0 Dashboard > Extensions](https://manage.auth0.com/#/extensions) に移動し、**Auth0 Account Link** を選択します。**Install Extension** ウィンドウが開きます。

この拡張機能は、内部的に使用する `auth0-account-link` という名前の新しいアプリケーションと、既存のアカウントと同じメールアドレスを持つ新しいアカウントでユーザーがログインした場合に、そのユーザーを拡張機能へリダイレクトするための新しいルールを作成します。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Account Link 拡張機能 に関連付けられているアプリケーションのクライアントシークレットをローテーションした場合は、拡張機能をアンインストールし、再インストールしたうえで、新しいアプリケーションシークレットを使って再設定する必要があります。
</Callout>

テストするには、[このプロジェクト](https://github.com/auth0-samples/auth0-link-accounts-sample.git) を使って React Sample Single Page Application を作成します。

テキストエディターで `auth_config.json` ファイルを開き、domain と `client_id` をご自身の環境に合わせて更新します。

“Allowed Callback URLs”、“Allowed Logout URLs”、“Allowed Web Origins” フィールドに `http://localhost:3000` を追加します。

`http://localhost:3000` にログインし、接続を選択します。別の種類の接続を使用する、確認済みユーザーにすでに関連付けられているメールアドレスを入力します。

アカウントをリンクするには、**Continue.** を選択します。

ログインしたら、<Tooltip tip="Auth0 Dashboard: サービスを設定するための Auth0 の主要製品です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Auth0+dashboard">Auth0 Dashboard</Tooltip> でユーザーの詳細を確認します。ユーザーアカウントがリンクされていることを確認できます。

<div id="set-up-extension">
  ## 拡張機能の設定
</div>

<div id="change-application-name">
  ### アプリケーション名を変更する
</div>

拡張機能で使用されるデフォルトのアプリケーション名は、`Account Linking` のように、内容がわかりやすく、顧客にとって見やすい名前に変更することをおすすめします。顧客がプライマリアカウントを認証する際、**ログインページ** に表示されるためです。

<div id="update-the-login-page">
  ### ログインページを更新する
</div>

デフォルトでは、Auth0 の <Tooltip tip="Universal Login: アプリケーションは Auth0 の Authorization Server でホストされている Universal Login にリダイレクトされ、ユーザーの本人確認が行われます。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Universal+Login">Universal Login</Tooltip> では、通常、ユーザーはログインとサインアップの両方を行えます。しかし、アカウントリンクの際に、新しいアカウントとリンクするためにプライマリアカウントでの認証を求める場合、サインアップの選択肢が表示されるとユーザーを混乱させる可能性があります。

Universal Login でできることについて詳しくは、[Auth0 Universal Login](/docs/ja-jp/authenticate/login/auth0-universal-login) を参照してください。

これを防ぐため、ログインページに **Sign Up** オプションを非表示にするよう伝える query parameter を送信します。ただし、この query parameter を有効にするには、ログインページをカスタマイズする必要があります。

1. [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_settings) に移動し、**Login** ビューを選択します。
2. **Customize Login Page** スイッチをオンにして、その下のカスタムエディターを有効にします。このエディターで、Lock config に新しい行を追加します。
3. Lock widget を設定している object の下部付近で、次の行を追加します (`closable` 設定の後) 。
   `allowSignUp: !config.extraParams.prevent_sign_up,`

   <Frame>
     <img src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/7gejLGgQB5hoLPqEAJXY5w/54168b097c99c4fd6def989d5b7fe545/Universal_Login_-_Login_-_English.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=905d15be83a8f0a44e1dd9010c1b7972" alt="Dashboard - Branding - Universal Login - Login Setting - Account Link Hosted Page Code Example" width="1002" height="1620" data-path="docs/images/cdy7uua7fh8z/7gejLGgQB5hoLPqEAJXY5w/54168b097c99c4fd6def989d5b7fe545/Universal_Login_-_Login_-_English.png" />
   </Frame>
4. 変更を保存してアカウントのリンクを試してください。**Sign Up** オプションが表示されなくなり、ユーザーが余計に混乱せずに済むことがわかります。

   <Frame>
     <img src="https://mintcdn.com/translations/MV7tE-x71x8RWRES/docs/images/cdy7uua7fh8z/5LHWcm49M29Y00rI5xDaZV/773621dc56b4bff67ea618b2c919f750/hosted-page-example.png?fit=max&auto=format&n=MV7tE-x71x8RWRES&q=85&s=78cdcde35878605a06241fda9f81d977" alt="Account Link Hosted Page Example" width="1356" height="916" data-path="docs/images/cdy7uua7fh8z/5LHWcm49M29Y00rI5xDaZV/773621dc56b4bff67ea618b2c919f750/hosted-page-example.png" />
   </Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Universal Login Experience では、Signup リンクを非表示にすることはサポートされていません。
</Callout>

<div id="customize-theme">
  ## テーマをカスタマイズ
</div>

インストール時、またはその後いつでも Account Link 拡張機能 の **Settings** アイコンをクリックして、拡張機能ページの見た目をデフォルトテーマから少し変えたい場合は、カスタムスタイルシートの URL を追加できます。

<Frame>
  <img src="https://mintcdn.com/translations/Dcx0M11uuptU53TX/docs/images/cdy7uua7fh8z/2as3Sx9y6UB0tyIuyJikR7/ee4ce139c19a0c2b8125e28b9059939e/extension-page-example.png?fit=max&auto=format&n=Dcx0M11uuptU53TX&q=85&s=58a98ac97581249254374c033ede9519" alt="Account Link のテーマをカスタマイズ" width="1359" height="920" data-path="docs/images/cdy7uua7fh8z/2as3Sx9y6UB0tyIuyJikR7/ee4ce139c19a0c2b8125e28b9059939e/extension-page-example.png" />
</Frame>

<div id="administration-panel">
  ## 管理パネル
</div>

extension の管理パネルを使用すると、アカウントリンク用のログインページやウィジェットをカスタマイズできます。

1. [Auth0 Dashboard > Extensions > Installed Extensions > Auth0 Account Link](https://manage.auth0.com/#/extensions/installed) に移動します。
2. 管理サイトにリダイレクトされます。そこで、ホストページの HTML コードを編集したり、タイトル、ロゴ、色、言語など、アカウントリンク用ウィジェットの各種設定を変更したりできます。

   <Warning>
     サイトの HTML コードから `{{ ExtensionCSS }}`、`{{ CustomCSS }}`、`{{ Auth0Widget }}`、または `{{ ExtensionScripts }}` を削除しないでください。削除すると、extension にアカウントリンク用ウィジェットが表示されなくなります。
   </Warning>

<div id="custom-domains">
  ## カスタムドメイン
</div>

<Tooltip tip="カスタムドメイン: 特別な、または独自の名前を持つ第三者ドメイン。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=custom+domain">カスタムドメイン</Tooltip>を使用している場合は、configs ルール `customDomain` にそのカスタムドメイン (たとえば `auth.custom.com`) を設定する必要があります。

1. [Auth0 Dashboard > Auth Pipeline > Rules](https://manage.auth0.com/#/rules) に移動します。
2. デフォルトでは、ルールの 27 行目は次のとおりです:
   `issuer: auth0.domain`これを次のように変更する必要があります:
   \`issuer: "myCustomDomain.com"
   URL のプロトコル部分は省略してください。

<div id="learn-more">
  ## 詳細情報
</div>

* [ユーザーアカウントのリンク](/docs/ja-jp/manage-users/user-accounts/user-account-linking)
* [ユーザーアカウントをリンクする](/docs/ja-jp/manage-users/user-accounts/user-account-linking/link-user-accounts)
* [ユーザーアカウントのリンク: サーバーサイド実装](/docs/ja-jp/manage-users/user-accounts/user-account-linking/suggested-account-linking-server-side-implementation)
* [ユーザー主導のアカウントリンク: クライアントサイド実装](/docs/ja-jp/manage-users/user-accounts/user-account-linking/user-initiated-account-linking-client-side-implementation)
* [アカウントリンクでアクセストークンを使用するための移行](/docs/ja-jp/troubleshoot/product-lifecycle/past-migrations/link-user-accounts-with-access-tokens-migration)