メインコンテンツまでスキップ

ソーシャルサインイン

ソーシャルサインインは、Google、Facebook、Twitter、LinkedIn などの既存のソーシャルメディアアカウントを利用してサインインやサインアップができる、広く利用されている認証 (Authentication) 方法です。

ソーシャルサインインのメリット:

  • オンボーディングプロセスの簡素化:ソーシャルサインインにより、ユーザーは新しいアカウントを作成したり、別のパスワードを覚えたりすることなく、ワンクリックでサインアップやサインインができます。これにより摩擦が減り、ユーザーエンゲージメントが向上します。
  • 信頼性とセキュリティの向上:Google や Facebook などの信頼されたプラットフォームを活用することで、ユーザーはアプリケーションに対してより安心感を持つことができます。
  • ユーザーデータの充実:ソーシャルサインインにより、名前、メールアドレス、プロフィール画像など、ソーシャルプラットフォームから追加のプロフィール情報を取得できます。

ソーシャルサインインの実装

  1. ソーシャルコネクターの設定
    コンソール > コネクター > ソーシャルコネクター に移動します。「ソーシャルコネクターを追加」ボタンをクリックし、追加したいソーシャルコネクター(例:Google や Github)を選択します。詳細な手順は ソーシャルコネクター を参照してください。

  2. ソーシャルログインボタンの追加
    デフォルトでは、新しく追加したソーシャルコネクターはエンドユーザーのサインインページに表示されません。サインインページにソーシャルサインインボタンを追加するには、サインイン体験設定でソーシャルコネクターを有効にする必要があります。

    コンソール > サインイン & アカウント > サインアップとサインイン

    に移動します。「ソーシャルコネクターを追加」ボタンをクリックして、サインアップおよびログインページにソーシャルログインボタンを統合します。ドラッグ&ドロップで UI 上の順序を調整できます。

  3. アカウント連携オプションの設定
    ソーシャルアイデンティティ でサインアップする新規ユーザー向けに、Logto ではソーシャルアカウントを Logto システム内の既存のメールまたは電話番号アカウントに連携できます。デフォルトでは、関連する アカウント連携 ページがソーシャルサインアップ時に表示され、既存アカウントへの連携または新規作成が可能です。

    このプロセスを簡略化するには、サインイン体験設定で 自動アカウント連携 オプションを有効にできます。これにより、メールアドレスまたは電話番号が一致する場合、自動的にソーシャルアカウントが既存アカウントに連携されます。

  4. 変更内容の保存
    変更内容をよく確認し、保存して設定を適用してください。

ソーシャルサインインのユーザー体験

ソーシャルサインインにより、Logto でのサインアップおよびサインインプロセスがユーザーにとってスムーズになります。

  1. ソーシャルでサインイン:ユーザーがサインインページに表示されたソーシャルサインインボタンをクリックします。
  2. リダイレクト:ユーザーはソーシャルアイデンティティプロバイダーの認証ページにリダイレクトされます。
  3. ソーシャル認証:ユーザーはソーシャル認証情報を入力し、ソーシャルプロバイダーで認証します。すでにソーシャルプロバイダーにログインしている場合は自動的に認証されることもあります。複数のサインインセッションが検出された場合、正しいアカウントの選択を促される場合があります(例:複数の Google アカウント)。
    注記:

    Google の「prompt」パラメーターは Google コネクターで設定でき、Google ログイン時のアカウント選択や同意画面のユーザー体験をカスタマイズできます。

  4. Logto への戻り:認証が成功すると、ソーシャルプロバイダーは認証データとともにユーザーを Logto サインインページへリダイレクトします。
  5. ソーシャルアイデンティティの検証:Logto はソーシャル認証データとユーザーアイデンティティを検証します。ソーシャルアイデンティティに紐づくユーザーアカウントが存在しない場合は、新しいアカウントが作成されます。
  6. ユーザー認証:Logto はユーザーを認証し、クライアントアプリケーションへリダイレクトして認証プロセスを完了します。

