跳到主要内容

微信授权登录

经微信授权的网页应用可以直接使用微信登录 CloudBase，包括两种授权类型：

  • 微信公众平台（公众号网页）；
  • 微信开放平台（普通网站应用及移动应用等）。

开通流程​

1. 开通平台账号​

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

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

以微信公众平台为例，在“开发 - 基本配置”中有以下内容：

微信公众平台

注意

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

2. 开启微信登录​

在 控制台 的 登录授权管理页 启动对应的平台登录授权：

微信授权登录开启

点击启用按钮后在弹窗的对应位置填入 AppId 和 AppSecret。

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

对于 Web 应用，需要将域名添加到 安全配置 的 Web 安全域名列表中，否则将被识别为非法来源：

微信登录流程​

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

第 1 步：初始化 SDK​

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

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

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

1. 创建 Provider​

首先我们创建一个 Provider 实例，并且填入参数：

const auth = app.auth();

const provider = auth.weixinAuthProvider({
  appid: "...",
  scope: "xxxx"
});

参数说明如下：

参数名称类型必填说明
appidstring是微信公众平台/开放平台的 AppId。
scopestring是网页授权类型，可选值包括：

snsapi_base：微信公众平台，只获取用户的微信 OpenId

snsapi_userinfo：微信公众平台，获取用户的基本信息

snsapi_login：开放平台网页授权，获取用户的基本信息

提示

如果用户使用 snsapi_userinfo 或 snsapi_login 登录，并且是首次登录，那么 CloudBase 将会自动拉取、同步微信的用户基本信息。

如果用户不是首次登录，将不会有此行为。

2. 使用 Provider 进行登录​

首先调用 Provider.signInWithRedirect()，用户将会跳转到微信 OAuth 授权页面：

provider.signInWithRedirect();

在授权页面内，需要用户对登录行为进行授权，成功后，会返回至当前页面。

然后调用 Provider.getRedirectResult()，获取登录结果：

provider.getRedirectResult().then((loginState) => {
  if (loginState) {
    // 登录成功！
  }
});

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