Google ログイン設定

導入

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

• Googleアカウント

基本設定

注意

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

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

1. ここに移動してください console.cloud.google.com
2. プロジェクトセレクターをクリックしてください
3. プロジェクトがまだない場合は、新しいプロジェクトを作成してください Note: If you don’t have a project already, please create a new project.
   1. Google Consoleで New project
   2. プロジェクト名を入力し、 Create
   3. 正しいプロジェクトが選択されていることを確認
4. Google Consoleの設定を始める OAuth consent screen

   1. 検索バーをクリック

      

   2. 検索 OAuth consent screen 検索結果を表示

      

   3. Googleアカウント連携プラグインの設定

      注意

      このドキュメントでは、一般に公開されるアプリを開発していることを前提としています。 external ユーザータイプを選択してください。 create

      選択 create

      
5. 外部と内部の両方のオプション

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

      
      • アプリ名とサポート用メールアドレスの入力 App Name

        注意

        ユーザーに表示される

      • 入力 user support email

        注

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

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

         

         注意

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

      3. You SHOULD アプリのドメイン設定セクションの有効なドメインフィールドを設定する App domain

         

         注意

         SHOULD NOT 実行しません

      4. You 必要に応じて __CAPGO_KEEP_0__の開発者のメールアドレスを提供する必要があります

         

      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. 検証のためにアプリを提出する

   注記

   私はあなたのアプリを検証することを強くお勧めします。これはこのチュートリアルの範囲外です。詳しくは ここを参照してください。ローカルでのテストには必要ありませんが、実稼働には必要です。

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

Googleログインを使用する方法は複数あります。Capacitorの詳細は以下の表でまとめてあります。

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

注意

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

注意

オフラインモードはバックエンドサーバーが必要です。 オフラインモードの場合、フロントエンドは最小限の情報 (主にサーバーアUTH 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

Capgoの例では、codeはこの場所で見つけることができます。 ここで確認できます。

VS __CAPGO_KEEP_0__がGoogle認証 __CAPGO_KEEP_1__を実行し、トークンを検証しています。

リクエストを GET protectedTokens https://www.googleapis.com/oauth2/v3/tokeninfo とこのリターンは、トークンが有効であるかどうかを判断し、有効であればユーザーのメールアドレスを返します。また、ユーザーのトークンに関する他の情報も提供します。

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

If you do want to call Google API’s, I would strongly recommend looking at GoogleのOAuth 2.0 Playground. ここから、呼び出すことができるAPIを簡単に確認できます。

オフラインアクセスを使用する

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

• HTTPサーバー

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

• Hono

• Hono Zod Validator

• 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() リフレッシュトークン serverAuthCode リフレッシュトークンを取得する

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

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