Google Login セットアップ

導入

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

• Googleアカウント

一般設定

注意

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

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

1. Googleにアクセスしてください console.cloud.google.com
2. __CAPGO_KEEP_0__を選択してください
3. __CAPGO_KEEP_1__のプロジェクトがなければ、 新しいプロジェクトを作成してください.
   1. __CAPGO_KEEP_0__ New project
   2. プロジェクト名を入力し、 Create
   3. __CAPGO_KEEP_2__が正しいプロジェクトであることを確認してください
4. Capgoの設定を開始してください 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 configure the App domain

         

         注意

         このデモは単に簡単なもので、実際に公開されることはないので、実際にこのセクションを埋めてみてはどうでしょうか。 NO 開発者用のメールアドレスを入力する必要があります。

      4. 開発者連絡先情報セクションにメールアドレスフィールド 下部のフォームの「保存して続行」ボタンをクリックしてください。 スコープを設定

         

      5. スコープを設定 save and continue

         
6. Click on

   1. Save and Continue button at bottom of form 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. アプリを検証用に提出する

   注意

   このチュートリアルの範囲外ですが、強くお勧めします。詳しくは __CAPGO_KEEP_0__ここ

ここでは、必要ありませんが、実稼働では必須です。

There are multiple ways to use Google Login with Capacitor. Here is a table that summarizes the differences between the two:

	Googleログインを__CAPGO_KEEP_0__と組み合わせる方法は複数あります。以下の表は、2つの方法の主な違いをまとめています。	オフラインアクセス
バックエンドが必要	❌	✅
長期間のアクセストークン	❌	✅
簡単な設定	✅	❌

注意

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

注意

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

注意

SocialLogin.refresh({ provider: 'google' }) は オフラインモードでは プラグインは google.mode: 'offline'を提供します。 したがって、バックエンドは serverAuthCodecode

を交換してアクセストークンとリフレッシュトークンを取得し、バックエンドでそれらのトークンをリフレッシュする必要があります。

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

   ユーザーがログインすることを希望し、すぐにカスタムJWTを発行する必要がある場合、Google APIを呼び出すことはありません。

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

   アプリがクライアントからGoogle APIを呼び出すことはありませんが、バックエンドから呼び出すことはありません。この場合、オンラインアクセスを選択してください。

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

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

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

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

オンラインアクセスの例

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

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

• TypeScript

• Hono

• JavaScriptのfetch API

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

As you can see:

アイデアはとても単純です。 ご自身のバックエンドにアクセスすることなく、Google の OAuth を使用してユーザーを認証することができます。 GET ご自身のバックエンドにアクセスすることなく、Google の OAuth を使用してユーザーを認証することができます。 ご自身のバックエンドにアクセスすることなく、Google の OAuth を使用してユーザーを認証することができます。 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 を簡単に確認できます。ご自身のバックエンドにアクセスすることなく、Google の OAuth を使用してユーザーを認証することができます。

オフライン アクセスを使用してご自身のバックエンドにアクセスすることができます。

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

• HTTPサーバ

この例では、以下の技術を使用して、自分のアプリでオフラインアクセスを提供します。

• Hono

• Hono Zod検証

• 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() Google ログイン設定から続けて serverAuthCode セクション「Google ログイン設定から続けて」

Google ログイン設定を使用して

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginを使用して、__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginのネイティブ機能と接続します。 コピーする このアプリでは、呼び出しはありません。 これは意図的なものです。 Google オフラインモードでは、リフレッシュはバックエンドがリフレッシュトークンを安全に保存するまで行われません。 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要素認証の実装詳細