Skip to content
使用 Authing 在微信手机网页内快速登录
JavaScript
Branch: master
Clone or download

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples/html demo add github and doc link Nov 27, 2019
images change readme Nov 6, 2019
src change readme Nov 6, 2019
.eslintignore v1.0.0 Nov 6, 2019
.eslintrc.js v1.0.0 Nov 6, 2019
.gitignore change readme Nov 6, 2019
LICENSE Initial commit Nov 5, 2019
README.md 跳转文档结构 Nov 6, 2019
package.json upgrade version to 1.0.1 Nov 6, 2019
webpack.config.js change readme Nov 6, 2019
yarn.lock v1.0.0 Nov 6, 2019

README.md

authing-wxmp

Documentation License: WTFPL Twitter: liaochangjiang

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

🏠 Authing 官方网站

在线 Demo 点击体验(请在微信客户端中打开哦)

开发准备

你需要准备两样东西:

  • Authing 账号:前往Authing 官方网站注册
    • 创建一个用户池
    • 用户池 -> 基础配置 -> 基础设置 页面获取用户池 ID。

drawing

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

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

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

域名填写:oauth.authing.cn

drawing

出于安全验证考虑,微信服务器需要和 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 控制台获取用户池 ID(userPoolId)

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)
}

完整的 DEMO 可从 examples 目录下获取。

完整 API 列表

  • checkWechatUA
  • getAuthorizationUrl
  • getUserInfo

构造函数

参数:

  • options
    • userPoolId: 用户池 ID,必填。
    • host: 指定 oauth 服务器地址,选填,默认为
      {
        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、换取用户信息的流程,真正的零行代码接入。
  • 详细的过程请看微信的官方文档
  1. Authing 携带用户信息跳转回开发者在 Authing 后台 设置的业务跳转链接,携带的数据有 codemessagedata
  • 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,可以这样写:

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

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

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

作者

👤 liaochangjiang


This README was generated with ❤️ by readme-md-generator

You can’t perform that action at this time.