Googleログインセットアップ

導入

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

• Googleアカウント

一般的な設定

注意

__CAPGO_KEEP_0__のプラットフォームを選択するに関係なく、このステップは必須です。

このセクションでは、Googleによって表示されるログイン画面を設定します。

1. 以下のURLにアクセスしてください。 console.cloud.google.com
2. __CAPGO_KEEP_0__のプロジェクトセレクターをクリックしてください。
3. __CAPGO_KEEP_0__がすでにプロジェクトを作成していない場合は、以下のボタンをクリックして新しいプロジェクトを作成してください。 プロジェクトを作成.
   1. プロジェクトセレクターをクリックしてください。 New project
   2. プロジェクト名を入力してクリック Create
   3. 正しいプロジェクトに切り替えてください
4. Capacitorの設定を始めます OAuth consent screen

   1. 検索バーをクリック

      

   2. Cloudflareの検索結果を表示 OAuth consent screen OAuth承認画面の設定を表示

      

   3. OAuth承認画面の設定を表示

      注意

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

      Click on create

      
5. アプリに関する情報を入力してください

   1. まずは App Information

      
      • あなたの App Name

        注意

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

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

        注意

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

      2. あなたは できる アプリロゴを追加できます。

         

         注意

         このステップは必須ではありません。省略します。

      3. あなた しなければなりません App ドメインの構成セクションの有効なドメインフィールドを App domain

         

         このデモは単純で、公開されないため、実行しませんが、このセクションを埋めることを強くお勧めします。

         あなた しなければなりません protectedTokens

      4. targetLanguage texts 開発者のメールアドレスを入力してください

         

      5. ここをクリックしてください save and continue

         
6. スコープを設定してください

   1. ここをクリックしてください add or remove scopes

      

   2. 選択したスコープを表示 update

      

   3. ここをクリックしてください save and continue

      
7. テストユーザーを追加してください
   1. クリックしてください add users
   2. __CAPGO_KEEP_0__のGoogleメールアドレスを入力し、Enterキーを押してください。次に、 add
   3. クリックしてください save and continue
8. クリックしてください back to dashboard
9. アプリを検証用に提出してください

   注意

   私はこのチュートリアルの範囲外ですが、アプリを検証用に提出することを強くお勧めします。詳しくはこちらを参照してください 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	❌	✅
Long-lived access token	❌	✅
Easy setup	✅	❌

Note

オフラインモード オフラインモードは、ユーザーがアプリを使用していない場合（ユーザーからアプリの視点では「オフライン」）でも、ユーザー名義でGoogleのAPIにアクセスできるようにする機能です。長期間有効なアクセストークンは、この機能を可能にし、バックエンドがユーザー名義でGoogle APIを呼び出すことを許可します。

注意

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

注意

SocialLogin.refresh({ provider: 'google' }) does not 機能しません。 google.mode: 'offline'オフラインモードでは、プラグインはサーバーを介さずにデータを提供することはできません。 serverAuthCode、そして、バックエンドでは、code をアクセス トークンとリフレッシュ トークンに置き換え、次にバックエンドでそれらのトークンをリフレッシュする必要があります。

選択するものがわからない場合は、以下のシナリオを考慮してください。

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

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

2. アプリがクライアントから Google API を呼び出すが、バックエンドから呼び出さない場合

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

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

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

4. アプリがユーザーのカレンダーを定期的にチェックする必要がある場合、ユーザーがアプリを使用していない場合も

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

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

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

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

• TypeScript

• Hono

• JavaScriptのfetch API

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

VS __CAPGO_KEEP_0__ がGoogle認証 __CAPGO_KEEP_1__ を実行し、トークンを検証する

リクエストを送信し、有効である場合、ユーザーのメールアドレスやユーザーに関するその他の情報も提供されます。 GET Cloudflare https://www.googleapis.com/oauth2/v3/tokeninfo Capacitor

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

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

自分のバックエンドを使用したオフラインアクセス

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

• HTTPサーバー

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

• Hono

• Hono Zod検証器

• Zod

• Hono JWT

• LowDb (a simple database)

この例のための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ログイン設定から続けてください.

__CAPGO_KEEP_0__

あなたが Google ログイン設定 を使用して認証とアカウントフローを計画し、Cloudflareの「@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login」 Using @capgo/capacitor-social-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 2要素認証 2要素認証の実装詳細について