微信授权登录

最近更新时间:2024-06-11 15:03:31

我的收藏
经微信授权的网页应用可以直接使用微信登录 CloudBase,包括两种授权类型:
微信公众平台(公众号网页)。
微信开放平台(普通网站应用及移动应用等)。

开通流程

步骤1:开通平台账号

1. 需要一个微信公众平台或开放平台的注册账号,如果没有,请前往 微信公众平台微信开放平台 申请。
2. 在微信公众平台或开放平台的管理后台中,查看开发者 ID(AppId)开发者密码(AppSecret)。以微信公众平台为例,在开发 > 基本配置中有以下内容:

微信公众平台


说明:
开发者密码(AppSecret)是非常私密的信息,每次单击上图中的重置都会获取一个新的 AppSecret。

步骤2:开启微信登录

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



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

步骤3:添加安全域名(可选)

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

微信登录流程

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

步骤1:初始化 SDK

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

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

步骤2:使用 SDK 处理登录流程

1. 创建 Provider。
首先我们创建一个 Provider 实例,并且填入参数:
Web:
const auth = app.auth();

const provider = auth.weixinAuthProvider({
appid: "...",
scope: "xxxx"
});
参数说明如下:
参数名称
类型
必填
说明
appid
string
微信公众平台/开放平台的 AppId。
scope
string
网页授权类型,可选值包括:

snsapi_base:微信公众平台,只获取用户的微信 OpenId
snsapi_userinfo:微信公众平台,获取用户的基本信息
snsapi_login:开放平台网页授权,获取用户的基本信息

说明:
如果用户使用 snsapi_userinfosnsapi_login 登录,并且是首次登录,那么 CloudBase 将会自动拉取、同步微信的用户基本信息。
如果用户不是首次登录,将不会有此行为
2. 使用 Provider 进行登录。
Web:
2.1 调用 Provider.signInWithRedirect(),用户将会跳转到微信 OAuth 授权页面:
provider.signInWithRedirect();
在授权页面内,需要用户对登录行为进行授权,成功后,会返回至当前页面。
2.2 调用 Provider.getRedirectResult(),获取登录结果:
provider.getRedirectResult().then((loginState) => {
if (loginState) {
// 登录成功!
}
});
说明:
关于更好的登录体验,请参见 实践教程