开发指南

API 文档

微信授权登录

最近更新时间:2021-04-15 17:29:07

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

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

开通流程

步骤1:开通平台账号

  1. 需要一个微信公众平台 / 开放平台的注册账号,如果没有,请前往 微信公众平台微信开放平台 申请。
  2. 在微信公众平台/开放平台的管理后台中,查看开发者 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"
    });

    参数说明如下:
    参数名称 类型 必填 说明
    appid string 微信公众平台/开放平台的 AppId。
    scope string 网页授权类型,可选值包括:
    • snsapi_base:微信公众平台,只获取用户的微信 OpenId
    • snsapi_userinfo:微信公众平台,获取用户的基本信息
    • snsapi_login:开放平台网页授权,获取用户的基本信息
    说明
    • 如果用户使用 snsapi_userinfosnsapi_login 登录,并且是首次登录,那么 CloudBase 将会自动拉取、同步微信的用户基本信息。
    • 如果用户不是首次登录,将不会有此行为
  2. 使用 Provider 进行登录

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

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

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

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

说明:

关于更好的登录体验,请参见 最佳实践

目录