Authing 文档文档
快速开始
概念
使用指南
开发集成 V2 arrow
  • V2 文档
  • V3 文档
元数据
应用集成
身份自动化
加入 APN
开发集成
多租户(内测版)
控制台文档
多租户控制台
租户控制台
Saas 应用 Demo
快速开始
概念
使用指南
开发集成 V2 arrow
  • V2 文档
  • V3 文档
元数据
应用集成
身份自动化
加入 APN
开发集成
多租户(内测版)
控制台文档
多租户控制台
租户控制台
Saas 应用 Demo
旧版
开发集成
  • JavaScript SDK 索引
  • 单点登录(SSO)
  • 登录组件 (Guard)

  • 多因素认证组件(MFA)

  • JavaScript / Node.js

  • Java / Kotlin

  • Python

  • C#

  • PHP

  • Go

  • Ruby
  • Delphi
  • Android

  • iOS

  • Flutter

  • 微信小程序
  • 微信网页授权
  • React Native
  • 框架集成

  • Radius
  • 错误代码
  1. 开发集成
  2. /
  3. 微信网页授权

¶ 微信网页授权登录 SDK

Authing 微信网页授权 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,能正确判断是否处于微信网页浏览器环境。
条目说明
最新版本5.1.6
仓库地址https://github.com/authing/authing-js-sdk

¶ 第一步:创建应用

  1. 使用 Authing 创建一个应用:
  • 进入控制台;
  • 展开左侧 应用 菜单,点击 自建应用 菜单;
  • 点击右上角 创建自建应用 按钮;
  • 填写 应用名称、认证地址、选择 标准 Web 应用;
  • 点击 创建。

sdk-for-app-1

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

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

前端应用不适合存储密钥,这会造成密钥泄漏。

sdk-for-app-2


  1. 保存当前配置

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

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

    • 选择服务号(订阅号也可用于测试,生产环境建议使用服务号)
    • 必须通过微信认证
  2. 在微信公众平台后台的 设置与开发 -> 基本配置 页面获取 开发者 ID(AppID) 和 开发者密码(AppSecret)。

weichat-official-account-dev-info

  1. 在微信公众平台后台的 设置与开发 -> 公众号设置 -> 功能设置 页面添加 网页授权域名。
  • 域名填写 Authing 的统一回调域名:core.authing.cn。
  • 出于安全验证考虑,微信服务器需要和 Authing 服务器做一次请求验证,开发者需要下载 txt 文件,并记录 文件名 和 文本内容。

sdk-for-weixin-official-account-1

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

sdk-for-weixin-official-account-2

字段说明
唯一标识因为这是此连接的唯一标识,所以设置之后不能修改
显示名称Authing 登录表单将会显示一个“{Display Name} 登录”的按钮
开发者ID微信公众号后台 -> 设置与开发 -> 基本配置 -> 公众号开发信息 -> 开发者ID(AppID)
开发者密码微信公众号后台 -> 设置与开发 -> 基本配置 -> 公众号开发信息 -> 开发者密码(AppSecret)
域名校验文件名前面记录的 txt 文件名
域名校验文件内容前面记录的 txt 文本内容
Callback URL你的业务回调链接,必填。配置的回调地址支持使用通配符,例如你配置的回调地址为https://*.example.com/*,下面的回调地址也是允许的:https://forum.example.com/t/topic/1234

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

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

sdk-for-weixin-official-account-3

¶ 第三步:安装 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)。

上一篇: 微信小程序 下一篇: React Native
  • 说明
  • 第一步:创建应用
  • 第二步:创建社会化身份源
  • 第三步:安装 SDK
  • 第四步:初始化 SDK
  • 第五步:使用 SDK
  • 示例代码

用户身份管理

集成第三方登录
手机号闪验 (opens new window)
通用登录表单组件
自定义认证流程

企业内部管理

单点登录
多因素认证
权限管理

开发者

开发文档
框架集成
博客 (opens new window)
GitHub (opens new window)
社区用户中心 (opens new window)

公司

400 888 2106
sales@authing.cn
北京市朝阳区北辰世纪中心 B 座 16 层(总)
成都市高新区天府五街 200 号 1 号楼 B 区 4 楼 406 室(分)

京ICP备19051205号

beian京公网安备 11010802035968号

© 北京蒸汽记忆科技有限公司