详解nodejs微信jssdk后端接口


Posted in NodeJs onMay 25, 2017

写过了两个微信的页面,遇到了挺多不会的问题,当时也是自己边查资料,边实践完成了简单的需求,刚好现在有空,把之前的东西整理一遍。

与普通的手机页面不同的是,微信页面提供给你了调用微信APP内置功能的接口,可以实现更复杂的功能。

jssdk的前端使用

  1. 前端页面调用jssdk首先要通绑定“公众号设置”的“功能设置”里填写“JS接口安全域名”
  2. 然后在页面中引入http://res.wx.qq.com/open/js/...
  3. 调用 wx.config({...}) 来验证权限配置
  4. 然后可根据需要 调用微信所提供的接口

后端返回接口

在前端调用时wx.config({...})中需要的参数需要我们自己进行返回

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

其中 timestamp , nonceStr, signature,是需要后端计算返回的。

签名获取方法

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

而其中的 jsapi_ticket 是通过 access_token 来获取的,且两者都有过期时间(7200秒)其中 jsapi_ticket 更是限制了获取次数。所以为了保存两者,使用redis数据库保存在内存中是个很好的选择(可快速读取,并设置过期时间)。

token获取方法:

/**
 * 获取token
 * @return {promise} res 值为token
 */
function getToken () {
 return redis.getVal('token') // 首先读取 redis 是否存在token
  .then(function (res) { 
   if (res === null) {  // 若不存在,则返回savetoken() 获取
    // console.log('不存在token 调用saveToken')
    return saveToken ()
   } else {       // 若存在 则直接返回
    // console.log('存在token 直接返回')
    return res 
   }
  })
  .catch(function (err) {  // 捕获 错误
   console.log(err)
  })
}

/**
 * 从服务端获取token 并保存在redis中
 * @return {promise} 值 为 token
 */
function saveToken () {

 return new Promise((resolve, reject) => {

  let reqUrl = config.gettoken_url // https://api.weixin.qq.com/cgi-bin/token?
  let params = {
   grant_type: 'client_credential',
   appid: config.appid,
   secret: config.appsecret
  }

  let options = {
   method: 'get',
   url: reqUrl + qs.stringify(params)
  }

  request(options, function (err, res, body) {
   if (res) {
    let bodys = JSON.parse(body)
    let expires = bodys.expires_in
    let token = bodys.access_token
    
    redis.setKey('token', token, expires) // 将token 保存到 redis
     .catch(function (err) {
      console.log(err)
     })

    resolve(token)
   } else {
    reject(err)
   }
  })
 })
}

在配置文件中配置好所需要的appid和appsecret,首先查看redis中是否存在,如果存在就直接返回,没有的话,就调用saveToken去获取并保存在redis中

jsapi_ticket 获取方法

同理,jsapi_ticket 也采用同样的方式去获取

/**
 * 获取ticket
 * @return {promise} res 值为ticket
 */

function getJsTicket() { // 获取token
 return redis.getVal('ticket') // 首先读取 redis 是否存在ticket
  .then(function (res) { 
   if (res === null) {  // 若不存在,则返回saveJsTicket() 获取
    // console.log('不存在ticket 调用saveJsTicket')
    return saveJsTicket ()
   } else {       // 若存在 则直接返回
    // console.log('存在ticket 直接返回')
    return res 
   }
  })
  .catch(function (err) {  // 捕获 错误
   console.log(err)
  })
}

/**
 * 从服务端获取ticket 并保存在redis中
 * @return {promise} 值 为 ticket
 */
function saveJsTicket () {

 return new Promise((resolve, reject) => {

  getToken().then(function (token) {

   let reqUrl = config.ticket_start + token + config.ticket_end
   let options = {
    method: 'get',
    url: reqUrl
   }

   request(options, function (err, res, body) {
    if (res) {
     let bodys = JSON.parse(body)   // 解析微信服务器返回的
     let ticket = bodys.ticket    // 获取 ticket
     let expires = bodys.expires_in  // 获取过期时间

     redis.setKey('ticket', ticket, expires) // 将ticket 保存到 redis
      .catch(function (err) {
       console.log(err)
      })
     resolve(ticket)
    } else {
     reject(err)
    }
   })
  }).catch(function (err) {
    console.log(err)
  })
 })
}

签名算法

在获取jsapi_ticket后就可以生成JS-SDK权限验证的签名了

/**
 * 1. appId 必填,公众号的唯一标识
 * 2. timestamp 必填,生成签名的时间戳
 * 3. nonceStr 必填,生成签名的随机串
 * 4. signature 必填,签名
 */

const crypto = require('crypto')
const getJsTicket = require('./getJsTicket')
const config = require('../../config') // 微信设置

// sha1加密
function sha1(str) {
 let shasum = crypto.createHash("sha1")
 shasum.update(str)
 str = shasum.digest("hex")
 return str
}

/**
 * 生成签名的时间戳
 * @return {字符串} 
 */
function createTimestamp () {
 return parseInt(new Date().getTime() / 1000) + ''
}

/**
 * 生成签名的随机串
 * @return {字符串} 
 */
function createNonceStr () {
 return Math.random().toString(36).substr(2, 15)
}

/**
 * 对参数对象进行字典排序
 * @param {对象} args 签名所需参数对象
 * @return {字符串}  排序后生成字符串
 */
