经微信授权的网页应用可以直接使用微信登录 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 处理登录流程
创建 Provider
首先我们创建一个 Provider 实例,并且填入参数:const auth = app.auth();
const provider = auth.weixinAuthProvider({
appid: "...",
scope: "xxxx"
});参数名称 类型 必填 说明 appid string 是 微信公众平台/开放平台的 AppId。 scope string 是 网页授权类型,可选值包括: - snsapi_base:微信公众平台,只获取用户的微信 OpenId
- snsapi_userinfo:微信公众平台,获取用户的基本信息
- snsapi_login:开放平台网页授权,获取用户的基本信息
说明- 如果用户使用
snsapi_userinfo
或snsapi_login
登录,并且是首次登录,那么 CloudBase 将会自动拉取、同步微信的用户基本信息。 - 如果用户不是首次登录,将不会有此行为。
使用 Provider 进行登录
调用
Provider.signInWithRedirect()
,用户将会跳转到微信 OAuth 授权页面:provider.signInWithRedirect();
调用
Provider.getRedirectResult()
,获取登录结果:provider.getRedirectResult().then((loginState) => {
if (loginState) {
// 登录成功!
}
});
说明:关于更好的登录体验,请参见 最佳实践。