Googleログイン設定

導入

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

• Googleアカウント

一般設定

注意

このステップは、どのプラットフォームを使用するかを決めることに関係なく、必須です。

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

1. Google Cloud Consoleにアクセスしてください。 console.cloud.google.com
2. プロジェクトセレクターをクリックしてください
3. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__.
   1. __CAPGO_KEEP_0__ New project
   2. __CAPGO_KEEP_0__ Create
   3. __CAPGO_KEEP_0__
4. __CAPGO_KEEP_0__ OAuth consent screen

   1. __CAPGO_KEEP_0__

      

   2. 検索して OAuth consent screen クリックしてください

      

   3. 同意画面を設定

      注意

      あなたが開発しているアプリが一般に公開されていることを前提として、 external あなたに最も適したユーザータイプを選択してください。 create

      クリックしてください create

      
5. アプリの情報を入力してください

   1. 始めましょう App Information

      
      • あなたの App Name

        注意

        ユーザーに表示される

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

        注

        サポートメールについての詳細は ここ

      2. あなたは できる アプリロゴを追加してください。

         

         注意

         このステップは任意であり、スキップします

      3. あなた しなければなりません 設定する App domain

         

         注意

         これは単純なデモなので行いません NO __CAPGO_KEEP_0__

      4. あなた 絶対に 開発者のメールアドレスを入力してください

         

      5. 下部のフォームの「保存して続行」ボタンをクリック save and continue

         
6. スコープ設定画面の「スコープを追加または削除」ボタンをクリック

   1. 以下のスコープを選択してクリック add or remove scopes

      

   2. Select the following scopes and click update

      

   3. クリック save and continue

      
7. テストユーザーを追加
   1. クリックしてください add users
   2. Google メールアドレスを入力し、Enter を押し、クリック add
   3. クリック save and continue
8. クリック back to dashboard
9. Submit your app for verification

   Note

   I strongly recommend submitting you app for verification. This is outside the scope of this tutorial. You can learn more here. This isn’t required for local testing, but is required for production.

Differences between online access and offline access

There are multiple ways to use Google Login with Capacitor. Here is a table that summarizes the differences between the two:

	Online access	Offline access
Requires a backend	❌	✅
長期アクセストークン	❌	✅
簡単なセットアップ	✅	❌

注意

オフラインモード オフラインモードは、ユーザーがアプリを使用していないときでも、ユーザーがアプリから「オフライン」であると見なされる場合に、バックエンドがGoogleのAPIにアクセスできることを意味します。長期アクセストークンは、この機能を有効にするために、バックエンドがユーザーの代わりにGoogle APIを呼び出すことを許可します。

注意

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

注意

SocialLogin.refresh({ provider: 'google' }) Capgoのプラグインは . オフラインモードでは、プラグインは 、そして、バックエンドはその__CAPGO_KEEP_0__をアクセスとリフレッシュトークンに交換し、リフレッシュする必要があります。 google.mode: 'offline'Capgoのプラグインを使用する際に迷った場合、以下のシナリオを考慮してください: serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

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

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

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

2. アプリはバックエンドからGoogle APIを呼び出しますが、ユーザーがアプリを使用している場合のみ

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

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

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

4. ユーザーのカレンダーを定期的に確認するため、アプリは常に稼動中である必要があります。

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

オンラインアクセスの例

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

この例は非常に単純であり、以下の技術に基づいています。

• TypeScript

• Hono

• JavaScriptのfetch API

この例のための code をここで見つけることができます。 ここ

ここで確認できます:

Capgo の考え方は、実際には非常に単純です。 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の例はこちらで見つけることができます。 __CAPGO_KEEP_0__のクライアントは以下のようになります。

As for the client code, it looks like this:

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

ここでは、呼び出しはありません。 その理由は、Google オフラインモードでは、バックエンドがリフレッシュトークンを安全に保存するまで、リフレッシュが発生しないためです。 SocialLogin.refresh() 呼び出しはありません。 serverAuthCode Google オフラインモードでは、バックエンドがリフレッシュトークンを安全に保存するまで、リフレッシュが発生しないためです。

Google ログイン設定から続けて

Google ログイン設定を使用して、認証とアカウントフローの計画を行っている場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginと接続してください。 Google ログイン設定を使用して、認証とアカウントフローの計画を行っている場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginと接続してください。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-passkey 実装詳細については @capgo/capacitor-passkey を参照してください。 @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric を参照してください。 2要素認証 2要素認証の実装詳細についてはこちらを参照してください。