Google Loginの設定

はじめに

このガイドでは、Capgo Social Login を使用して Google Login をセットアップする方法を説明します。セットアップには以下が必要です：

• Google アカウント

基本設定

注意

このステップは、どのプラットフォームを使用する場合でも必須です。

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

1. 以下にアクセスしてください console.cloud.google.com
2. プロジェクトセレクターをクリックします
3. プロジェクトをまだ作成していない場合は、 新しいプロジェクトを作成してください.
   1. 次をクリックします： New project
   2. プロジェクト名を入力してクリックします Create
   3. 正しいプロジェクトを選択していることを確認してください
4. 設定を開始します OAuth consent screen

   1. 検索バーをクリックします

      

   2. を検索し、 OAuth consent screen をクリックします

      

   3. 同意画面を設定する

      注意

      ここでは、一般公開のアプリを開発しているものと仮定して、 external ユーザータイプを使用します。最も適切なユーザータイプを選択し、 create

      次をクリックします： create

      
5. アプリに関する情報を入力する

   1. まず App Information

      
      • あなたの App Name

        注意

        これはユーザーに表示されます

      • 入力してください user support email

        注意

        サポートメールについて詳しくはこちら こちら

      2. お客様 可能 アプリのロゴを追加してください。

         

         注意

         これは必須ではないので、このステップはスキップします。

      3. お客様 すべきです を設定してください App domain

         

         注意

         これは公開されるだけの簡単なデモなので、そうしませんが、 決して このセクションの入力も強くおすすめします。

      4. お客様 必須 開発者のメールアドレスを入力してください

         

      5. 次をクリックします： save and continue

         
6. スコープを設定

   1. 次をクリックします： add or remove scopes

      

   2. 以下のスコープを選択してクリックしてください update

      

   3. クリック save and continue

      
7. テストユーザーを追加
   1. 次をクリックします： add users
   2. Googleのメールアドレスを入力してEnterを押し、クリックします add
   3. クリック save and continue
8. クリック back to dashboard
9. アプリの確認を申請する

   注意

   アプリの確認申請を強く推奨します。これは本チュートリアルの範囲外です。詳細は こちらこちらで確認できます。ローカルテストには不要ですが、本番環境では必須です。

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

Capacitor で Google Login を利用する方法はいくつかあります。以下の表に、2つの違いをまとめています。

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

注意

オフラインモード とは、ユーザーがアプリをアクティブに使用していないとき（つまり、アプリから見てユーザーが「オフライン」の状態）でも、バックエンドがGoogleのAPIにアクセスできることを意味します。長期間有効なアクセストークンを使うと、バックエンドがユーザーに代わっていつでもGoogle APIを呼び出せるようになります。

注意

オフラインモードにはバックエンドサーバーが必須です。 オフラインモードを使用する場合、フロントエンドが受け取る情報は最小限（主にサーバー認証用の code のみ）です。この code をトークンやユーザー情報と交換するバックエンドがないと、オフラインモードはフロントエンドアプリケーションに有用なデータを提供できません。

注意

SocialLogin.refresh({ provider: 'google' }) は 決して と連携可能です google.mode: 'offline'。オフラインモードでは、プラグインはユーザーに以下のみを提供します serverAuthCode、バックエンドでその code をアクセストークンとリフレッシュトークンに交換し、その後バックエンドでそれらのトークンを更新する必要があります。

どちらを選ぶべきか迷っている場合は、以下のシナリオを検討してください。

1. ユーザーがログインした直後にカスタム JWT を発行したい場合。アプリは Google API を呼び出しません

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

2. アプリがクライアントから一部の Google API を呼び出しますが、バックエンドからは呼び出しません

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

3. アプリがバックエンドから一部の Google API を呼び出しますが、ユーザーがアプリをアクティブに使用している場合のみです

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

4. ユーザーがアプリをアクティブに使用していない場合でも、定期的にユーザーのカレンダーを確認します

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

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

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

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

• TypeScript

• Hono

• JavaScript の fetch API

この例の code はここで見つかります こちら

ご覧のとおり:

アイデアは比較的シンプルです。シンプルな GET リクエストを https://www.googleapis.com/oauth2/v3/tokeninfo これにより、トークンが有効かどうかを返します。有効な場合は、ユーザーのメールアドレスも取得できます。また、ユーザーのトークンに関するその他の情報も取得できます。

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

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

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

オフラインアクセスを使用するには、以下が必要です：

• HTTP サーバー

この例では、アプリでオフラインアクセスを提供するために、以下の技術を使用します：

• Hono

• Hono Zod バリデータ

• Zod

• Hono JWT

• LowDb (シンプルなデータベース)

この例の code はこちらから確認できます こちら

クライアント側の code は以下のようになります:

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- specific to my app

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'The same value as webClientId',
      mode: 'offline' // <-- important
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- important
    }
  })

  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());
  }
}

ここで欠けているものに注目してください。ここには SocialLogin.refresh() アプリ内での呼び出しがありません。これは意図的なものです。Google のオフラインモードでは、バックエンドが交換を行い、 serverAuthCode リフレッシュトークンを安全に保存した後にリフレッシュが実行されます。

Google Loginの設定から続ける

使用している場合 Google Loginの設定 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-social-login の使用 「@capgo/capacitor-social-login の使用」のネイティブ機能のために、 @capgo/capacitor-social-login @capgo/capacitor-social-login の実装の詳細については、 @capgo/capacitor-passkey @capgo/capacitor-passkey の実装詳細については、 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。