Account Link Extension

同じメールアドレスで 2 つのアカウントを持つユーザーに、それらをリンクするよう促せる Account Link Extension について説明します。

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

​

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

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

たとえば、ユーザーが [e-mail] というメールアドレスの Facebook アカウントでログインし、その後、同じメールアドレスで Google を使用して認証すると、次のようなページが表示されます。

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

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

​

制限事項

この拡張機能は、パスワードレス接続、デバイス認可で開始されたフロー、および SAML と WS-federation プロトコルをサポートしていません。Account Link 拡張機能でサポートされていない接続を使用する場合は、代替手段として Account Linking – Server-Side Implementation と User Initiated Account Linking – Client-Side Implementation を参照してください。

​

拡張機能をインストールして設定する

Auth0 Dashboard > Extensions に移動し、Auth0 Account Link を選択します。Install Extension ウィンドウが開きます。

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

Account Link Extension に関連付けられたアプリケーションのクライアントシークレットをローテーションした場合は、拡張機能をアンインストールし、再インストールして、新しいアプリケーションシークレットで再設定する必要があります。

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

テキストエディターで auth_config.json ファイルを開き、ドメインと client_id を実際の値に更新します。

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

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

アカウントをリンクするには、続行 を選択します。

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

​

拡張機能を設定する

​

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

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

​

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

デフォルトでは、Auth0 の Universal Login で、ユーザーは通常どおりログインとサインアップの両方を行えます。ただし、アカウントリンク時に、新しいアカウントとリンクするためにプライマリアカウントの認証を求める場合、サインアップの選択肢が表示されるとユーザーを混乱させる可能性があります。

Universal Login でできることの詳細については、Auth0 Universal Login を参照してください。

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

1. Auth0 Dashboard > ブランディング > Universal Login に移動し、Login ビューを選択します。

2. Customize Login Page スイッチを有効にして、下部のカスタムエディターを有効にします。このエディターで、Lock の設定に新しい行を追加します。

3. Lock ウィジェットを設定するオブジェクトの下部付近で、次の行を追加します (closable 設定の後) 。 allowSignUp: !config.extraParams.prevent_sign_up,

   

4. 変更を保存してから、アカウントのリンクを試します。Sign Up オプションが表示されなくなり、ユーザーが余計に混乱することもなくなります。

   

Signup リンクの非表示は、Universal Login Experience ではサポートされていません。

​

テーマをカスタマイズする

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

​

管理パネル

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

1. Dashboard > Extensions > Installed Extensions > Auth0 Account Link に移動します。

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

   サイトの HTML コードから {{ ExtensionCSS }}、{{ CustomCSS }}、{{ Auth0Widget }}、{{ ExtensionScripts }} を削除しないでください。削除すると、拡張機能にアカウントリンクウィジェットが表示されなくなります。

​

カスタムドメイン

カスタムドメイン を使用している場合は、configs ルールの customDomain にカスタムドメイン (例: auth.custom.com) を設定する必要があります。

1. Auth0 Dashboard > Auth Pipeline > Rules に移動します。
2. デフォルトでは、ルールの 27 行目は次のとおりです: issuer: auth0.domainこれを次のように変更する必要があります: `issuer: “myCustomDomain.com” URL のプロトコル部分は含めないでください。

​

詳細はこちら

• ユーザーアカウントのリンク
• ユーザーアカウントをリンクする
• ユーザーアカウントのリンク: サーバーサイドでの実装
• ユーザー主導型のアカウントリンク: クライアントサイドでの実装
• アカウントリンク用アクセストークンへの移行