Google ログイン設定

導入

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

• Googleアカウント

一般設定

注意

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

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

1. 以下の手順に従ってください。 console.cloud.google.com
2. プロジェクト セレクターをクリックしてください
3. プロジェクトがまだない場合は、 新しいプロジェクトを作成してください.
   1. クリックしてください New project
   2. プロジェクト名を入力し、 Create
   3. 正しいプロジェクトが選択されていることを確認してください
4. 設定を開始してください OAuth consent screen

   1. __CAPGO_KEEP_0__

      

   2. __CAPGO_KEEP_0__ OAuth consent screen __CAPGO_KEEP_0__

      

   3. __CAPGO_KEEP_0__

      __CAPGO_KEEP_0__

      パブリックに開かれたアプリを開発しているので、 external __CAPGO_KEEP_0__ create

      __CAPGO_KEEP_0__ create

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

   1. まずは App Information

      
      • アプリ名を入力してください App Name

        注意

        ユーザーに表示される

      • アプリ名を入力してください user support email

        注

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

      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. Googleのメールアドレスを入力し、Enterを押し、クリック add
   3. クリック save and continue
8. クリック back to dashboard
9. アプリを検証申請する

   注意

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

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

Googleログインを使用する方法は複数あります。Capacitorの特徴を以下の表にまとめました。

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

注意

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

注意

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

注意

SocialLogin.refresh({ provider: 'google' }) は 機能しません。オフラインモードの場合、プラグインはあなたに を提供します。 そしてあなたのバックエンドは、__CAPGO_KEEP_0__ をアクセストークンとリフレッシュトークンに交換し、バックエンドでそれらのトークンを更新する必要があります。 google.mode: 'offline'まだどちらを選択するか分からない場合は、以下のシナリオを考慮してください。 serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

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

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

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

2. __CAPGO_KEEP_0__

   __CAPGO_KEEP_0__

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

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

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

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

オンラインアクセスの例

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

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

• TypeScript

• Hono

• Javascript’s fetch API

You can find the code for this example ここ

ここで確認できます

このアイデアはとても単純です。単純な__CAPGO_KEEP_0__を送信し、__CAPGO_KEEP_1__にリクエストを送信します。 GET これは、トークンが有効であるかどうかを返します。有効である場合、ユーザーのメールアドレスやユーザーに関するその他の情報も返します。 https://www.googleapis.com/oauth2/v3/tokeninfo Google OAuth Playgroundでトークン情報のレスポンスを表示します。

Google __CAPGO_KEEP_0__を呼び出す場合は、強くお勧めします。

If you do want to call Google API’s, I would strongly recommend looking at ここから、呼び出すことができるAPIを簡単に確認できます。オフラインアクセスを使用して独自のバックエンドを使用します

__CAPGO_KEEP_0__

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

• 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 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要素認証の実装詳細について