アカウント連携

前述の通り、Logto ではソーシャルアカウントを Logto システム内の既存のメールまたは電話番号アカウントに連携できます。このプロセスは、異なる認証 (Authentication) 方法やアイデンティティプロバイダー間で統一されたユーザーアカウントを維持するために不可欠です。

  • 新規アカウント作成ソーシャルアイデンティティ でサインインし、Logto システムに存在しない場合、かつ提供されたメールアドレスや電話番号が既存ユーザーアカウントと一致しない場合は、新しいアカウントが Logto に直接作成されます。

  • 既存アカウントへの連携: ソーシャルアイデンティティが提供するメールアドレスや電話番号がすでに Logto の既存アカウントに紐づいている場合、柔軟なアカウント連携プロセスを提供します。

    • 自動アカウント連携サインイン体験 設定で「自動アカウント連携」オプションが有効な場合、Logto はメールアドレスや電話番号が一致する既存アカウントに自動的にソーシャルアカウントを連携します。ユーザーは連携を促されず、既存アカウントに即座にサインインできます。ソーシャルアカウントが連携され、今後どちらの方法でもサインイン可能となります。

    • 手動アカウント連携:「自動アカウント連携」オプションが無効な場合、サインインプロセス中にユーザーにソーシャルアカウントを既存アカウントに連携するかどうかを促します。連携するか、新規作成するかを選択できます。

      ソーシャルアカウント連携
注記:

ソーシャルサインアップ時、メールアドレスや電話番号が既存アカウントと一致し、関連アカウントが見つかった場合、ユーザーが連携しないことを選択すると、そのメールアドレスや電話番号は新規アカウントには同期されません。これにより、メールアドレスや電話番号がすべてのユーザーアカウントで一意に保たれます。

メールアドレスや電話番号が必須のサインアップ識別子である場合、サインアッププロセス中に別のメールアドレスや電話番号の入力を促されます。詳細は 追加ユーザープロフィールの収集 を参照してください。

追加ユーザープロフィールデータの収集

サインアップ識別子の収集

ソーシャルサインアッププロセス中、設定した必須サインアップ識別子(メールアドレス電話番号ユーザー名)に応じて、ユーザーはソーシャルプロバイダーで認証後に追加の認証済み情報の入力を求められる場合があります。

例えば、メールアドレスユーザー名 が必須サインアップ識別子として設定されている場合:

  1. 認証済みメールアドレスを提供するソーシャルアイデンティティでサインアップ

    ソーシャルアイデンティティが認証済みメールアドレスを提供する場合、そのメールアドレスはユーザープロフィールに同期され、ユーザーはサインアップ完了のためにユーザー名の入力を求められます。

  2. 認証済みメールアドレスを提供しないソーシャルアイデンティティでサインアップ

    ソーシャルアイデンティティが認証済みメールアドレスを提供しない場合、サインアッププロセス中にメールアドレスの入力を求められます。ユーザーは入力したメールアドレスに送信された認証コードを入力して認証する必要があります。

  3. 既に登録済みメールアドレスを提供するソーシャルアイデンティティでサインアップ

    ソーシャルアイデンティティがすでに Logto システムに登録されているメールアドレスを提供する場合、ユーザーはソーシャルアカウントを既存アカウントに連携するか、新規アカウントを作成するかを促されます。新規アカウント作成を選択した場合、新しいメールアドレスの入力と認証が求められます。

その他のユーザープロフィールの収集

必須サインアップ識別子に加え、ソーシャルサインアッププロセス中に他のプロフィール情報も収集できます。これには、氏名、生年月日、その他カスタムフィールドなどが含まれます。

オプション 1: ユーザープロフィールの収集

Logto の組み込み「あなたについて教えてください」ステップをサインアップフローに直接追加できます。ユーザーは登録完了前にすべての必須項目を入力する必要があります。この方法はコード不要で簡単に導入できます。

