Googleログインの設定

はじめに

このガイドでは、Capgo Social LoginでGoogleログインを設定する方法を学びます。Googleログインを設定するには、次のものが必要です:

Googleアカウント

一般的な設定

このパートでは、Googleが表示するログイン画面を設定します。

console.cloud.google.comにアクセスしてください
プロジェクトセレクターをクリックします
まだプロジェクトがない場合は、新しいプロジェクトを作成してください。
1. New projectをクリックします
2. プロジェクトに名前を付けてCreateをクリックします
3. 正しいプロジェクトにいることを確認します
OAuth consent screenの設定を開始します
1. 検索バーをクリックします
2. OAuth consent screenを検索してクリックします
3. 同意画面を設定します
  
  一般に公開されるアプリを開発していることを前提としているため、externalユーザータイプを使用します。最適なユーザータイプを選択してcreateをクリックしてください
  
  createをクリックします
アプリに関する情報を入力します
1. App Informationから始めましょう
  - App Nameを入力してください
    これはユーザーに表示されます
  - user support emailを入力します
    サポートメールの詳細についてはこちらをご覧ください
  1. アプリのロゴを追加できます。
    
    これは必須ではないため、このステップはスキップします
  2. App domainを設定する必要があります
    
    これは単純なデモで公開されないため、このセクションは入力しませんが、このセクションを入力することを強くお勧めします。
  3. 開発者のメールを提供する必要があります
  4. save and continueをクリックします
スコープを設定します
1. add or remove scopesをクリックします
2. 次のスコープを選択してupdateをクリックします
3. save and continueをクリックします
テストユーザーを追加します
1. add usersをクリックします
2. Googleメールを入力してenterを押し、addをクリックします
3. save and continueをクリックします
back to dashboardをクリックします
検証用にアプリを提出します
アプリを検証用に提出することを強くお勧めします。これはこのチュートリアルの範囲外です。詳細についてはこちらをご覧ください。これはローカルテストには必要ありませんが、本番環境には必要です。

オンラインアクセスとオフラインアクセスの違い

CapacitorでGoogleログインを使用する方法は複数あります。次の表は、2つの違いをまとめたものです:

	オンラインアクセス	オフラインアクセス
バックエンドが必要	❌	✅
長期間有効なアクセストークン	❌	✅
簡単な設定	✅	❌

どちらを選択すべきかまだわからない場合は、次のシナリオを検討してください:

ユーザーにログインしてもらい、すぐにカスタムJWTを発行します。アプリはGoogle APIを呼び出しません

この場合は、オンラインアクセスを選択してください。
アプリはクライアントからいくつかのGoogle APIを呼び出しますが、バックエンドからは呼び出しません

この場合は、オンラインアクセスを選択してください
アプリはバックエンドからいくつかのGoogle APIを呼び出しますが、ユーザーがアプリを積極的に使用している場合のみです

この場合は、オンラインアクセスを選択してください
アプリは、ユーザーがアプリを積極的に使用していない場合でも、ユーザーのカレンダーを定期的にチェックします

この場合は、オフラインアクセスを選択してください

オンラインアクセスのバックエンド例

このチュートリアルのこのパートでは、バックエンドでユーザーを検証する方法を示します。

この例は非常にシンプルで、次の技術に基づいています:

この例のコードはこちらで見つけることができます

ご覧のとおり:

VS Code showing Google authentication code that verifies tokens

アイデアは非常にシンプルです。https://www.googleapis.com/oauth2/v3/tokeninfoに単純なGETリクエストを送信すると、トークンが有効かどうか、および有効な場合はユーザーのメールが返されます。また、ユーザートークンに関する他の情報も提供されます

Google OAuth Playground showing token information response with user details

そこから、独自のJWTをユーザーに発行したり、何らかのセッションCookieを発行したりできます。最終的な認証実装の可能性は無限です。

Google APIを呼び出したい場合は、GoogleのOAuth 2.0 Playgroundを確認することを強くお勧めします。そこから、呼び出すことができるAPIを簡単に確認できます。

独自のバックエンドでオフラインアクセスを使用する

オンラインアクセスを使用するには、次のものが必要です:

HTTPサーバー

この例では、次の技術を使用してアプリでオフラインアクセスを提供します:

Hono
Hono Zod validator
Zod
Hono JWT
LowDb（シンプルなデータベース）

この例のコードはこちらで見つけることができます

クライアントコードについては、次のようになります:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- アプリ固有

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'webClientIdと同じ値',
      mode: 'offline' // <-- 重要
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- 重要
    }
  })

  if (response.provider === 'google') {
    const result = response.result as GoogleLoginOfflineResponse
    const res = await fetch(`${baseURL}/auth/google_offline`, {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        serverAuthCode: result.serverAuthCode,
        platform: Capacitor.getPlatform()
      }),
      method: "POST"
    })

    if (res.status !== 200) {
      popoutStore.popout("Full google login failed", "check console");
      return
    }

    const { jwt } = await res.json();
    const userinfo = await fetch(`${baseURL}/auth/get_google_user`, {
      headers: {
        Authorization: `Bearer ${jwt}`
      }
    })
    if (userinfo.status !== 200) {
      popoutStore.popout("Full google (userinfo) login failed", "check console");
      return
    }
    popoutStore.popout("userinfo res", await userinfo.text());
  }
}