微信授权登录

最近更新时间:2020-04-27 18:10:35

经微信授权的网页应用可以直接使用微信登录 Cloudbase,包括两种授权类型:

  • 微信公众平台(公众号网页);
  • 微信开放平台(普通网站应用及移动应用等)。

开通流程

前期准备工作

首先需要一个微信公众平台/开放平台的注册账号,如果没有,请前往 微信公众平台微信开放平台 申请。
然后在微信公众平台/开放平台的管理后台中查看开发者 ID(AppId)和开发者密钥(AppSecret)。以微信公众平台为例,在【开发】- 基本配置 中有以下内容:

注意:

开发者密钥(AppSecret)是非常私密的信息,每次点击上图中的【重置】按钮都会获取一个新的 AppSecret。

控制台开通登录方式并配置域名

添加登录方式

在 Cloudbase 控制台 ,单击需配置的环境,在【环境设置】> 登录方式 下启用 微信公众号登录授权,并在弹窗的对应位置填入 AppId 和 AppSecret:
微信授权登录开启

启用 微信开放平台登录授权,并在弹窗的对应位置填入 AppId 和 AppSecret:

添加安全域名

Web应用需要将域名添加到 Cloudbase 控制台 对应环境的【环境设置】> 安全配置 下的 WEB安全域名 列表中,否则将被识别为非法来源:

客户端SDK使用微信登录

使用 Cloudbase 的客户端 Web SDK 调用 auth.weixinAuthProvider().signIn() 跳转到微信第三方登录,需要填入以下参数:

参数名称 类型 必填 说明
appid string 微信公众平台/开放平台的 AppId。
scope string 网页授权类型,可选值包括 snsapi_base(公众平台,只获取用户的 openid),snsapi_userinfo(公众平台,获取用户的基本信息)和 snsapi_login(开放平台网页授权)。

示例代码:

import tcb from "tcb-js-sdk";

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

const auth = app.auth();

async function login(){
  // 1. 建议登录前先判断当前是否已经登录
  const loginState = await auth.getLoginState();
  if(!loginState){
    // 2. 调用微信登录API
    await auth.weixinAuthProvider({
      appid: "your-appid",
      scope: "snsapi_base"
    }).signIn();
  }
}

login();
说明:

使用 Flutter SDK 开发原生应用的微信登录流程需要额外的配置操作,详情请参阅 Flutter SDK - 微信授权登录

目录