コンソール > サインイン & アカウント > ユーザープロフィールの収集

で、あらかじめ用意された基本データ項目から選択したり、柔軟なバリデーション付きでカスタム項目を作成できます。詳細は ユーザープロフィールの収集 を参照してください。

注記:

ソーシャルサインイン時のサインアップ識別子(メール、電話、ユーザー名)の収集と、その他のユーザープロフィールデータの収集は異なります:

  • サインアップ識別子:新規・既存ユーザーの両方で必須。ユーザー識別や通知に不可欠です。
  • その他のプロフィールデータ(例:氏名、誕生日):新規ユーザー登録時のみ収集。識別に必須ではなく、後から Account API で収集可能です。

オプション 2: 独自オンボーディングフロー

サインアップ完了後に独自のカスタムオンボーディングフローへリダイレクトし、柔軟なデータ収集を行うことも可能です。この方法ではユーザー体験を完全にコントロールでき、複雑な多段階オンボーディングも実現できます。

Account API を利用してユーザープロフィールデータをプログラムで管理できます。

Google One-tap

Logto は Google One-tap サインイン方式にも対応しており、Google コネクターでワンクリックサインインが可能です。この機能により、ユーザーは Google 認証ページへのリダイレクトなしでサインインできます。

Google One-tap サインインを有効にするには、Google コネクター 設定の手順に従ってください。有効化後、サインインページにアクセスした際に「Google でサインイン」ポップアップが表示され、クリックすると自動的に Google アカウントで認証され、アプリケーションにリダイレクトされます。

サインイン体験で Google One Tab を有効化

初回のソーシャルサインイン後、ユーザーはアカウント設定から接続済みソーシャルアカウントを管理できます。これにより、既存プロフィールへの追加ソーシャルアカウントの連携や、不要なソーシャル接続の解除が可能です。

セルフサービスのアカウントセンターから以下の操作ができます:

  • 新しいソーシャルアカウントの連携:同じユーザープロフィールに追加のソーシャルプロバイダーを接続
  • 既存ソーシャルアカウントの解除:他の方法でのアクセスを維持しつつソーシャル接続を解除
  • 接続済みアカウントの表示:現在連携されているすべてのソーシャルアイデンティティを確認

アカウント管理機能の実装については アカウント設定 ドキュメントを参照してください。

トークンの保存とサードパーティ API の呼び出し

サポートされているソーシャルコネクターでサードパーティトークン保存を有効にすると、ユーザーが認証し権限を付与した後、プロバイダー発行のアクセス トークン (Access token) やリフレッシュ トークン (Refresh token) が Logto のシークレットボールトに安全に保存されます。アプリケーションは(Account API 経由で)これらを取得し、ユーザーに再認証を求めることなくプロバイダー API(例:Google カレンダーへのイベント追加など)を呼び出せます。設定方法は サードパーティトークン保存 を参照してください。

よくある質問 (FAQs)

ウェブサイトにソーシャルログインボタンを追加し、直接ソーシャルでサインインするには?

Logto では、ウェブサイトにソーシャルログインボタンを追加し、デフォルトのサインインフォームを表示せずに直接ソーシャルサインインプロセスを開始できます。詳しい手順は ダイレクトサインイン ガイドを参照してください。

ソーシャルでサインアップした後、メールや電話番号が反映されないのはなぜですか?

Logto では、メールアドレスや電話番号はサインイン識別子としてユーザーを一意に識別するために使用されます。認証済みのメールアドレスや電話番号のみが識別子として受け入れられます。ソーシャルアイデンティティが email_verifiedphone_number_verified クレームを提供しない場合、メールアドレスや電話番号はユーザープロフィールに同期されません。ソーシャルアイデンティティデータとしてユーザープロフィール内で確認できます。

未認証のメールや電話番号をユーザープロフィールとしてサポートする機能は今後追加予定です。

ソーシャルサインイン体験

6 つの設定で Google ログインコンバージョンを最大化