NodeJS微信网页授权JSSDK接口配置

帅华君将在本文介绍基于Nodejs实现微信网页授权以及如何正确在前后端配置JS-SDK接口。

微信网页授权

准备工作

根据微信公众号接口权限说明,只有认证服务号才有获取用户openid及用户基本信息的权限,因此,开发者需要在微信公众号后台开发者工具找到公众平台测试账号:

公众平台测试账号

拿到微信公众平台的测试账号后,进一步设置与网页授权相关的选项,在测试账号页面下方的体验接口权限列表中,找到网页服务-网页账号-网页授权获取用户基本信息,并点击右侧修改按钮,添加外网能够访问到的远程服务器的域名(下方是帅华君在natapp申请的域名,利用内网穿透技术,无需反复将Nodejs脚本传输到远程服务器,即可让微信服务器通过外网访问到Nodejs搭建的监听任意端口号的本地服务器,当然如果你不怕调试的麻烦,可以填写您购买的远程服务器域名),如此即完成了微信网页授权的准备工作:

修改OAuth2.0网页授权回调页面域名

HTTPs请求

使用必填的 appid redirect_uri response_type scope 查询参数与锚点 #wechat_redirect 获取CODE值

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

如果用户同意授权,页面将会跳转至 redirect_uri/?code=CODE&state=STATE,其中CODE值只能使用一次,5分钟未被使用自动过期。

使用 appid secret CODE 获取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

微信服务器返回如下内容表示正确获取到access_token:

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE"
}

将access_token存储到数据库中,用户的openid作为表中的一个字段保证了每条记录的唯一性,并且在新增一个openid时记录当前时间为最近一次更新access_token的时间戳,当监测到最近一更新时间加上7200秒(即微信定义的过期时间)则更新获取access_toen,并更新最近一次更新时间戳。

使用 access_token openid 获取用户基本信息

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

成功获取微信用户基本信息

要提醒各位开发者的是,正如微信官方所说:

尤其注意:由于公众号的secret和获取到的access_token安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤,也必须从服务器发起。

因此,以上三个步骤中的后两个必须在服务器端完成,对于帅华君来说是通过Nodejs服务器完成的,由于微信规定请求URI的协议是 https,因此,在Nodejs服务端发起的是HTTPS请求,使用的是Nodejs的HTTPs内建模块。

微信JS-SDK

准备工作

与微信网页授权类似,调用JS-SDK接口也许配置安全域名,这里帅华君使用相同的域名

配置JS接口安全域名

下载微信提供的用于调用JS-SDK各种接口的js文件,这里帅华君采用前后端分环境的开发模式,我会在 wx.config() 函数调用之前向服务端发送Ajax请求获取配置js-sdk必须的参数,需要填写的参数如下:

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
})

既然前端需要获取 appid timestamp nonceStr signature 参数值,那么接下来主要任务是后端写一个接口用以让前端通过Ajax请求获取到这些值。

API

接下来就是后端的事情了,后端同样采用Nodejs开发。

想要拿到参数传给前端,倒推到上一步骤就是获取jsapi_ticket,下面是微信官方对jsapi_ticket的解释。

生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。

jsapi_ticket 和 access_token 类似,都有刷新次数的限制,因此jsapi_ticket和access_token一样需要缓存起来,帅华君的做法是,和access_token的缓存方法一样——存储到数据库中,定时的触发刷新机制。

由于获取jsapi_ticket的前提是需要提供access_token,关于如何获取微信公众平台access_token,帅华君在很早以前的文章中介绍过——《微信公众平台开发动态获取与更新access_token》

使用HTTPs模块向下方URI发起请求,请求参数只需携带ACCESS_TOKEN即可:

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。

签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

成功验证并授权微信网页JSSDK功能接口

如此便可成功获取JS-SDK配置参数。

本文完

请使用Github账号登录留言
发布日期 » 2018年12月22日 周六
原创声明 » 请勿复制转载,谢谢配合。
🌈找工作【HTML5/数据可视化创新界面设计与开发/Web3D/新媒体艺术】兼具技术探索与艺术创意的职位。希望职位具备与员工能力相匹配的薪酬待遇、晋升空间与成长机会。已离职,目前在石家庄居住,工作城市不限。合适细聊。
陈帅华的微信二维码