ソーシャルログイン

Googleログインの実装手順と、つまずきやすい5つの箇所

Googleログインの実装でつまずくのは、コードよりも設定と設計です。リダイレクトURIの不一致、メールアドレスでの会員識別、テスト環境から本番への切り替え。本記事では実装の流れに沿って、事前に決めておくべきことと、よくある失敗を解説します。

実装の全体像

Googleログインの実装は、大きく3段階に分かれます。コードを書く時間より、設定と設計に時間がかかります。

  1. 事前準備……Google Cloud でプロジェクトを作り、認証情報を発行する
  2. 実装……ログインボタンを置き、返ってきた情報を受け取る
  3. 会員データとの接続……既存会員との名寄せ、新規会員の作成

このうち3番目を後回しにすると、作り直しになります。 先に決めてください。

事前準備で決めること

リダイレクトURIを確定させる

認証後にユーザーを戻すURLを、Google側に登録します。ここが1文字でも違うとエラーになります。

つまずきやすいのは次の点です。

  • 末尾のスラッシュの有無
  • httphttps の違い
  • www の有無
  • ステージング環境のURLを登録し忘れる

環境ごとに登録が必要です。 開発・ステージング・本番の3つを最初にまとめて登録しておくと、後の手戻りが減ります。

取得する情報の範囲を決める

メールアドレス・氏名・プロフィール画像が基本です。必要のない情報まで要求しないでください。認可画面に表示される項目が増えるほど、ユーザーは警戒します。

つまずきやすい5つの箇所

1. メールアドレスで会員を識別してしまう

もっとも多い設計ミスです。メールアドレスはユーザーが変更できます。 識別子に使うと、変更された時点で別人として扱われ、会員データが分裂します。

Googleが発行するソーシャルID(sub)で識別してください。メールアドレスは「連絡先」として保持します。

2. 確認済みフラグを見ていない

取得したメールアドレスには「確認済みかどうか」の情報が付いてきます。これを見ずに信用すると、他人のアドレスで登録される余地が残ります。必ずチェックしてください。

3. 既存会員との名寄せを決めていない

すでに会員がいるサービスでは、Googleログインで入ってきた人が既存会員かどうかを判定する必要があります。方法は主に2つです。

  • メールアドレスで自動的に突き合わせる……手間はないが、誤って別人を紐づける危険がある
  • 連携画面を挟む……「既存の会員IDと連携しますか」と確認する。安全だが1手間増える

会員情報の重要度が高いサービスほど、後者を選ぶべきです。

4. ログインできなくなる導線を塞いでいない

Googleアカウントを削除された場合、そのままでは締め出されます。代替のログイン手段を必ず併設してください。 後から足すのは、既存会員がいるぶん難しくなります。

5. テスト環境のまま公開してしまう

Google Cloud の設定には公開状態の区分があります。テスト状態のままだと、登録したテストユーザー以外はログインできません。公開前に切り替えを確認してください。

実装後に確認すること

確認項目

見るところ

新規登録できるか

初めてのGoogleアカウントで登録し、会員が作られるか

再ログインできるか

同じアカウントで2回目に入り、同じ会員に紐づくか

既存会員と紐づくか

同じメールアドレスの既存会員がいる場合の挙動

スマホで動くか

アプリ内ブラウザ(LINEやInstagram経由)での動作

連携解除できるか

ユーザーが連携を切ったあとの導線

アプリ内ブラウザは見落とされがちです。 SNSの投稿から流入したユーザーは、通常のブラウザではなくアプリ内ブラウザで開きます。ここで動かないと、流入経路ごと失います。

自社実装とサービス利用の比較

Googleログイン1つだけなら、自社実装も現実的です。判断が変わるのは2つ目以降を足すときです。

  • SNSごとに認証の仕様が違うため、実装は都度必要になる
  • 各SNSが仕様を変更するたび、追随する担当が要る
  • 取得できる情報の形が違うため、会員データへの取り込み処理もそれぞれ必要

「今はGoogleだけ」でも、将来LINEを足す予定があるなら、最初から共通化しておくほうが結果的に安く済みます。

Login Plus について

Login Plus のログイン画面。6つのソーシャルログインとパスキーに対応
Login Plus のログイン画面。6つのソーシャルログインとパスキーに対応

Login Plusは、Googleを含む6つのIDプロバイダとパスキーに1つの実装で対応できるサービスです。上記のつまずきやすい箇所のうち、仕様変更への追随と取得情報の形の違いは、Login Plus側で吸収します。

  • Googleへの申請手順書を無償で提供
  • 複数のSNSを1つの会員IDに紐づけ可能
  • One Tapに対応

ソーシャルログイン・パスキーの資料をお送りします

対応SNS・料金・実装の流れ・導入事例をまとめています。
「自社に導入できるか」のご相談も、同じフォームから承ります。

送信をもって個人情報の取り扱いに同意いただいたものとみなします。

個別のご相談は からもどうぞ。

送信をもって個人情報の取り扱いに同意いただいたものとみなします。

送信をもって個人情報の取り扱いに同意いただいたものとみなします。