Account Link拡張機能

Account Link拡張機能は、誤って2つめのアカウントを作成した可能性のあるユーザーに対して、最初のログイン時に新しいアカウントと古いアカウントをリンクするよう促す画面を表示します。ユーザーは、2つのアカウントをリンクすることも、2つ目のアカウント作成が意図したものであれば別々にしておくことも、選べます。

この拡張機能は、認証時に認証したユーザーのメールアドレスが、別のIDプロバイダーにアタッチされている既存のユーザーアカウントのメールアドレスと一致する場合に、トリガーされます。

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

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

ユーザーが［Continue（続行）］を選択すると、認証のためにFacebookにリダイレクトされます。ユーザーがすでにログインしている場合は、Facebookがユーザーをアプリケーションにリダイレクトで戻し、ユーザーは自動的にリンクされます。ログインしていない場合は、Facebookの資格情報を使って認証するよう求める画面が表示されます。FacebookがユーザーをAuth0にリダイレクトで戻した後に、FacebookアカウントがGoogleアカウントとリンクされます。このプロセスにより、ユーザーが両方のアカウントで認証用の資格情報を持っていることが保証され、アカウントを安全かつ正しくリンクできます。

この拡張機能はパスワードレス接続、デバイス認可を使用して開始されるフロー、およびSAMLとWS-federationのプロトコルはサポートしていません。Account Link拡張機能がサポートしていない接続については、「アカウントリンク：サーバー側実装」および「ユーザーが開始するアカウントリンク：クライアント側実装」の代替オプションを参照してください。

［Auth0 Dashboard］>［Extensions（拡張機能）］に移動し、［Auth0 Account Link］を選択します。［Install Extension（拡張機能のインストール）］画面が開きます。

拡張機能によって、内部で使用するための「auth0-account-link」という名前の新規アプリケーションと、既存のアカウントとメールアドレスが一致する新しいアカウントでログインした場合にユーザーをこの拡張機能にリダイレクトする新規ルールが作成されます。このアプリケーションでは、アカウントリンクを実行したいすべての接続を有効にする必要があります。

テストするには、こちらのプロジェクトを使用してサンプルのReactシングルページアプリケーションを作成します。

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

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

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

アカウントをリンクさせるには、［Continue（続行）］を選択します。

ログインしたら、Auth0 Dashboardでユーザーの詳細を確認してください。ユーザーアカウントがリンクされているのが分かります。

拡張機能に使用するデフォルトのアプリケーション名は、ユーザーがプライマリアカウントで認証するときにログインページに表示されるため、たとえば「Account Linking」など、顧客にわかりやすくて読み取りやすい名前に変更することをお勧めします

Auth0のユニバーサルログインを使用すると、デフォルトでは、通常期待される通り、ユーザーはログインとサインアップの両方を行うことができます。しかし、アカウントリンク機能によって新しいアカウントとリンクするためにプライマリアカウントの認証が求められる場合、同時にサインアップオプションが提示されるとユーザーの混乱を招きます。

ユニバーサルログインでの対処方法について詳しくは、「Auth0ユニバーサルログイン」をご覧ください。

このような混乱を防ぐため、［Sign Up（サインアップ）］オプションを非表示にするよう指示するクエリパラメーターがログインページに送信されます。ただし、このクエリパラメーターを有効にするにはログインページをカスタマイズする必要があります。

1. ［Auth0 Dashboard］>［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］に移動し、［Login（ログイン）］ビューを選択します。

2. ［Customize Login Page（ログインページのカスタマイズ）］を有効にして下のカスタムエディターを有効にします。エディターでLock構成に新しい行を追加します。

3. Lockウィジェットを構成するオブジェクトの下部（closable設定の後）に次の行を追加します： allowSignUp:!config.extraParams.prevent_sign_up,

   

4. 変更を保存して、アカウントのリンクを試みます。［Sign Up（サインアップ）］オプションが非表示になり、これでユーザーの混乱を防ぐことができます。

   

拡張機能のページをデフォルトのテーマと違う外観にカスタマイズしたい場合は、インストール時に（または任意のタイミングでAccount Link拡張機能の設定アイコンから）、カスタムスタイルシートにURLを追加します。

アカウントリンクのログインページとウィジェットは、拡張機能の管理パネルでカスタマイズできます。

1. ［Dashboard］>［Extensions（拡張機能）］>［Installed Extensions（インストール済みの拡張機能）］>［Auth0 Account Link］に移動します。

2. 管理サイトにリダイレクトされます。そこでホストされるページのHTMLコードを編集して、タイトルやロゴ、色、言語など、アカウントリンクウィジェットの設定を変更できます。

カスタムドメインをご利用の場合は、カスタムドメイン（たとえばauth.custom.com）を使って構成ルールcustomDomainを設定する必要があります。

1. ［Auth0 Dashboard］>［Auth Pipeline（Authパイプライン）］>［Rules（ルール）］に移動します。

2. デフォルトで、ルールの27行目は、 issuer: auth0.domainになっています。 これを、 issuer:"myCustomDomain.com"にします。 URLのプロトコル部分は必ず除いてください。

• ユーザーアカウントのリンク
• ユーザーアカウントをリンクする
• ユーザーアカウントのリンク：サーバー側実装
• ユーザー起点のアカウントのリンク：クライアント側実装
• アカウントリンクに向けてアクセストークンに移行する