Google 登录设置

简介

在本指南中，您将了解如何使用 Capgo 社交登录设置 Google 登录。您需要以下信息才能设置 Google 登录：

• Google 帐户

一般设置

Note

无论您决定使用哪个平台，都需要执行此步骤。

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

1. 请访问 console.cloud.google.com
2. 单击项目选择器
3. 如果您还没有项目，请创建一个新项目。
   1. 点击“新建项目”
   2. 为您的项目命名并单击 Create
   3. 确保您从事正确的项目
4. 开始配置 OAuth consent screen

   1. 点击搜索栏

      

   2. 搜索OAuth consent screen并点击它

      

   3. 配置同意屏幕 :::注意 我假设您正在开发一个向公众开放的应用程序，因此我将使用 external 用户类型。请选择最适合您的用户类型并点击 create :::

      点击 create

      
5. 填写您的应用程序信息

   1. 让我们从“应用程序信息”开始

      
      • 请输入您的“应用程序名称” :::注意 这将显示给用户 :::
      • 输入“用户支持电子邮件” :::注意 您可以在[此处]了解有关支持电子邮件的更多信息(https://support.google.com/cloud/answer/10311615#user-support-email&zippy=%2Cuser-support-email/) :::

      2. 您可以添加应用程序徽标。

         

         :::注意 这不是强制性的，我将跳过这一步 :::

      3. 您应该配置“应用程序域”

         

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

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

         

      5. 单击“保存并继续”

         
6. 配置范围

   1. 单击“添加或删除范围”

      

   2. 选择以下范围并单击 update

      

   3. 点击“保存并继续”

      
7. 添加测试用户
   1. 点击“添加用户”
   2. 输入您的 Google 电子邮件，单击“输入”，然后单击 add
   3. 点击“保存并继续”
8. 单击“返回仪表板”
9. 提交您的应用程序以供验证 :::注意 我强烈建议您提交应用程序进行验证。这超出了本教程的范围。您可以此处了解更多信息。这对于本地测试不是必需的，但对于生产是必需的。 :::

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

使用 Google 有多种方式使用 Capacitor 登录。下表总结了两者之间的差异：

	在线访问	离线访问
需要后端	❌	✅
长期访问令牌	❌	✅
轻松设置	✅	❌

Note

离线模式意味着即使用户没有主动使用您的应用程序（即，当用户从您的应用程序的角度来看“离线”时），您的后端也可以访问 Google 的 API。长期访问令牌通过允许后端随时代表用户调用 Google API 来启用此功能。

Caution

**离线模式需要后端服务器。**使用离线模式时，前端接收最少的信息（主要只是服务器身份验证代码）。如果没有后端将此代码交换为令牌和用户信息，离线模式不会为您的前端应用程序提供有用的数据。

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

1. 您希望用户在您要向他颁发自定义 JWT 后立即登录。您的应用不会调用 Google API

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

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

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

3.您的应用程序将从后端调用一些google API，但仅当用户主动使用该应用程序时

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

4.您的应用程序将定期检查用户的日历，即使他没有积极使用该应用程序

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

在线访问后端示例

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

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

• TypeScript

• 霍诺

• JavaScript Fetch API

您可以在此处找到此示例的代码

正如你所看到的：

这个想法相当简单。您向 https://www.googleapis.com/oauth2/v3/tokeninfo 发送一个简单的 GET 请求，该请求会返回您令牌是否有效，如果有效，则会向您提供用户的电子邮件。它还为您提供了有关用户令牌的一些其他信息

从那里，您可以向用户发出您自己的 JWT 或发出某种会话 cookie。对于最终的身份验证实施来说，可能性是无限的。

如果您确实想致电 Google API 的，我强烈建议您查看 Google 的 OAuth 2.0 Playground。从那里您可以轻松查看可以调用哪些 API。

通过您自己的后端使用离线访问

为了使用在线访问，您将需要以下内容：

• HTTP 服务器

在此示例中，我将使用以下技术在我的应用程序中提供离线访问：

• 霍诺

• Hono Zod 验证器

• 佐德

• 荣誉JWT

• LowDb（一个简单的数据库）

此示例的代码可以在此处找到

至于客户端代码，它看起来像这样：

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