Google登录设置

介绍

In this guide, you will learn how to setup Google Login with Capgo Social Login. You will need the following in order to setup 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. 必须 __CAPGO_KEEP_0__ 提供开发者邮箱

         

      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. 提交您的应用程序进行验证

   注意

   我强烈建议您提交应用程序进行验证。这超出了本教程的范围。您可以在此处了解更多信息 在简体中文中. 这不是本地测试所必需的，但是在生产环境中是必需的。

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

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

	在线访问	离线访问
需要后端	❌	✅
长期有效的访问令牌	❌	✅
易于设置	✅	❌

注意

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

注意

脱机模式需要后端服务器。 在脱机模式下，前端接收到的信息非常有限（主要是服务器认证code）。没有后端来交换code以获取令牌和用户信息，脱机模式对前端应用程序没有任何有用信息。

注意

SocialLogin.refresh({ provider: 'google' }) 不 不 与 google.mode: 'offline'不支持。 在脱机模式下，插件只会给您 serverAuthCode您需要在后端将 code 替换为访问令牌和刷新令牌，然后在后端刷新这些令牌。

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

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

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

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

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

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

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

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

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

在线访问示例后端

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

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

• Typescript

• Hono

• Javascript的fetch API

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

VS __CAPGO_KEEP_0__ 展示了 Google 认证 __CAPGO_KEEP_1__，用于验证令牌

并且它会返回令牌是否有效以及令牌有效时会给您用户的电子邮件地址以及令牌的其他信息 GET __CAPGO_KEEP_0__ https://www.googleapis.com/oauth2/v3/tokeninfo __CAPGO_KEEP_1__

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

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

使用离线访问与您的后端

要使用离线访问，您需要以下内容：

• HTTP 服务器

在本例中，我将使用以下技术来为我的应用提供离线访问：

• Hono

• Hono Zod 验证器

• Zod

• Hono JWT

• LowDb (一个简单的数据库)

本示例的code可以在这里找到 客户端__CAPGO_KEEP_0__看起来像这样:

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

继续从 Google 登录设置 SocialLogin.refresh() 客户端__CAPGO_KEEP_0__看起来像这样： 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 的实现细节 双重认证 双重认证实现细节。