Authing 文档
文档
概念
使用指南
开发集成
应用集成
旧版
概念
使用指南
开发集成
应用集成
旧版
开发集成
  • 登录组件
  • 单点登录(SSO)
  • JavaScript/Node.js
  • Java / Kotlin
  • Python
  • C#
  • PHP
  • Go
  • Ruby
  • Swift
  • Android
  • React Native
  • 微信小程序
  • 微信网页授权
  • 框架集成
  • 错误代码
  1. 开发集成
  2. /
  3. 微信网页授权

¶ 微信网页授权登录 SDK

Authing 微信网页授权 SDK,五分钟接入微信网页授权登录。

¶ 开发准备

  • 微信公众号:前往微信公众平台 (opens new window) 注册
  • 必须为服务号
  • 必须通过微信认证

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

在微信公众平台后台的 设置 -> 公众号设置 -> 功能设置 页面设置 网页授权域名。

域名填写:core.authing.cn。

出于安全验证考虑,微信服务器需要和 Authing 服务器做一次请求验证,开发者需要下载 txt 文件,并记录 文件名 和 文本内容。

最后在 Authing 控制台 连接身份源 -> 社会化登录 开启微信网页授权登录:

drawing

填写弹出的表单:

drawing
  • AppID:微信开发者 ID
  • AppSecret:微信开发者密码
  • Redirect:你的业务回调链接
  • Txt Filename:前面记录的 txt 文件名
  • Txt Content:前面记录的 txt 文本内容

¶ 安装

使用 CDN:

<script src="https://cdn.jsdelivr.net/npm/@authing/wxmp/dist/authing-wxmp-sdk.min.js"></script>

接着就可以在浏览器环境下引用 AuthingWxmp 了。

使用 npm / yarn:

npm install --save @authing/wxmp

或者

yarn add @authing/wxmp

然后通过以下方式引入:

import AuthingWxmp from "@authing/wxmp";

¶ 发起微信授权

先从 Authing 控制台 (opens new window) 中获取用户池 ID。

const authingWx = new AuthingWxmp({
  userPoolId: "YOUR_USERPOOLID",
});

// 跳转到微信授权页面
window.location = authingWx.getAuthorizationUrl();

¶ 获取用户信息

// 跳回业务回调链接之后获取用户信息
// 若在回调页面 authingWx 未初始化,需要先初始化,具体初始化方式参考上文

const { ok, userinfo, message } = authingWx.getUserInfo();
if (ok) {
  // do with userinfo
  console.log(userinfo);
} else if (message) {
  // message 中包含了错误提示
  alert(message);
}

¶ 完整 API 列表

  • checkWechatUA
  • getAuthorizationUrl
  • getUserInfo

¶ 构造函数

参数:

  • options
    • userPoolId: 用户池 ID,必填。
    • host: 指定 oauth 服务器地址,选填,默认为 javascript { oauth: "https://oauth.authing.cn/" } 示例:
const authingWx = new AuthingWxmp({
  userPoolId: "YOUR_USERPOOLID",
});

¶ checkWechatUA

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

示例:

if (!authingWx.checkWechatUA()) {
  alert("请在微信客户端中打开!");
}

¶ getAuthorizationUrl

获取微信授权链接

示例:

// 点击登录按钮之后跳转到微信网页授权页面
loginBtn.onclick = function() {
  window.location = authingWx.getAuthorizationUrl();
};

¶ getUserInfo

从当前页面 url 的 search 部分获取用户信息

参数:

  • search:浏览器页面链接的 search 部分,可选,默认为 window.location.search。

示例:

const { ok, userinfo, message } = authingWx.getUserInfo();
if (ok) {
  // do with userinfo
  console.log(userinfo);
} else if (message) {
  // message 中包含了错误提示
  alert(message);
}

¶ 授权流程

  1. 开发者引导用户跳转到 Authing 设置的授权链接:https://oauth.authing.cn/oauth/wechatmp/url:userPoolId,常见的方式有:
  • 当用户通过微信客户端网页打开时,让浏览器自动跳转。
  • 当用户通过微信客户端网页打开时,点击登录按钮之后跳转
  1. Authing 和微信服务器完成 OAuth 认证授权
  • Authing 为开发者省去了其中复杂的获取 authorization_code、获取 access_token、换取用户信息的流程,真正的零行代码接入。
  • 详细的过程请看微信的官方文档 (opens new window)。
  1. Authing 携带用户信息跳转回开发者在 Authing 后台 设置的业务跳转链接,携带的数据有 code、message、data:
  • code
    • 200:获取用户信息成功
    • 其他:获取用户信息失败
  • message: 错误提示信息(获取用户信息失败时候有)
  • data: 用户信息(获取用户信息成功时候有)

