跳到主要内容

Google 登录

平台支持

Google 社交登录目前仅支持 Web 端（PC/H5），暂不支持小程序端。

使用 Google 账号快速登录您的应用或网站，无需单独注册账号

效果预览​

登录页展示 Google 登录页效果

登录授权页 用户点击 Google 登录后，将跳转至 Google 授权页面： Google 授权页效果

配置指南​

Google 登录配置需要在「云开发控制台」和「Google 开发者控制台」之间来回操作，建议按照以下步骤完成配置：

配置流程概览​

云开发控制台（获取回调地址）→ Google 控制台（创建应用并配置回调地址）→ 云开发控制台（完成配置）

步骤 1：在云开发控制台获取回调地址​

1.1 进入身份认证配置页面​

  1. 登录 云开发控制台/身份认证/登录方式
  2. 找到「Google Web 端」卡片，点击「配置」按钮

云开发平台-身份认证-google登录

1.2 自定义登录页展示​

配置身份源的显示信息，这将影响用户在登录页看到的内容：

  • 身份源名称：建议填写「Google 登录」或「使用 Google 账号登录」
  • Logo 图标：可以上传自定义图标或使用默认 Google 图标
云开发平台-身份认证-google登录-身份源名称logo配置

1.3 复制回调地址​

进入配置页面后，在「身份源基础配置」区域可以看到回调地址（格式为：https://xxx.tcloudbaseauth.com/xxx）：

云开发平台-身份认证-google登录-身份源信息配置

复制这个回调地址，稍后需要在 Google 控制台中使用。

⚠️ 注意：暂时不要关闭云开发控制台页面，稍后还需要回到这里完成配置。

步骤 2：在 Google 开发者控制台创建 OAuth 应用​

2.1 进入 Google API Console​

前往 Google API Console Credentials 控制台。

💡 提示：如果您还没有 Google Cloud 项目，需要先创建一个项目。

2.2 创建 OAuth 客户端 ID​

点击「创建凭据」按钮，选择「OAuth 客户端 ID」：

创建 OAuth 客户端 ID

2.3 配置 OAuth 客户端​

填写以下配置信息：

  1. 应用类型：选择「Web 应用」（Web Application）
  2. 名称：为您的应用命名（如：我的云开发应用）
  3. 已获授权的重定向 URI：粘贴在步骤 1.2 中复制的回调地址

⚠️ 重要：重定向 URI 必须与云开发控制台提供的回调地址完全一致，否则会导致登录失败。

2.4 获取凭据信息​

点击「创建」按钮后，Google 会生成 OAuth 客户端的凭据信息：

  • Client ID（客户端 ID）
  • Client Secret（客户端密钥）

复制并保存这两个值，稍后需要填入云开发控制台。

步骤 3：回到云开发控制台完成配置​

3.1 填写身份源基础配置​

回到步骤 1 中打开的云开发控制台配置页面，在「身份源基础配置」中填入以下信息：

  • Client ID：填入步骤 2.4 中保存的客户端 ID
  • Client Secret：填入步骤 2.4 中保存的客户端密钥
  • 授权 URL：使用默认值 https://accounts.google.com/o/oauth2/v2/auth
  • Scope 授权范围：使用默认值或根据需求调整（如 openid profile email）
云开发平台-身份认证-google登录-身份源信息配置

💡 提示：关于 Scope 授权范围的详细说明，请参考 Google OAuth 2.0 文档。

3.2 保存配置​

填写完成后，点击「保存」按钮完成配置。

接入指南​

方式一：使用托管登录页（推荐）​

「云开发 CloudBase」提供了开箱即用的托管登录页，无需编写登录界面代码，即可快速集成 Google 登录。

  1. 进入 云开发控制台/身份认证/登录页
  2. 在「登录方式配置」中勾选「Google 登录」
  3. 点击「保存」

登录页配置

方式二：使用 SDK 自定义登录​

如果您需要自定义开发登录界面和流程，可以使用「云开发 Web SDK」提供的 API 进行登录

获取第三方平台授权页地址​

Auth.genProviderRedirectUri 用于生成第三方平台授权页 URL

import cloudbase from "@cloudbase/cloudbase";

const app = cloudbase.init({
  env: "your-env-id",
  region: "ap-shanghai", // 不传默认为上海地域
});

const auth = app.auth();

const { uri } = await auth.genProviderRedirectUri({
  provider_id: "google", // google平台
  provider_redirect_uri: providerUri, // 重定向 URI
  state: state, // 自定义状态标识
  other_params: otherParams, // 其他参数
});

访问 URI 并进行授权后，回调至指定地址，获取第三方平台 Token​

将用户重定向至 URI，例如 location.href = uri；待用户授权完毕后，回调至指定的 provider_redirect_uri 地址。

// 此时 URL query 中携带授权 code，state 等参数
// 1. 检查 state 是否符合预期（如设置的参数)

// 2. 获取第三方平台跳转回页面时，URL param 中携带的 code 参数
const provider_code = "your_provider_code";

// 3. 如符合预期，获取第三方平台 Token
const { provider_token } = await auth.grantProviderToken({
  provider_id: "google",
  provider_redirect_uri: "curpage", // 指定三方平台跳回的 URL 地址
  provider_code: provider_code, // 第三方平台跳转回页面时，URL param 中携带的 code 参数
});

通过第三方平台 Token 登录​

Auth.signInWithProvider 方法用于 第三方平台登录

await auth.signInWithProvider({
  provider_token: provider_token,
});