Googleログインの設定方法｜Google One Tap導入と同意画面の手順

ソーシャルログインの基本はソーシャルログインとは、利用者から見た仕組みはGoogleログインとは、実装全体の流れはGoogleログインの実装とつまずきやすい5つの箇所で解説しています。

Googleログインを設定する流れ

設定はGoogle Cloudの管理画面「Google Auth Platform」で、次の順に進めます。画面の名称や配置は変わることがあるため、公式ドキュメントもあわせて確認してください。

段階1：プロジェクトを作り、同意画面を設定する

同意画面は、利用者が初めてログインするときに、どのアプリにどの情報を渡すかを示す画面です。設定する画面は次のとおりです。

• ブランディング……アプリ名、ロゴ、サポート用メール、ホームページ・プライバシーポリシー・利用規約のURL、承認済みドメイン
• 対象……ユーザーの種類（外部／内部）と公開ステータス、テストユーザー
• データアクセス……アプリが求めるスコープ（取得する情報の範囲）

一般向けサイトはユーザーの種類を「外部」にする

「内部」を選ぶと、自社のGoogle Workspace組織のアカウントしか使えなくなります。

「テスト」のままでは一般の利用者はログインできない

作成した直後は「テスト」の状態で、ログインできるのは登録したテストユーザー（最大100人）だけです。テスト中に得た許可は、同意から7日で切れます。公開する前に「アプリを公開」を押し、公開ステータスを「本番環境」に切り替えてください。

ログインだけなら重い審査は受けなくてよい

ログインに使う基本的なスコープ（openid・email・profile）は機密性が低いものに分類され、これだけならアプリの審査（確認）は必須ではありません。ただし、同意画面にアプリ名とロゴを表示するには「ブランドの確認」が必要で、ホームページやプライバシーポリシーの公開、ドメインの所有などを確かめられます。Googleカレンダーなど他のサービスのデータを使うスコープを追加すると、審査は厳しくなります。

段階2：OAuthクライアントを作成する

「クライアント」の画面で「クライアントを作成」を選び、種類に「ウェブ アプリケーション」を指定して、次の2つを登録します。

作成するとクライアントIDが発行されます。サーバー側で認可コードを使う方式ではクライアントシークレットも使います。2025年6月以降に作成したクライアントのシークレットは作成時にしか表示・ダウンロードできないため、その場で安全な場所に保管してください。また、6か月間使われていないクライアントは自動で削除されます。

取得できる情報

ログインに成功すると、Googleが署名したIDトークン（JWT）が届きます。主な項目は次のとおりです。

subを識別に使うよう、Google自身も明記しています。詳しくはソーシャルログインで取得できる情報を参照してください。

段階3：Google One Tapとログインボタンを組み込む

組み込みには、GoogleのJavaScriptライブラリ「Google Identity Services」を使います。表示のしかたは主に次の3通りです。

Google One Tapを導入する手順

One Tapにも、段階2で作成したクライアントIDをそのまま使います。HTMLで書く場合は、スクリプトを読み込み、クライアントIDと受け取り用の関数を指定した要素を置きます。

<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
  data-client_id="発行されたクライアントID"
  data-callback="handleCredentialResponse"
  data-use_fedcm_for_prompt="true">
</div>

自社のURLで受け取るときは、data-callback の代わりに data-login_uri を指定します。IDトークンはPOSTで届くので、一緒に送られる g_csrf_token をCookieの値と照合してCSRF対策をしてください。

JavaScriptで書く場合は、google.accounts.id.initialize() にクライアントIDと受け取り用の関数を渡し、google.accounts.id.prompt() でOne Tapを、google.accounts.id.renderButton() でログインボタンを表示します。

受け取ったIDトークンは、必ずサーバー側で次の項目を検証してください。

1. Googleの公開鍵で署名が正しいか
2. aud（宛先）が自社のクライアントIDと一致するか
3. iss（発行元）がGoogleか
4. exp（有効期限）が切れていないか

検証は自前で書くより、Googleが各言語向けに用意しているライブラリを使うほうが安全です。

ブラウザの変化への対応（FedCM）

ブラウザのサードパーティCookie制限に合わせ、Google Identity ServicesはFedCMというブラウザ標準の仕組みへの移行を進めています。新規に実装するなら、上の例のように data-use_fedcm_for_prompt でFedCMを有効にしておくと、後の改修を減らせます。ただし、One Tapの表示状態を判定する一部の関数は使えなくなるので、移行ガイドを先に確認しておきましょう。

段階4：テストと公開

注意点

• ボタンは、Googleのブランドガイドラインに沿ったものを使ってください。
• ログインに不要なスコープを求めると、審査が重くなり、同意画面での離脱も増えます。
• プロジェクトは、担当者が退職しても設定を変更できるよう、会社で管理するアカウントで作りましょう。
• 既存会員との紐づけでは、メールアドレスの一致だけで自動的に統合するのは避けてください（ソーシャルログインのアカウント統合）。

Google以外のSNSも導入する場合は、ソーシャルログインの導入手順と期間を参照してください。

よくある質問

Googleログインの導入に費用はかかりますか？

Googleへの利用料はかかりません。費用がかかるのは、自社で実装・保守する開発の工数か、外部のサービスを使う場合のその利用料です。

審査にはどれくらいかかりますか？

基本的なスコープだけなら重い審査は必須ではありません。ブランドの確認にかかる期間は案件によって違うため、公開日から逆算して早めに申請しておきましょう。

One Tapとログインボタンは両方入れるべきですか？

併用するのが一般的です。ログイン画面にはボタンを、記事ページなどにはOne Tapを置くとよいでしょう。ブラウザでGoogleアカウントにログインしていない利用者にはOne Tapが基本的に表示されないので、ボタンは外さないでください。

Google One Tapの導入には、別のOAuthクライアントが必要ですか？

必要ありません。ログインボタンと同じクライアントIDを使い、One Tapを出すページのURLを「承認済みのJavaScript生成元」に登録すれば動きます。

Google One Tapが表示されないのはなぜですか？

よくある原因は、ページのURLがJavaScript生成元に登録されていない（この場合はエラーになります）、HTTPSでないドメインで試している、ブラウザでGoogleアカウントにログインしていない、以前に閉じて非表示の期間に入っている、のいずれかです。FedCMを有効にしている場合は、ブラウザの設定で表示が抑えられていることもあります。

スマホアプリでも同じ設定を使えますか？

使えません。iOSやAndroidのアプリでは、アプリの種類ごとに別のOAuthクライアントを作成し、各OS向けの方法で実装します。アプリ内のWebViewでGoogleのログイン画面を開く方式は、Googleのポリシーで認められていません。

Login Plus について

Login Plusは、Googleを含む6つのソーシャルログイン（Apple・Facebook・Google・X（旧Twitter）・Yahoo! JAPAN・LINE）とパスキーに、1つの実装で対応できるサービスです。

• Google One Tapに対応
• 各SNSへの申請手順書を契約企業に無償で提供
• 各SNSの仕様変更にはLogin Plus側で対応
• 取得した情報をフォームへ自動入力するフォームアシスト機能
• 導入はプロバイダ申請から約2か月でリリース（導入の流れ）

導入のご相談は、資料請求またはお問い合わせからどうぞ。