Google Login 配置

简介

本指南将教你如何使用 Capgo Social Login 设置 Google Login。要设置 Google Login，你需要准备以下内容：

• 一个 Google 账号

常规设置

注意

无论您选择使用哪个平台，此步骤都是必不可少的。

在此部分中，您将配置 Google 显示的登录界面。

1. 请前往 console.cloud.google.com
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. 您 可以 添加应用 Logo。

         

         注意

         这不是强制性的，我可以跳过这一步

      3. 您 应当 配置 App domain

         

         注意

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

      4. 您 必须 提供开发者邮箱

         

      5. 点击 save and continue

         
6. 配置 Scopes

   1. 点击 add or remove scopes

      

   2. 选择以下 Scopes 并点击 update

      

   3. 点击 save and continue

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

   注意

   我强烈建议您提交应用进行验证。这超出了本教程的范围。您可以了解更多 这里。这在本地测试时不是必需的，但在生产环境中是必须的。

在线访问与离线访问的区别

在使用 Capacitor 时，有多种使用 Google Login 的方式。下表总结了两者之间的区别：

	在线访问	离线访问
需要后端	❌	✅
长效访问令牌 (Long-lived access token)	❌	✅
配置简单	✅	❌

注意

离线模式 意味着即使在用户未主动使用您的 App 时（即从 App 的视角来看用户处于“离线”状态），您的后端仍能访问 Google 的 APIs。通过使用长效 access tokens，后端可以在任何时间代表用户调用 Google APIs，从而实现这一功能。

注意

离线模式需要后端服务器。 使用离线模式时，前端接收到的信息极少（主要只是一个服务器授权 code）。如果没有后端来将此 code 兑换为 tokens 和用户信息，离线模式无法为您的前端应用提供任何有用数据。

注意

SocialLogin.refresh({ provider: 'google' }) 可以 不会 配合使用 google.mode: 'offline'. 在离线模式下，插件只提供 serverAuthCode，你的后端必须用该 code 换取 access token 和 refresh token，然后在后端刷新这些 token。

如果你仍不确定该选哪一个，请参考以下场景：

1. 你希望用户登录后，立即为其签发自定义 JWT。你的 App 不会调用 Google APIs

   这种情况下，请选择 online access。

2. 你的 App 会从客户端调用一些 Google APIs，但绝不会从后端调用

   这种情况下，请选择 online access

3. 你的 App 会从后端调用一些 Google APIs，但仅在用户正在使用 App 时调用

   这种情况下，请选择 online access

4. 你的 App 会定期检查用户的日历，即使用户当前并未使用 App

   这种情况下，请选择 offline access

online access 的后端示例

在本教程章节中，我将演示如何在您的后端验证用户。

该示例非常简单，将基于以下技术栈：

• Typescript

• Hono

• Javascript 的 fetch API

您可以找到该示例的 code 这里

如下所示：

其核心逻辑非常简单。您只需发送一个简单的 GET 请求到 https://www.googleapis.com/oauth2/v3/tokeninfo 这会返回 token 是否有效；如果有效，还会返回用户的 email 以及该 user token 的其他相关信息。

基于此，你可以为用户签发自定义的 JWT 或发放某种 session cookie。对于最终的鉴权实现，方案是无穷无尽的。

如果你想调用 Google API 的接口，我强烈建议查看 Google OAuth 2.0 Playground。通过它，你可以轻松查看有哪些可调用的 API。

配合自有后端使用 offline access

为了使用 offline access，你需要以下条件：

• 一个 HTTP server

在本例中，我将使用以下技术在应用中实现 offline access：

• 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 并安全存储 refresh token 之后发生。

继续 Google Login 配置

如果你正在使用 Google 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 中的实现细节， 双因素认证 有关双重身份验证的实现细节。