Googleログインセットアップ

導入

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

• Googleアカウント

一般設定

注意

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

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

1. 以下のリンクをクリックしてください。 console.cloud.google.com
2. プロジェクトセレクターをクリックしてください
3. プロジェクトが既に存在しない場合は、以下の手順に従って新しいプロジェクトを作成してください 新しいプロジェクトを作成してください.
   1. Google Console で New project
   2. プロジェクト名を入力し、作成ボタンをクリックしてください Create
   3. プロジェクト名がセレクターに表示されていることを確認してください
4. __CAPGO_KEEP_0__ OAuth consent screen

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

      

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

      

   3. 承認画面を設定

      注記

      あなたが開発中のアプリが一般公開されていることを前提として、以下の説明を行います。 external あなたの状況に合ったユーザータイプを選択してください create

      をクリックしてください create

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

   1. 始めに App Information

      
      • アプリ名とサポートメールのアドレスを入力してください App Name

        注意

        ユーザーに表示される

      • ユーザーへのサポートメールのアドレスを入力してください user support email

        注

        サポートメールの詳細についてはこちらを参照してください __CAPGO_KEEP_0__

      2. あなた CAN アプリロゴを追加することができます。

         

         このステップは任意であり、スキップすることができます。

         あなた

      3. SHOULD 設定する必要があります。 ドメイン設定 App domain

         

         注意

         私はそれをしないことになります。なぜなら、こののは単に簡単なデモだからです。それが出版されることはないので、しかし、このセクションを埋めることを強くお勧めします。 NO あなた

      4. 提供する必要があります 開発者のメールアドレス 開発者連絡先情報セクション

         

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

         
6. スコープを設定

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

      

   2. 以下のスコープを選択し、クリック update

      

   3. クリック save and continue

      
7. テストユーザーを追加
   1. テストユーザーセクションの追加ボタン add users
   2. テストユーザー用のメール入力フィールドと追加ボタン add
   3. テストユーザー画面の保存と続行ボタン save and continue
8. クリック back to dashboard
9. アプリを検証する

   注意

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

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

Googleログインを使用する方法は複数あります。 Capacitor の使用方法の違いを表す表があります。

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

注記

オフラインモード オフラインモードとは、ユーザーがアプリを使用していないときでも、バックエンドがGoogleのAPIにアクセスできるようにする機能です。長期アクセストークンは、この機能を可能にするもので、バックエンドがユーザーの代わりにGoogle APIを呼び出すことを許可します。

注意

オフラインモードはバックエンドサーバーが必要です。 オフラインモードを使用する場合、フロントエンドは最小限の情報（主にサーバーアUTHcode）を受け取ります。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.

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

1. ユーザーがログインするようにしたい場合は、すぐにカスタムJWTを発行する予定です。アプリはGoogle APIを呼びません。

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

2. アプリがクライアントからGoogle APIを呼びますが、サーバーから呼びません。

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

3. アプリは、ユーザーがアプリを使用している間のみ、Google APIをバックエンドから呼び出すことになります。

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

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

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

オンラインアクセスの例

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

この例は非常に簡単で、以下の技術に基づいて構築されます。

• TypeScript

• Hono

• JavaScriptのfetch API

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

ここでは

このアイデアは比較的単純です。ユーザーに簡単な __CAPGO_KEEP_0__ を送信し、トークンが有効であるかどうかを確認し、有効であればユーザーのメールアドレスやその他のユーザー情報を取得します。 GET Google OAuth Playground でトークン情報のレスポンスを表示します。 https://www.googleapis.com/oauth2/v3/tokeninfo ここから、ユーザーに独自の JWT を発行したり、セッション Cookie を発行したりすることができます。最終的な認証実装の可能性は限りません。

Google の OAuth 2.0 Playground を参照してください。

If you do want to call Google API’s, I would strongly recommend looking at オフライン アクセスを使用して独自のバックエンドで実装するここ

ここ

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

• HTTPサーバー

この例では、次の技術を使用して、オフラインアクセスを提供するアプリケーションを作成します。

• Hono

• Hono Zod検証

• Zod

• Hono JWT

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

この例のcodeは ここにあります

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() Googleログインセットアップから続けてください serverAuthCode セクション名：Googleログインセットアップから続けてください

Googleログインセットアップを使用している場合

Googleログインセットアップを使用している場合、Googleログインセットアップを Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login for the native capability in Using @capgo/capacitor-social-login for the native capability in Using @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要素認証 2要素認証の実装詳細について