跳到主要内容

微信授权登录

经微信授权的网页应用可以直接使用微信登录 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_userinfosnsapi_login 登录,并且是首次登录,那么 CloudBase 将会自动拉取、同步微信的用户基本信息。

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

2. 使用 Provider 进行登录#

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

provider.signInWithRedirect();

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

然后调用 Provider.getRedirectResult(),获取登录结果:

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

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