data 示例:

{
    "_id": "5dc10bcb6f94c178c6ffffb9",
    "email": null,
    "emailVerified": false,
    "unionid": "oiPbDuG4S7msrKHPKDc8MECSe8jM",
    "openid": "oiPbDuG4S7msrKHPKDc8MECSe8jM",
    "oauth": "{\"openid\":\"oiPbDuG4S7msrKHPKDc8MECSe8jM\",\"nickname\":\"廖长江\",\"sex\":1,\"language\":\"zh_CN\",\"city\":\"海淀\",\"province\":\"北京\",\"country\":\"中国\",\"headimgurl\":\"http://thirdwx.qlogo.cn/mmopen/vi_32/GkxYERPDdTMk7bOk3BgBmEEYul8oMcOoLgNHLoibZn5ibe4EulWBp1xo6uN4az59eoSBYBW0QmXB9TrsJEM0EoPw/132\",\"privilege\":[]}",
    "registerMethod": "oauth:wxmp",
    "username": "廖长江",
    "nickname": "廖长江",
    "company": "",
    "photo": "https://usercontents.authing.cn/avatar-5dc10bcb6f94c178c6ffffb9-1572932555337",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InVuaW9uaWQiOiJvaVBiRHVHNFM3bXNyS0hQS0RjOE1FQ1NlOGpNIiwiaWQiOiI1ZGMxMGJjYjZmOTRjMTc4YzZmZmZmYjkiLCJjbGllbnRJZCI6IjVkYTdlZGFiNTAzOTZjMWFkOTYyMzc4YSJ9LCJpYXQiOjE1NzI5NTY0MjUsImV4cCI6MTU3NDI1MjQyNX0.OTgl72WZS8So3R5DbWCJ7I_Bd0LaZa4S0TAVMg9qaYQ",
    "tokenExpiredAt": "11/20/2019, 8:20:25 PM",
    "loginsCount": 43,
    "lastLogin": "11/5/2019, 8:20:25 PM",
    "lastIP": "127.0.0.1",
    "signedUp": "11/5/2019, 1:42:35 PM",
    "blocked": false,
    "isDeleted": false
}
  1. 开发者使用 token 维持登录状态

用户信息中返回的 token 是登录凭证,开发者应当妥善保存,并且后续的请求需要携带上此 token:

设置 Authorization 请求头为 "Bearer " + token, 例如:

Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InVuaW9uaWQiOiJvaVBiRHVHNFM3bXNyS0hQS0RjOE1FQ1NlOGpNIiwiaWQiOiI1ZGMxMGJjYjZmOTRjMTc4YzZmZmZmYjkiLCJjbGllbnRJZCI6IjVkYTdlZGFiNTAzOTZjMWFkOTYyMzc4YSJ9LCJpYXQiOjE1NzI5NTY0MjUsImV4cCI6MTU3NDI1MjQyNX0.OTgl72WZS8So3R5DbWCJ7I_Bd0LaZa4S0TAVMg9qaYQ"

如果你使用的是 NodeJS 的 axios (opens new window),可以这样写:

axios.get(SOME_SERVICE_URL, {
  headers: {
    Authorization: `Bearer ${userinfo.token}`,
  },
});

当终端用户携带此 Toekn 访问开发者的接口时,开发者需要判断这个 Token 是否合法且处于登录状态,Authing 为此提供了几个方法:验证用户 Token。Authing 返回的数据中包含了用户是否登录、登录情况下的用户 ID 等信息,之后开发者可以根据具体业务的需要对请求进行处理。

  1. 总结一下以上流程
  • 开发者引导用户跳转到微信授权页面:https://oauth.authing.cn/oauth/wechatmp/url:userPoolId。
  • 终端用户同意授权。
  • Authing 和微信根据 OAuth 协议完成用户信息交互。
  • Authing 将用户信息(包含 token)发送到开发者自定义的业务回调链接
  • 终端用户后续的请求将 token 携带上。
  • 开发者在后端调用 Authing 提供的方法 检验 token 的合法性以及登录状态。
  • 根据 Authing 返回的登录状态和开发者自己的业务逻辑,对请求进行相应处理。

上一篇: 微信小程序 下一篇: 框架集成

本文是否有解决您的问题?

如果遇到其他问题,你可以在 authing-chat/community 联系我们。

  • 开发准备
  • 安装
  • 发起微信授权
  • 获取用户信息
  • 完整 API 列表
  • 授权流程

用户身份管理

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

企业内部管理

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

开发者

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

公司

服务状态
176-0250-2507
xuziqiang@authing.cn
北京市海淀区中关村东路威盛大厦 6 层

京ICP备19051205号

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