Google Login設定

概要

Capgo Social LoginとGoogleログインの設定

• __CAPGO_KEEP_0__ Social LoginとGoogleログインの設定

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

一般設定

一般設定

注意

1. このステップは、どのプラットフォームを使用するかを決定することに関係なく、必須です。 このセクションでは、Googleによって表示されるログイン画面を設定します。
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

        Note

        注意 here

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

         

         注意

         このステップは必須ではありません。省略できます。

      3. あなた SHOULD SHOULD App domain

         

         注意

         私はそれを行わないことにします。なぜなら、これは単に簡単なデモであり、出版されることはないからです。 NO 公開されることはないが、強くお勧めします。

      4. あなたは context HTML text fragment from a longer Capgo UI string (parent key `you_definition`). Page/area: Capgo marketing website. Role: Long marketing or legal paragraph. Seen in: page disclaimer.astro, page return.astro. Message key `you_definition` (You Definition).

         

      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 Login を使用する方法は複数あります。Capacitor の使用方法を以下の表にまとめました。

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

注意

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

注意

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

注意

SocialLogin.refresh({ provider: 'google' }) は が と google.mode: 'offline'。オフラインモードではプラグインは serverAuthCode, では、サーバー側では、code をアクセス トークンとリフレッシュ トークンに交換し、後でサーバー側でそれらのトークンをリフレッシュする必要があります。

を取得し、更新トークンを取得する必要があります。

1. がわからない場合は、以下のシナリオを考慮してください。

   オンラインアクセスを選択してください。

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

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

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

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

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

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

オンラインアクセスの例

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

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

• TypeScript

• Hono

• JavaScriptのfetch API

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

あなたは見ることができます。

アイデアは比較的単純です。ユーザーに簡単なリクエストを送信し、Google にアクセス許可を求めます。 GET リクエストを送信します。 https://www.googleapis.com/oauth2/v3/tokeninfo Google の API を呼び出します。

Google OAuth Playground でトークン情報のレスポンスを表示します。

Google の API を呼びたい場合は、強くお勧めします。 Google の API を呼び出す場合は、強くお勧めします。Google の OAuth 2.0 Playground を参照してください。

ここから、呼び出せる API を簡単に確認できます。

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

• HTTPサーバー

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

• Hono

• Hono Zod検証

• Zod

• Hono JWT

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

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

クライアント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());
  }
}

ページに表示されているのは何もありません。アプリ内では呼び出されません。 SocialLogin.refresh() アプリ内では呼び出されません。Googleオフラインモードでは、バックエンドがリフレッシュトークンを安全に保存するまでリフレッシュが実行されます。 serverAuthCode Googleログイン設定から続けてください。

Googleログイン設定から続けてください。

Googleログイン設定を使用して認証とアカウントフローの計画を行っている場合、 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginを使用して@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginのネイティブ機能を実装します。 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-ソーシャルログイン Capgoの実装詳細については@capgo/capacitor-social-loginを参照してください。 @capgo/capacitor-パスキー Capgoの実装詳細については@capgo/capacitor-passkeyを参照してください。 @capgo/capacitor-native-biometric Capgoの実装詳細については@capgo/capacitor-native-biometric、 2要素認証 Capgoの実装詳細については2要素認証を参照してください。