云开发 CloudBase
文档捉虫大赛：人工智能与机器学习专题> HOT
文档中心 > 云开发 CloudBase > 开发指南 > 登录授权 > 微信授权登录

微信授权登录

最近更新时间：2023-09-13 16:55:03

我的收藏

本页目录：

经微信授权的网页应用可以直接使用微信登录 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_userinfo 或 snsapi_login 登录，并且是首次登录，那么 CloudBase 将会自动拉取、同步微信的用户基本信息。
如果用户不是首次登录，将不会有此行为。
2. 使用 Provider 进行登录 Web：
2.1 调用 Provider.signInWithRedirect()，用户将会跳转到微信 OAuth 授权页面：
provider.signInWithRedirect();
在授权页面内，需要用户对登录行为进行授权，成功后，会返回至当前页面。
2.2 调用 Provider.getRedirectResult()，获取登录结果：
provider.getRedirectResult().then((loginState) => {
if (loginState) {
// 登录成功！
}
});
说明
关于更好的登录体验，请参见 最佳实践。

中国站