Googleログインセットアップ

導入

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

• Googleアカウント

一般設定

注意

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

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

1. 以下のリンクをクリックしてください。 Google Cloud Console
2. プロジェクトセレクターをクリックしてください
3. プロジェクトが既に存在しない場合は、 新しいプロジェクトを作成してください.
   1. クリックしてください New project
   2. プロジェクト名を入力し、 Create
   3. 正しいプロジェクトに切り替えてください
4. 設定を開始してください OAuth consent screen

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

      

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

      

   3. 承認画面の設定

      注意

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

      クリックしてください create

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

   1. 始めに App Information

      
      • メールアドレスを入力してください App Name

        注意

        ユーザーに表示される

      • メールアドレスを入力してください user support email

        注

        ユーザー支援メールアドレスについて詳しくは ここをクリックしてください

      2. You CAN appロゴを追加することができます。

         

         Note

         This is not obligatory and I will skip this step

      3. You SHOULD configure the 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を呼び出すことを許可するものです。

注意

オフラインモードはバックエンドサーバーが必要です。 オフラインモードを使用する場合、フロントエンドは最小限の情報（主にサーバーアUTHcode）を受け取ります。バックエンドでこれを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. Your app will call some Google APIs from the client, but never from the backend

   In this case, choose online access

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

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

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

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

オンラインアクセスの例

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

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

• TypeScript

• Hono

• JavaScriptのfetch API

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

ここで確認できます

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

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());
  }
}

注意してください。アプリ内には SocialLogin.refresh() 呼び出しはありません。そうするのは意図的なことです。Googleオフラインモードでは、リフレッシュはバックエンドがリフレッシュトークンを安全に保存するまで行われません。 serverAuthCode Googleログイン設定から続けてください

セクション名 “Googleログイン設定から続けてください”

Googleログイン設定 Googleログイン設定を使用して 認証とアカウントフローの計画を行っている場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginを接続してください @capgo/capacitor-social-loginを使用して、@capgo/capacitor-social-loginのネイティブ機能を実装します @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要素認証