¶ 微信网页授权登录 SDK

¶ 说明

Authing 微信网页授权 SDK 5.0 (opens new window) 于 2022 年 9 月 7 日发布，推荐使用 5.0 及以上版本，低于 5.0 的版本将不再维护！

如果你正在使用之前的版本，仍然可以参考：微信网页授权登录 SDK (opens new window)。

Authing 微信网页授权登录 SDK 5.0 主要有以下几个优势：

• 包名变更为@authing/weixin-official-account，让开发者更直观的知道该 SDK 的使用场景和范围。
• 增加了全面的 TS 类型支持，让开发者在集成开发过程中更得心应手。
• 修复了 checkWechatUA 函数的 Bug，能正确判断是否处于微信网页浏览器环境。

¶ 第一步：创建应用

1. 使用 Authing 创建一个应用：

• 进入控制台；
• 展开左侧 应用 菜单，点击 自建应用 菜单；
• 点击右上角 创建自建应用 按钮；
• 填写 应用名称、认证地址、选择 标准 Web 应用；
• 点击 创建。

2. 以下身份验证方式选择 none

应用创建成功之后，在 自建应用 列表，点击该应用，点击 应用配置 标签，找到 其他配置，点击展开，找到以下三种身份认证方式并全部设置为 none。

3. 保存当前配置

¶ 第二步：创建社会化身份源

1. 前往微信公众平台 (opens new window) 注册

   • 选择服务号（订阅号也可用于测试，生产环境建议使用服务号）
   • 必须通过微信认证

2. 在微信公众平台后台的 设置与开发 -> 基本配置 页面获取 开发者 ID(AppID) 和 开发者密码(AppSecret)。

3. 在微信公众平台后台的 设置与开发 -> 公众号设置 -> 功能设置 页面添加 网页授权域名。

• 域名填写 Authing 的统一回调域名：core.authing.cn。
• 出于安全验证考虑，微信服务器需要和 Authing 服务器做一次请求验证，开发者需要下载 txt 文件，并记录 文件名 和 文本内容。

4. 在 Authing 控制台 身份源管理 -> 社会化身份源 -> 创建社会化身份源 -> 微信 -> 微信网页授权 创建一个微信社会化身份源。

以上内容填写完成后，点击 创建 按钮进行保存

5. 在当前页面选择 使用此身份源的应用 并点击 保存 按钮再次保存。

¶ 第三步：安装 SDK

npm install --save @authing/weixin-official-account

yarn add @authing/weixin-official-account

<script src="https://cdn.authing.co/packages/weixin-official-account/5.1.0/weixin-official-account.min.js"></script>

¶ 第四步：初始化 SDK

import { AuthingWxmp } from '@authing/weixin-official-account'

const authingWx = new AuthingWxmp({
  // 此社会化身份源的唯一标志，你在 Authing 控制台创建微信身份源的时候填写的
  identifier: "AUTHING_IDENTIFIER",

  appId: "AUTHING_APP_ID",

  // Authing 控制台 -> 选择已创建的小程序应用 -> 应用配置 -> -> 认证配置 -> 认证地址
  host: "https://my-awesome-app.authing.cn",

  // Authing 控制台 -> 选择已创建的小程序应用 -> 应用配置 -> -> 认证配置 -> 登录回调 URL
  redirectUrl: 'https://my-awesome-app.authing.cn/callback'
})

const authingWx = new AuthingFactory.AuthingWxmp({
  // 此社会化身份源的唯一标志，你在 Authing 控制台创建微信身份源的时候填写的
  identifier: "AUTHING_IDENTIFIER",

  appId: "AUTHING_APP_ID",

  // Authing 控制台 -> 选择已创建的小程序应用 -> 应用配置 -> -> 认证配置 -> 认证地址
  host: "https://my-awesome-app.authing.cn",

  // Authing 控制台 -> 选择已创建的小程序应用 -> 应用配置 -> -> 认证配置 -> 登录回调 URL
  redirectUrl: 'https://my-awesome-app.authing.cn/callback'
})

¶ 第五步：使用 SDK

¶ 判断当前环境是否为微信客户端

const isWeixin = authingWx.checkWechatUA()

¶ 发起微信授权

// login.js
window.location = authingWx.getAuthorizationUrl()

¶ 获取用户信息

// callback.js
const { ok, userInfo, message } = authingWx.getUserInfo()

if (ok) {
  console.log('userInfo: ', userInfo)
} else if (message) {
  console.log(message)
}

¶ 示例代码

当前文档对应的完整示例代码请参考：examples (opens new window)。