Google登录设置

介绍

在本指南中，您将学习如何设置 Google 登录与 Capgo 社交登录。您需要以下内容才能设置 Google 登录：

• Google 帐户

一般设置

无论您选择哪个平台，这一步骤都是必需的。

在本部分中，您将设置 Google 显示的登录屏幕。

请前往

1. console.cloud.google.com 点击项目选择器
2. Google Console 项目选择器
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. 可以 添加应用程序Logo CAN

         

         注意

         这不是必须的，我将跳过这个步骤

      3. 您 应该 配置 App domain

         

         注意

         我不会这样做，因为这只是一个简单的演示，它将 不会 发布项目，但我强烈建议填写此部分。

      4. 您 必须 提供开发者的电子邮件

         

      5. 点击 save and continue

         
6. 配置权限范围

   1. 点击 add or remove scopes

      

   2. 选择以下权限并点击 update

      

   3. 点击 save and continue

      
7. 添加测试用户
   1. 点击 add users
   2. 输入您的Google邮箱，点击回车，然后点击 add
   3. 点击 save and continue
8. 点击 back to dashboard
9. 提交您的应用程序进行验证

   Note

   我强烈建议您将应用程序提交到验证中。这超出了本教程的范围。您可以在这里学习更多 。这并非用于本地测试所必需，但在生产环境中是必需的。在线访问与离线访问的区别

标题：在线访问与离线访问的区别

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

	离线访问	需要后端
长期访问令牌	❌	✅
需要后端	❌	✅
Easy setup	✅	❌

注意

离线模式 表示您的后端可以在用户不主动使用您的应用（即用户从您的应用的角度看“离线”）时访问Google的API。长期访问令牌使此功能可用，允许后端在任何时间代表用户调用Google API。

注意

离线模式需要后端服务器。 在使用离线模式时，前端仅接收到最少的信息（主要是服务器认证code）。没有后端来交换code以获取令牌和用户信息，离线模式对前端应用没有提供有用的数据。

注意

SocialLogin.refresh({ provider: 'google' }) does 不工作于 与 google.mode: 'offline'. 在离线模式下，插件仅提供 serverAuthCode，并且您的后端必须交换该code以获取和刷新令牌，然后在后端刷新这些令牌。

如果您仍然不知道应该选择哪一个，请考虑以下场景：

1. 您希望用户登录，立即之后您将为他发行一个自定义 JWT。您的应用程序将不会调用 Google API

   在这种情况下，请选择在线访问。

2. 您的应用程序将从客户端调用一些 Google API，但永远不会从后端调用

   在这种情况下，请选择在线访问

3. 您的应用程序将从后端调用一些 Google API，但仅当用户正在积极使用应用程序时

   在这种情况下，请选择在线访问

4. 您的应用程序将定期检查用户的日历，即使他不在使用应用程序时

   在这种情况下，选择离线访问

在线访问的示例后端

在本教程的这一部分，我将展示如何在您的后端验证用户。

这个示例将非常简单，它将基于以下技术：

• TypeScript

• Hono

• JavaScript的fetch API

您可以在这里找到code的示例 如您所见：

VS __CAPGO_KEEP_0__显示Google身份验证 __CAPGO_KEEP_1__，验证令牌

The idea is rather simple. You send a simple GET request to https://www.googleapis.com/oauth2/v3/tokeninfo and this returns you whether the token is valid or not and if it it is, it gives you the email of the user. It also gives you some other info about the user token

从那里，您可以为用户颁发自己的 JWT 或颁发会话 cookie。最终认证实现的可能性无穷尽。

如果您想调用 Google API，我强烈建议您查看 Google’s OAuth 2.0 Playground。从那里您可以轻松看到可以调用的 API。

使用离线访问与您的后端

一个 HTTP 服务器

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

注意这里什么都没有：没有 SocialLogin.refresh() 在应用中调用。 这是故意的。在 Google 离线模式下，刷新发生在您的后端与刷新令牌的交换和存储之后。 serverAuthCode 并且安全地存储刷新令牌。

继续从 Google 登录设置

如果您正在使用 Google 登录设置 来规划身份验证和帐户流程，连接它到 使用 @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 的实现细节， 双因素认证 对于双因素认证的实现细节。