function raw (args) {
 var keys = Object.keys(args)
 keys = keys.sort()
 var newArgs = {}
 keys.forEach(function (key) {
  newArgs[key.toLowerCase()] = args[key]
 })

 var string = ''
 for (var k in newArgs) {
  string += '&' + k + '=' + newArgs[k]
 }
 string = string.substr(1)
 return string
}

/**
* @synopsis 签名算法 
*
* @param jsapi_ticket 用于签名的 jsapi_ticket
* @param url 用于签名的 url ,注意必须动态获取,不能 hardcode
*
* @returns {对象} 返回微信jssdk所需参数对象
*/
function sign (jsapi_ticket, url) {
 var ret = {
  jsapi_ticket: jsapi_ticket,
  nonceStr: createNonceStr(),
  timestamp: createTimestamp(),
  url: url
 }
 var string = raw(ret)
 ret.signature = sha1(string)
 ret.appId = config.appid
 return ret
}

/**
 * 返回微信jssdk 所需参数对象
 * @param {字符串} url 当前访问URL
 * @return {promise}   返回promise类 val为对象
 */
function jsSdk (url) {
 return getJsTicket()
  .then(function (ticket) {
   return sign(ticket, url)
  })
  .catch(function (err) {
   console.log(err)
  })
}

function routerSdk (req, res, next) {
 let clientUrl = req.body.url
 if (clientUrl) {
  jsSdk(clientUrl)
   .then(function (obj) {
    res.json(obj)
   })
 } else {
  res.end('no url')
 }
}

module.exports = routerSdk

以上基本就完成了后端返回签名的过程(省略了redis部分)。具体细节可参考我当时的练手项目中的代码。

至此,前端就可以使用jssdk来完成功能的调用了。

ps:某次使用录音接口做了一个功能,但是发现,微信服务器只会保存3天数据,需要自己下载到自己的服务器才行,不知道诸位有没做过类似的需求,给我提供下指导啥的,感激不尽~

后记

后来又写过一个获取用户信息的页面,感觉也是挺常用的就写个demo出来看看吧(没有做access_token的保存,好像是没有获取次数限制)。

router.get('/', function(req, res, next){
 console.log("oauth - login")

 // 第一步:用户同意授权,获取code
 let router = 'get_wx_access_token'
 // 这是编码后的地址
 let return_uri = encodeURIComponent(base_url + router)
 console.log('回调地址:' + return_uri)
 let scope = 'snsapi_userinfo'

 res.redirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+return_uri+'&response_type=code&scope='+scope+'&state=STATE#wechat_redirect')
})

// 第二步:通过code换取网页授权access_token
router.get('/get_wx_access_token', function(req,res, next){
 console.log("get_wx_access_token")
 console.log("code_return: "+req.query.code)
 let code = req.query.code
 request.get(
  {  
   url:'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appid + '&secret=' + appsecret+'&code=' + code + '&grant_type=authorization_code',
  },
  function(error, response, body){
   if(response.statusCode === 200){

    // 第三步:拉取用户信息(需scope为 snsapi_userinfo)
    // console.log(JSON.parse(body))

    let data = JSON.parse(body)
    let access_token = data.access_token
    let openid = data.openid

    request.get(
     {
      url:'https://api.weixin.qq.com/sns/userinfo?access_token='+access_token+'&openid='+openid+'&lang=zh_CN',
     },
     function(error, response, body){
      if(response.statusCode == 200){

       // 第四步:根据获取的用户信息进行对应操作
       let userinfo = JSON.parse(body)
       console.log(JSON.parse(body))
       console.log('获取微信信息成功!')

       小测试,实际应用中,可以由此创建一个帐户
       res.send("\
         <h1>"+userinfo.nickname+" 的个人信息</h1>\
         <p><img src='"+userinfo.headimgurl+"' /></p>\
         <p>"+userinfo.city+","+userinfo.province+","+userinfo.country+"</p>\
       ")

      }else{
       console.log(response.statusCode)
      }
     }
    )
   }else{
    console.log(response.statusCode)
   }
  }
 )
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs 后缀名判断限制代码
Mar 31 NodeJs
PHP和NodeJs开发的应用如何共用Session
Apr 16 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
Nodejs如何搭建Web服务器
Mar 28 NodeJs
nodeJs爬虫获取数据简单实现代码
Mar 29 NodeJs
Nodejs 获取时间加手机标识的32位标识实现代码
Mar 07 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
nodejs 子进程正确的打开方式
Jul 03 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
Jan 12 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
使用nodejs实现JSON文件自动转Excel的工具(推荐)
Jun 24 NodeJs
mac下的nodejs环境安装的步骤
May 24 #NodeJs
Nodejs搭建wss服务器教程
May 24 #NodeJs
Nodejs中Express 常用中间件 body-parser 实现解析
May 22 #NodeJs
深入理解nodejs中Express的中间件
May 19 #NodeJs
nodejs批量下载图片的实现方法
May 19 #NodeJs
nodejs制作爬虫实现批量下载图片
May 19 #NodeJs
详解Windows下安装Nodejs步骤
May 18 #NodeJs
You might like
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
详解VUE 数组更新
2017/12/16 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
python中的随机函数小结
2018/01/27 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
PyQt5实现简易计算器
2020/05/30 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python 如何查找特定类型文件
2020/08/17 Python
感恩老师的演讲稿
2014/05/06 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
超市食品安全承诺书
2015/04/29 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