Google 登录设置

简介

在本指南中，您将学习如何使用Capgo Social Login设置Google登录。您需要以下内容才能设置Google登录:

• 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. 配置权限范围

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

   注意

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

在线访问与离线访问之间的差异

使用Capacitor与Google登录有多种方式。以下是两者的主要差异：

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

注意

离线模式 这意味着您的后端可以访问Google的API，即使用户没有主动使用您的应用程序（即用户在您的应用程序的视图中“离线”）。长期访问令牌使此功能可用，因为它允许后端在任何时间代表用户调用Google API。

警告

离线模式需要后端服务器。 当使用离线模式时，前端仅接收少量信息（主要是服务器认证code）。没有后端来交换此code以令牌和用户信息，离线模式对您的前端应用程序没有任何有用数据。

注意事项

SocialLogin.refresh({ provider: 'google' }) 不 能 与 google.mode: 'offline'. 在离线模式下，插件仅提供 serverAuthCode,您需要在后端交换该 code 以获取和刷新令牌，然后在后端刷新这些令牌。

__CAPGO_KEEP_0__

1. 换取访问令牌和刷新令牌，然后在后端刷新这些令牌。

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

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

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

3. 您的应用程序将在客户端调用一些 Google API，但从未在后端调用它们

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

4. 您的应用程序将定期检查用户的日历，即使用户没有主动使用应用程序

   In 这种情况，选择离线访问

在线访问的示例后端

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

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

• TypeScript

• Hono

• JavaScript 的 fetch API

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

您可以看到

这个想法很简单。您发送一个简单的请求到 GET 请求 https://www.googleapis.com/oauth2/v3/tokeninfo Google OAuth Playground 展示令牌信息响应，包含用户详细信息

如果您想调用 Google __CAPGO_KEEP_0__，我强烈建议您查看

如果您想调用Google的API，我强烈建议您查看 。从那里您可以轻松看到您可以调用的 API使用离线访问与您的后端

使用离线访问与您的后端

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

• 需要以下内容才能使用离线访问:

An HTTP server

• 一个 HTTP 服务器

• In this example, I will be using the following technologies to provide the offline access in my app:

• Zod

• Hono

• Hono Hono Zod validator

The code for this example can be found Zod

客户端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/capacitor-social-login 的原生能力 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-social-login 为 @capgo/capacitor 社交登录实现细节 @capgo/capacitor-passkey 为 @capgo/capacitor-passkey 实现细节 @capgo/capacitor-native-生物识别 为 @capgo/capacitor-native-biometric 实现细节, 和 双因素认证 为双因素认证实现细节。