Auth0のソーシャルログイン設計のベストプラクティス

Auth0のソーシャルログイン、正しく設計できていますか？

あなたのサービスのソーシャルログインは、ユーザーを迷わせていませんか？

Auth0にソーシャルログインの設定をしただけでは、適切な設計にはなりません。「便利なはず」のソーシャルログインが、かえってユーザーを混乱させているケースが多く見られます。

「ソーシャルで新規登録ができない…」（事前紐づけ必須パターン）
「ソーシャルで登録したのに、なぜかメールアドレスを聞かれる…」（メールアドレス無視パターン）
「前にGoogleで登録したことを忘れ、LINEでログインしたら別のアカウントができてしまった…」（ソーシャルの数だけアカウントが作成されるパターン）

本記事では、こうした課題をすべて解決するために私たちが認証基盤構築の際に基本としている「ゼロフリクションなソーシャルログイン（ZSL）」と、それをAuth0で実現する方法を解説します。

ZSLで実現できること

新規登録とログインのどちらにでもソーシャルログインが利用できる
メールアドレス（以下、メアド）とパスワードの手入力が不要
ユーザーの意図しない重複アカウントの作成を防げる
ソーシャルプロバイダーからメアドが取得できなくても利用できる
ソーシャルで新規登録をしても、メアドが変更できる
ソーシャルの紐づけを解除して、メアドとパスワードによるログインに移行できる

ZSLの設計

ZSLは、ユーザーが何も意識しなくても、不安や迷いなくサービスに新規登録またはログインできることを目指して設計されています。

最も重要なのが「ユーザーの新規登録またはログインしたいという意図を阻害しないこと」です。例えば、ソーシャルからメアド取得ができない場合にエラー画面を表示して再ログインさせるような実装は避けています。ユーザーはそのソーシャルログインを利用したいという意図があり、その意図を実現してこそ良いUXだからです。

全体フローを簡潔にまとめると、次の図のとおりです。

ポイントは2つです。

アカウントが重複している場合は、既存のアカウントとしてログインさせる（アカウント紐づけ）
メアドが取得不可または不正な場合（特定ドメインの拒否など）は、手動で登録してもらう

1のアカウント紐づけでは、必ず紐づけ先のアカウントの認証を求めることでセキュリティを担保しています。2の処理は一見手間に思えるかもしれませんが、「ユーザーが選択したソーシャルログインを使えるようにする」という思想に基づいています。メアドを登録してもらうことで、次回からそのソーシャルログインでサービスを利用できるようになります。

各処理の条件分岐を詳細に示すと次の図のとおりです。

Auth0で実現する方法

ここからは、ZSLをAuth0で実装する方法を解説します。Auth0のPost-Login Actionsを利用することで、ZSLの各フローを実現できます。

なお、アカウント紐づけにはAuth0の「Account Linking」機能を使用します。

実装における設計方針

ZSLをAuth0で実装する際は、Auth0固有の制約を考慮した設計が必要です。

Social Connectionで作成されたアカウントは、Management APIでメアドの変更ができない
アカウントリンクを無秩序に実行すると、親子関係の組み合わせ爆発が起きて予想外の挙動が発生する

これらの理由から、「アカウントリンクを利用する場合はメアドパスワードのアカウントを必ずPrimaryとする」という方針を採用しています。

実装フロー

Actionsでは以下の流れで処理を行います。

メアドの取得（必要な場合）
メアドパスワードのアカウント作成
ソーシャルアカウントをSecondaryとしてアカウントリンク実行

フローの詳細

各Actionsの処理をシーケンス図で示すと次のとおりです。

実際の運用環境では、プロフィール登録チェックなどこれ以外にも多くのActionsが実行されます。

まとめ

この記事では、認証基盤構築の現場で私たちが基本としているソーシャルログインUX「ZSL」と、それをAuth0で実現する方法を解説しました。

ZSLの核心は「ユーザーの登録・ログインの意図を阻害しない」こと。エラーで止めず、代替手段を提供する設計を徹底する
アカウントリンクの方針は「メアドパスワードアカウントを必ずPrimary」に固定する。Auth0の制約と親子関係の複雑化を避けるための設計判断
Post-Login ActionsがZSL実装の核。メアド取得・重複チェック・リンク実行の3ステップを組み合わせる

新規登録とログインというサービスの入口の体験が改善されると、ユーザー体験も、開発者体験も、サポート体験も良くなります。本記事がログイン体験の改善に役立てば幸いです。

ZSLはAuth0と当社プロダクトのAuthConnectを組み合わせることで即実現でき、Auth0導入時の開発コストを大幅に削減できます。Auth0の導入支援・認証基盤の設計についてはぜひ当社のサービスもご覧ください。