Googleログインをゲームに付ける手順

まず「何ができるか」を確認する

Googleログインをゲームに付けると、プレイヤーはGoogleアカウントで本人確認ができます。その結果として得られるのは主に二つです。一つはIDトークン（プレイヤーのGoogleアカウント情報を含む署名付きのJSON文字列）、もう一つはアクセストークン（GoogleのAPIを呼び出す許可証）です。

IDトークンだけで「誰がログインしているか」は分かります。しかしセーブデータをどこに保存するかは別問題です。Googleログイン自体にセーブ機能は付いていません。ログインで得たユーザーIDをキーにして、自前のデータベースやFirebaseのようなクラウドサービスにデータを書き込む仕組みを別途作る必要があります。

「ログインだけ付けてローカルストレージと紐づける」という割り切った使い方もあります。同じブラウザ・同じデバイスなら機能しますが、端末をまたいだ同期はできません。どこまで実装するかは、ゲームの規模と自分の技術リソースに応じて判断してください。

Google Cloud Consoleでの準備

実装の前に、Google Cloud Console上でOAuthクライアントIDを取得します。手順は次のとおりです。

1. Google Cloud Consoleにアクセスし、プロジェクトを作成する（既存のプロジェクトを流用してもよい）。
2. 左メニューから「APIとサービス」→「認証情報」を開く。
3. 「認証情報を作成」→「OAuthクライアントID」を選択する。
4. アプリケーションの種類に「ウェブアプリケーション」を選ぶ。
5. 「承認済みのJavaScript生成元」にゲームを公開するドメインを入力する（例：https://example.com）。ローカルでテストするなら http://localhost も追加しておく。
6. 作成するとクライアントIDが発行される。これを後のコードに貼り付ける。

クライアントIDは公開情報として扱われるため、HTMLに直接書いても問題ありません。一方、クライアントシークレットはサーバーサイドでのみ使うものなので、フロントエンドのコードに含めないようにします。

なお、OAuth同意画面の設定も必要です。アプリ名・サポートメールアドレス・スコープ（要求する権限）を入力します。外部公開するゲームの場合、Googleの審査が必要になるスコープもありますが、メールアドレスと基本プロフィール（openid・email・profile）だけであれば審査なしで使えます。公式の最新情報は必ずGoogle Cloud Consoleで確認してください。

HTMLとJavaScriptでの実装

Google Identity Servicesは、スクリプトタグ一本で読み込めるライブラリです。フレームワークなしの素のHTMLでも動かせます。

まずHTMLの<head>に次のスクリプトを追加します。

<script src="https://accounts.google.com/gsi/client" async defer></script>

続いて、ログインボタンを表示したい場所に次のDIVを置きます。data-client_idには先ほど取得したクライアントIDを入れます。

<div id="g_id_onload"
     data-client_id="YOUR_CLIENT_ID.apps.googleusercontent.com"
     data-callback="handleCredentialResponse"
     data-auto_prompt="false">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="sign_in_with"
     data-size="large"
     data-locale="ja">
</div>

data-callbackに指定した関数名がコールバックです。ログイン成功時にこの関数が呼ばれます。JavaScriptで次のように受け取ります。

function handleCredentialResponse(response) {
  // response.credential がIDトークン（JWT文字列）
  const idToken = response.credential;

  // JWTのペイロード部分をデコードしてユーザー情報を取り出す
  const payload = JSON.parse(atob(idToken.split('.')[1]));
  const userId = payload.sub;        // GoogleアカウントのユニークID
  const email  = payload.email;
  const name   = payload.name;
  const picture = payload.picture;

  console.log('ログイン成功:', name, email);
  // ここからゲームのログイン後処理に繋げる
}

payload.subはGoogleアカウントごとに固定のIDです。セーブデータのキーとして使うのに適しています。

サーバーなしで使う場合の注意点

フロントエンドだけでIDトークンを受け取ったとき、そのトークンが本物かどうかを検証していないという点に注意が必要です。クライアント側だけでatobデコードしたデータは、理論上は改ざんできます。

趣味の個人ゲームやローカルストレージとの組み合わせなど、不正ログインによる被害がほぼ発生しないケースでは、フロントエンドのみでも実用上問題にならないことが多いです。一方、ランキングや課金・有償アイテムなど、不正が影響する仕組みを持つゲームの場合は、サーバー側でIDトークンをGoogleの公開鍵で検証する処理が必要になります。この検証にはNode.jsやPythonのGoogle公式ライブラリが使えます。

判断の目安をまとめると次のようになります。

• ローカルストレージとの紐づけのみ、サーバー検証の必要性：低い
• Firebaseなどのクラウドサービスと組み合わせる、サーバー検証の必要性：Firebase側が検証するため不要なことが多い
• 自前DBにセーブデータを保存する、サーバー検証の必要性：必要
• ランキングや報酬に関わる処理がある、サーバー検証の必要性：必要

ログアウトとセッション管理

Googleログインのセッションはブラウザのクッキーで管理されます。ゲーム内でログアウトボタンを実装したい場合は、Google Identity Servicesが提供するgoogle.accounts.id.disableAutoSelect()を呼び出し、合わせてゲーム側でローカルに保持しているユーザー情報をクリアします。

function signOut() {
  google.accounts.id.disableAutoSelect();
  // ゲーム内のユーザー情報をリセット
  currentUser = null;
  updateUI();
}

revoke（アカウントとの連携解除）まで実装するかどうかは、ゲームの規模に応じて判断してください。一般的なブラウザゲームでは、ログアウトボタンでローカル情報を消す程度で十分なことがほとんどです。

次の行動

Google Cloud Consoleでプロジェクトを作り、OAuthクライアントIDを取得するところから始めてください。ローカル環境（localhost）での動作確認は比較的短時間でできます。実装が動いたら、セーブデータをどこに置くか（ローカルストレージ・Firebase・自前サーバー）を決めてゲームのデータ設計に進んでください。アソバースにはSDKで対応したゲームに共通ログインとクラウドセーブを組み込める仕組みもあるので、プラットフォームとの連携を検討する場合は公式ドキュメントを参照してください。

参考資料

• Google Identity Services — Google Developers 公式ドキュメント
• Google OAuth 2.0 for Web Server Applications — Google Developers 公式ドキュメント
• Google Cloud Console — 認証情報の設定ページ