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の設定を始めます OAuth consent screen

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

      

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

      

   3. ConsentScreenの設定

      注意

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

      クリックしてください create

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

   1. 始めましょう App Information

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

        注意

        ユーザーに表示される

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

        注

        サポートメールについての詳細はこちらで学べます __CAPGO_KEEP_2__

      2. __CAPGO_KEEP_3__ __CAPGO_KEEP_4__ アプリロゴを追加してください。

         

         注意

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

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

   注意

   私はこのチュートリアルの範囲外ですが、検証用にアプリを提出することを強くお勧めします。ここでは詳しく説明しませんが、詳しく知りたい場合は ここ. これはローカルでのテストには必要ありませんが、実稼働では必須です。

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

GoogleログインをCapacitorと組み合わせる方法は複数あります。以下の表は、2つの方法の主な違いをまとめています。

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

注意

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

注意

オフラインモードは、バックエンドサーバーが必要です。 オフラインモードを使用する場合、フロントエンドは最小限の情報を受信します（主にサーバーアUTH 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. アプリはバックエンドからGoogle APIを呼びますが、ユーザーがアプリを使用している場合のみ。

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

3. texts

   In this case, choose online access

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

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

オンラインアクセスの例

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

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

• TypeScript

• Hono

• JavaScriptのfetch API

この例のcodeはこちらで見つけることができます ここ

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

アイデアはとても単純です。単純なリクエストを送信し、有効なトークンかどうかを確認し、有効であればユーザーのメールアドレスやユーザーに関するその他の情報を提供します。 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 独自のバックエンドを使用したオフライン アクセスセクションのタイトル “独自のバックエンドを使用したオフライン アクセス”

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

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

• __CAPGO_KEEP_0__

このアプリでオフラインアクセスを提供するために使用する技術は以下の通りです。

• Hono

• Hono Zod検証

• Zod

• Hono JWT

• (シンプルなデータベース) この例の __CAPGO_KEEP_0__ は

The code for this example can be found クライアント __CAPGO_KEEP_0__ は

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ログインセットアップを使用して、認証とアカウントフローの計画を行っている場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginと接続してください。 Googleログインセットアップを使用して、認証とアカウントフローの計画を行っている場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginと接続してください。 Googleログインセットアップを使用して、認証とアカウントフローの計画を行っている場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginと接続してください。 Googleログインセットアップを使用して、認証とアカウントフローの計画を行っている場合、@capgo/capacitor-social-loginと接続してください。 Googleログインセットアップを使用して、認証とアカウントフローの計画を行っている場合、@capgo/capacitor-social-loginと接続してください。 Googleログインセットアップを使用して、認証とアカウントフローの計画を行っている場合、@capgo/capacitor-social-loginと接続してください。 Googleログインセットアップを使用して、認証とアカウントフローの計画を行っている場合、@capgo/capacitor-social-loginと接続してください。 @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細と 2要素認証 2要素認証の実装詳細