微信授权登录
经微信授权的网页应用可以直接使用微信登录 CloudBase,包括两种授权类型:
- 微信公众平台(公众号网页);
- 微信开放平台(普通网站应用及移动应用等)。
开通流程
1. 开通平台账号
首先需要一个微信公众平台 / 开放平台的注册账号,如果没有,请前往 微信公众平台 或 微信开放平台申请。
然后在微信公众平台/开放平台的管理后台中,查看开发者 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. 获取第三方平台授权页地址
填入微信平台 ID、重定向 URI 和自定义状态标识字段用于识别平台回调来源。系统内置有微信公众号和微信开放平台的平台 ID。
- Web
const auth = app.auth();
const { uri } = await auth.genProviderRedirectUri({
provider_id: providerId,
provider_redirect_uri: providerUri,
state: state,
other_params: otherParams
});
2. 访问 URI 并进行授权后,回调至指定地址,获取第三方平台 token
将用户重定向至 URI,例如 location.href = uri
;待用户授权完毕后,回调至指定的provider_redirect_uri
地址。
- Web
// 此时 url query 中携带授权 code,state 等参数
// 检查 state 是否符合预期(如设置的 wx_open)
const provider_code = "your provider code";
// 如符合预期,获取第三方平台 token
const { provider_token: ProviderToken } = await auth.grantProviderToken({
provider_id: "wx_open",
provider_redirect_uri: "cur page", // 指定三方平台跳回的 url 地址
provider_code: provider_code // 第三方平台跳转回页面时,url param 中携带的 code 参数
});
3. 通过第三方平台 token 登录
- Web
await auth.signInWithProvider({
provider_token: providerToken
});
关于如何给用户更好的登录体验,请参阅 最佳实践。