Google Login セットアップ

導入

Capgo Social Loginの設定方法を学びます。このガイドでは、Capgo Social LoginとGoogleログインを設定する方法について説明します。

• Googleログインを設定するには、以下のものが必要です:

Googleアカウント

注意

注意

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

1. このセクションでは、Googleが表示するログイン画面を設定します。 Google Cloud Consoleにアクセスしてください。
2. プロジェクトセレクターをクリックしてください。
3. プロジェクトがなければ、 新しいプロジェクトを作成してください.
   1. Google Consoleで New project
   2. 新しいプロジェクトの名前を入力して Create
   3. プロジェクト名が正しく選択されていることを確認してください
4. Capgoの設定を始めます OAuth consent screen

   1. 検索バーをクリックしてください

      

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

      

   3. ConsentScreenの設定

      注意

      あなたが一般向けのアプリを開発していることを前提として、 external ユーザータイプを選択してください。ユーザータイプを選択してください。 create

      クリックしてください create

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

   1. 始めましょう App Information

      
      • __CAPGO_KEEP_0__を入力してください App Name

        注意

        ユーザーに表示される

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

        注

        サポートメールについてもっと学びます ここ

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

         

         注意

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

      3. あなた SHOULD configuring the App domain

         

         注意

         こののは単純なデモなので行いません NOT get published, but I strongly recommend filling this section.

      4. You HAVE TO provide the developer’s email

         

      5. Click on save and continue

         
6. Configure the scopes

   1. Click on 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を呼び出すことを許可することで、バックエンドがユーザーに対してGoogle APIを呼び出すことができるようにします。

注意

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

注意

SocialLogin.refresh({ provider: 'google' }) 機能しません。 オフラインモードでは、プラグインはあなたに 、そしてあなたのバックエンドはそれを google.mode: 'offline'に置き換える必要があります。アクセスとリフレッシュトークンを取得し、バックエンドでそれらをリフレッシュする必要があります。 serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

ユーザーがログインしたい場合、すぐにカスタムJWTを発行することになります。アプリはGoogle APIを呼びません。

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

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

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

   アプリがバックエンドからGoogle APIを呼びますが、ユーザーがアプリを使用しているときに限ります。

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

   texts

4. あなたのアプリは、ユーザーがアプリを使用していなくても、定期的にユーザーのカレンダーをチェックします

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

オンラインアクセスの例

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

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

• TypeScript

• Hono

• JavaScriptのfetch API

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

ユーザーが見ることができます:

The idea is rather simple. You send a simple GET request to https://www.googleapis.com/oauth2/v3/tokeninfo and this returns you whether the token is valid or not and if it it is, it gives you the user's email. It also gives you some other info about the user token

From there, you could issue the user with your own JWT or issue some sort of session cookie. The possibilities are endless, for the final auth implementation.

If you do want to call Google API’s, I would strongly recommend looking at Google’s OAuth 2.0 Playground. From there you can easily see what APIs you can call.

__CAPGO_KEEP_0__

Section titled “__CAPGO_KEEP_0__ with your own backend”

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

注意してください。アプリ内に呼び出しはありません。それは意図的にありません。Google オフラインモードでは、リフレッシュは、バックエンドがリフレッシュトークンを安全に保存するまで行われません。 SocialLogin.refresh() Google オフラインモードでは、リフレッシュは、バックエンドがリフレッシュトークンを安全に保存するまで行われません。 serverAuthCode Google ログイン設定から続けてください。

Google ログイン設定から続けてください。

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