跳到主要内容

微信授权登录

经微信开放平台（普通网站应用及移动应用等）授权的应用可以直接使用微信登录 CloudBase。

适用范围

v2 版本暂不支持公众号登录方式，如需使用该方式，请用 v1 版本

开通流程​

1. 开通平台账号​

首先需要一个开放平台的注册账号，如果没有，请前往微信开放平台申请。

然后在开放平台的管理后台中，查看开发者 ID（AppId）和开发者密码（AppSecret）。

注意

开发者密码（AppSecret）是非常私密的信息，每次点击上图中的「重置」按钮都会获取一个新的 AppSecret。

2. 开启微信登录​

进入 云开发平台，在 "身份认证" > "登录方式" 页面中，选择“微信开放平台登录”。

点击“去设置”在弹窗的对应位置填入 AppId 和 AppSecret。

3. 添加安全域名（可选）​

对于 Web 应用，登录 云开发平台 ，在 安全来源 页面的 安全域名 将域名添加到列表中，否则将被识别为非法来源。

微信登录流程​

在使用微信登录 CloudBase 前，请先在控制台中 启用微信登录。

第 1 步：初始化 SDK​

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id",
});

第 2 步：使用 SDK 处理登录流程​

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

填入微信平台 ID、重定向 URI 和自定义状态标识字段用于识别平台回调来源。系统内置有微信开放平台的平台 ID。

const auth = app.auth();

const { uri } = await auth.genProviderRedirectUri({
  provider_id: "wx_open", // 微信开放平台
  provider_redirect_uri: providerUri,
  state: state,
  other_params: otherParams,
});

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

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

// 此时 url query 中携带授权 code，state 等参数
// 检查 state 是否符合预期（如设置的 wx_open)
const provider_code = "your provider code";

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

3. 通过第三方平台 token 登录​

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

关于如何给用户更好的登录体验，请参阅 最佳实践。