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

​
拡張機能はどのように動作しますか？

この拡張機能は、認証後、認証したユーザーのメールアドレスが、別のに紐づく既存ユーザーアカウントのメールアドレスと一致した場合に実行されます。 たとえば、ユーザーが john@acme.com というメールアドレスで Facebook アカウントを使ってログインし、その後、同じメールアドレスで Google を使って認証すると、次のようなページが表示されます。
Auth0 Dashboard - 拡張機能 - Account Link - 拡張機能の例
この拡張機能では、メールアドレスが確認済みであっても、同じメールアドレスを持つユーザーが自動的にリンクされることはありません。確認済みのメールアドレスだけでは、ユーザーがその時点で両方のアカウントに認証できることを証明するには不十分だからです。 ユーザーが Continue を選択すると、認証のために Facebook にリダイレクトされます。すでにログインしている場合は、Facebook からアプリケーションにリダイレクトされ、ユーザーアカウントは自動的にリンクされます。ログインしていない場合は、Facebook の認証情報を使って認証するよう求められます。Facebook から Auth0 にリダイレクトされた後、Facebook アカウントは Google アカウントとリンクされます。このプロセスにより、ユーザーが両方のアカウントに認証するための認証情報を持っていることが確認されるため、アカウントを安全かつ適切にリンクできます。

​
制限事項

この拡張機能は、 接続、device authorization を使用して開始されるフロー、ならびに および WS-Federation プロトコルには対応していません。Account Link 拡張機能でサポートされていない接続については、代替手段として Account Linking – サーバーサイド実装 および ユーザー主導の Account Linking – クライアントサイド実装 を参照してください。

​
拡張機能のインストールと設定

Auth0 Dashboard > Extensions に移動し、Auth0 Account Link を選択します。Install Extension ウィンドウが開きます。 この拡張機能は、内部的に使用する auth0-account-link という名前の新しいアプリケーションと、既存のアカウントと同じメールアドレスを持つ新しいアカウントでユーザーがログインした場合に、そのユーザーを拡張機能へリダイレクトするための新しいルールを作成します。
Account Link 拡張機能 に関連付けられているアプリケーションのクライアントシークレットをローテーションした場合は、拡張機能をアンインストールし、再インストールしたうえで、新しいアプリケーションシークレットを使って再設定する必要があります。
テストするには、このプロジェクト を使って 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. を選択します。 ログインしたら、 でユーザーの詳細を確認します。ユーザーアカウントがリンクされていることを確認できます。

​
拡張機能の設定

​
アプリケーション名を変更する

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

​
ログインページを更新する

デフォルトでは、Auth0 の では、通常、ユーザーはログインとサインアップの両方を行えます。しかし、アカウントリンクの際に、新しいアカウントとリンクするためにプライマリアカウントでの認証を求める場合、サインアップの選択肢が表示されるとユーザーを混乱させる可能性があります。 Universal Login でできることについて詳しくは、Auth0 Universal Login を参照してください。 これを防ぐため、ログインページに Sign Up オプションを非表示にするよう伝える query parameter を送信します。ただし、この query parameter を有効にするには、ログインページをカスタマイズする必要があります。
  1. Auth0 Dashboard > Branding > Universal Login に移動し、Login ビューを選択します。
  2. Customize Login Page スイッチをオンにして、その下のカスタムエディターを有効にします。このエディターで、Lock config に新しい行を追加します。
  3. Lock widget を設定している object の下部付近で、次の行を追加します (closable 設定の後) 。 allowSignUp: !config.extraParams.prevent_sign_up,
    Dashboard - Branding - Universal Login - Login Setting - Account Link Hosted Page Code Example
  4. 変更を保存してアカウントのリンクを試してください。Sign Up オプションが表示されなくなり、ユーザーが余計に混乱せずに済むことがわかります。
    Account Link Hosted Page Example
Universal Login Experience では、Signup リンクを非表示にすることはサポートされていません。

​
テーマをカスタマイズ

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

​
管理パネル

extension の管理パネルを使用すると、アカウントリンク用のログインページやウィジェットをカスタマイズできます。
  1. Auth0 Dashboard > Extensions > Installed Extensions > Auth0 Account Link に移動します。
  2. 管理サイトにリダイレクトされます。そこで、ホストページの HTML コードを編集したり、タイトル、ロゴ、色、言語など、アカウントリンク用ウィジェットの各種設定を変更したりできます。
    サイトの HTML コードから {{ ExtensionCSS }}、{{ CustomCSS }}、{{ Auth0Widget }}、または {{ ExtensionScripts }} を削除しないでください。削除すると、extension にアカウントリンク用ウィジェットが表示されなくなります。

​
カスタムドメイン

を使用している場合は、configs ルール customDomain にそのカスタムドメイン (たとえば auth.custom.com) を設定する必要があります。
  1. Auth0 Dashboard > Auth Pipeline > Rules に移動します。
  2. デフォルトでは、ルールの 27 行目は次のとおりです: issuer: auth0.domainこれを次のように変更する必要があります: `issuer: “myCustomDomain.com” URL のプロトコル部分は省略してください。

​
詳細情報