详解基于Node.js的微信JS-SDK后端接口实现代码


Posted in Javascript onJuly 15, 2017

做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下:

详解基于Node.js的微信JS-SDK后端接口实现代码

 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分享可以自定义内容,如下:

详解基于Node.js的微信JS-SDK后端接口实现代码

 我承认,虽然这分享的标题和内容也并不正经,但这不妨碍我表达我们可以通过微信JSSDK定义分享内容,接下来我们将一步一步从零实现JSSDK从后端Node.js的接入。

成为测试公众号开发者

登录测试公众号后台

首先我们需要在微信公众平台申请测试接口,地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
使用微信扫描登录后,即可来微信公众平台测试账号系统。

成为测试公众号开发者

其次在微信公众平台测试账号中,扫描测试号二维码,成为测试公众号的开发者

接口配置信息

修改接口配置信息

1.URL地址必须是你服务器上的地址,此地址要能通过浏览器的地址栏访问到(没有服务器?没关系,一会儿我们搭建一个)
 假设我这里填写的服务器地址是"http://www.your_server_name.com/wxJssdk"

2.Token你可以随意填写,用作生成签名,(不知道签名?没关系,一会儿会用到这东西的)
 假设我这里填写的Token是"jegfjaeghfuccawegfgjdbh"

此时点击提交是会提示配置失败的,因为在提交的时候,微信是会请求你的服务器地址,而你的当前配置的地址并不能访问,所以会提示配置失败。不过别急,我们先来搭建一个简单的Node服务器,让微信能够访问该服务器。

搭建简单的Node服务器

我们需要在http://www.your_server_name.com 这个域名上搭建一个服务器,并且曝出一个接口为/wxJssdk

const express = require('express')
const app = express()

app.get('/wxJssdk', (req, res) => {
 res.send('请求成功了了了了')
})

app.listen(80, err => {
 if(!err) console.log('connect succeed')
})

现在我们在地址栏中访问http://www.your_server_name.com/wxJssdk ,如果页面显示“请求成功了了了了”,则进入到下一步,如果没有成功的话,检查一下你的服务器是否开启Node服务器,如:node index.js

此时保存微信测试公众号后台的接口配置信息,仍然会提示配置失败,这是因为我们没有按照它的要求返回。

根据微信测试公众号请求信息返回对应内容

根据微信公众号开发文档接入指南,微信在请求我们配置的接口时,会带上如下信息

参数 描述
signature 微信加密签名,signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
timestamp 时间戳
nonce 随机数
echostr 随机字符串

微信服务器会通过GET请求,来请求我们所配置的接口,并带上以上表格的信息,而我们必须按照以下要求,将微信发送的信息进行要求校验,以确保是微信发送的信息,其中校验流程如下:

1)将token、timestamp、nonce三个参数进行字典序排序
2)将三个参数字符串拼接成一个字符串进行sha1加密
3)开发者获得加密后的字符串可与signature对比,标识该请求来源于微信

const express = require('express')
const app = express()
const sha1 = require('sha1')

app.get('/wxJssdk', (req, res) => {
 let wx = req.query

 let token = 'jegfjaeghfuccawegfgjdbh'
 let timestamp = wx.timestamp
 let nonce = wx.nonce

 // 1)将token、timestamp、nonce三个参数进行字典序排序
 let list = [token, timestamp, nonce].sort()

 // 2)将三个参数字符串拼接成一个字符串进行sha1加密
 let str = list.join('')
 let result = sha1(str)

 // 3)开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
 if (result === wx.signature) {
  res.send(wx.echostr) // 返回微信传来的echostr,表示校验成功,此处不能返回其它
 } else {
  res.send(false)
 }
})

此时我们重启Node服务器,再次保存接口配置信息即可配置成功。

微信JSSDK使用步骤

根据微信JSSDK说明文档,我们需要完成如下:

填写安全域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,即要调用接口的域名,不包含协议

前端引入JS

在需要调用JS接口的页面引入此JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

填写接口的配置信息

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

调用接口

做你前端该做的,调用微信分享接口,或微信提供的其它接口,whatever you need,当然,这并不是我们所要讲的重点,我们接下来要看一下微信的配置信息从哪获取

在Node服务器中生成jssdk所需要的配置信息

从上一节可以看到,调用微信JSSDK需要以下信息

1.appId
2.timestamp
3.nonceStr
4.signature
5.jsApiList

其中:

1.第1项appId是测试公众号后台的appId,我们已知
2.第2项时间戳我们也可以自己生成
3.第3项nonceStr可以随意填写,你可以理解为密钥
4.第4项signature则需要我们按要求生成
5.第5项是所需要接口的接口名

生成signature

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

为了保证我们appid,appsecret,nonceStr等信息不在前端曝露,我们以下步骤将在服务器上进行操作,以免他人盗用信息获取(注:微信请求有每日次数限制,一旦超出,则无法使用,具体请求次数限制在微信公众号后台中可查看)

生成access_token

根据微信开发文档[获取access_token文档说明],我们需要将微信测试公众号后台的appid和和appsecret以GET的请求方式向https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 发起请求获取token,请求成功后我们会获得下返回JSON转化的字符串

{"access_token":"ACCESS_TOKEN","expires_in":7200}

具体请求代码如下:

const request = require('request')

const grant_type = 'client_credential'
const appid = 'your app id'
const secret = 'your app secret'

request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
 let access_toekn = JSON.parse(body).access_token
})

获取jsapi_ticket

const request = require('request')

const grant_type = 'client_credential'
const appid = 'your app id'
const secret = 'your app secret'

request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
 let access_toekn = JSON.parse(body).access_token

 request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
   let jsapi_ticket = JSON.parse(body).ticket
 })
})

生成签名

生成签名的步骤和最开始的/wxJssdk的算法是一致的,具体如下:

let jsapi_ticket = jsapi_ticket // 上一步从获取的jsapi_ticket
let nonce_str = '123456'  // 密钥,字符串任意,可以随机生成
let timestamp = new Date().getTime() // 时间戳
let url = req.query.url  // 使用接口的url链接,不包含#后的内容

// 将请求以上字符串,先按字典排序,再以'&'拼接,如下:其中j > n > t > u,此处直接手动排序
let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '×tamp=' + timestamp + '&url=' + url

// 用sha1加密
let signature = sha1(str)

连接后的代码为:

const request = require('request')

const grant_type = 'client_credential'
const appid = 'your app id'
const secret = 'your app secret'

request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
 let access_toekn = JSON.parse(body).access_token

 request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
   let jsapi_ticket = JSON.parse(body).ticket
   let nonce_str = '123456'  // 密钥,字符串任意,可以随机生成
   let timestamp = new Date().getTime() // 时间戳
   let url = req.query.url  // 使用接口的url链接,不包含#后的内容

   // 将请求以上字符串,先按字典排序,再以'&'拼接,如下:其中j > n > t > u,此处直接手动排序
   let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '×tamp=' + timestamp + '&url=' + url

   // 用sha1加密
   let signature = sha1(str)
 })
})

曝露接口,返回给前端

app.post('/wxJssdk/getJssdk', (req, res) => {
 const request = require('request')

 const grant_type = 'client_credential'
 const appid = 'your app id'
 const secret = 'your app secret'

 request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
  let access_toekn = JSON.parse(body).access_token

  request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
    let jsapi_ticket = JSON.parse(body).ticket
    let nonce_str = '123456'  // 密钥,字符串任意,可以随机生成
    let timestamp = new Date().getTime() // 时间戳
    let url = req.query.url  // 使用接口的url链接,不包含#后的内容

    // 将请求以上字符串,先按字典排序,再以'&'拼接,如下:其中j > n > t > u,此处直接手动排序
    let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '×tamp=' + timestamp + '&url=' + url

    // 用sha1加密
    let signature = sha1(str)

    res.send({
     appId: appid,
     timestamp: timpstamp,
     nonceStr: nonce_str,
     signature: signature,
    })
  })
 })
})

前端请求后端接口,获取配置信息

获取配置

axios.post('/wxJssdk/getJssdk', {url: location.href}).then((response) => {
 var data = response.data

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

})

做你想做的,比如,自定义分享

if (wx) {
 axios.post('/wxJssdk/getJssdk', {url: location.href}).then((response) => {
  var data = response.data

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

  wx.ready(function () {
   wx.onMenuShareTimeline({
   title: wxShare.title,
   desc: wxShare.desc,
   link: wxShare.link,
   imgUrl: wxShare.imgUrl
   });

   wx.onMenuShareAppMessage({
   title: wxShare.title,
   desc: wxShare.desc,
   link: wxShare.link,
   imgUrl: wxShare.imgUrl
  });
 })

  wx.error(function (res) {
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
  })
 })

}

至此,后端配置好了,我们已经能够正常使用微信的接口了,但是微信每日接口请求是有上限的,通过2000次/天,因此如果网站上线后,一量当天访问量超过2000次你的接口将失效,而且每次都请求微信接口两次,造成请求时间浪费,所以我们需要将以上获取信息缓存在后端,避免造成接口失效以及多次请求微信后台。

缓存access_token及jsapi_ticket

此处直接上代码,利用node_cache包进行缓存

const request = require('request')
const express = require('express')
const app = express()
const sha1 = require('sha1')
const waterfall = require('async/waterfall')
const NodeCache = require('node-cache')
const cache = new NodeCache({stdTTL: 3600, checkperiod: 3600}) //3600秒后过过期

app.get('/wxJssdk', (req, res) => {
 let wx = req.query

 // 1)将token、timestamp、nonce三个参数进行字典序排序
 let token = 'jegfjaeghfuyawegfgjdbh'
 let timestamp = wx.timestamp
 let nonce = wx.nonce

 // 2)将三个参数字符串拼接成一个字符串进行sha1加密
 let list = [token, timestamp, nonce]
 let result = sha1(list.sort().join(''))

 // 3)开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
 if (result === wx.signature) {
  res.send(wx.echostr)
 } else {
  res.send(false)
 }
})

app.get('/wxJssdk/getJssdk', (req, res) => {
 let grant_type = 'client_credential'
 let appid = 'your app id'
 let secret = 'your app secret' // appscret

 let steps = []

 // 第一步,获取access_token
 steps.push((cb) => {

 let steps1 = []

  // 第1.1步,从缓存中读取access_token
  steps1.push((cb1) => {
   let access_token = cache.get('access_token', (err, access_token) => {
    cb1(err, access_token)
   })
  })

  // 第1.2步,缓存中有access_token则直接返回,如果没有,则从服务器中读取access_token
  steps1.push((access_token, cb1) => {
   if (access_token) {
    cb1(null, access_token, 'from_cache')
   } else {
    request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
     cb1(err, JSON.parse(body).access_token, 'from_server')
    })
   }
  })

  // 第1.3步,如果是新从服务器取的access_token,则缓存起来,否则直接返回
  steps1.push((access_token, from_where, cb1) => {
   if (from_where === 'from_cache') {
    console.log(' === 成功从缓存中读取access_token: ' + access_token + ' ===')
    cb1(null, access_token)
   } else if (from_where === 'from_server') {
    cache.set('access_token', access_token, (err, success) => {
     if (!err && success) {
      console.log(' === 缓存已过期,从服务器中读取access_token: ' + access_token + ' ===')
      cb1(null, access_token)
     } else {
      cb1(err || 'cache设置access_token时,出现未知错误')
     }
    })
   } else {
    cb1('1.3获取from_where时,from_where值为空')
   }
  })



  waterfall(steps1, (err, access_token) => {
   cb(err, access_token)
  })
 })


 // 第二步,获取ticket
 steps.push((access_token, cb) => {
  let steps1 = []

  // 第2.1步,从缓存中读取ticket
  steps1.push((cb1) => {
   let ticket = cache.get('ticket', (err, ticket) => {
    cb1(err, ticket)
   })
  })

  // 第2.2步,缓存中有ticket则直接返回,如果没有,则从服务器中读取ticket
  steps1.push((ticket, cb1) => {
   if (ticket) {
    cb1(null, ticket, 'from_cache')
   } else {
    request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
     cb1(err, JSON.parse(body).ticket, 'from_server')
    })
   }
  })

  // 第2.3步,如果新从服务器取的ticket,则缓存起来,否则直接返回
  steps1.push((ticket, from_where, cb1) => {
   if (from_where === 'from_cache') {
    console.log(' === 成功从缓存中读取ticket: ' + ticket + ' ===')
    cb1(null, ticket)
   } else if (from_where === 'from_server') {
    cache.set('ticket', ticket, (err, success) => {
     if (!err && success) {
      console.log(' === 缓存已过期,从服务器中读取ticket: ' + ticket + ' ===');
      cb1(null, ticket)
     } else {
      cb1(err || 'cache设置ticket时,出现未知错误')
     }
    })
   } else {
    cb1('2.3获取from_where时,from_where值为空')
   }
  })

  waterfall(steps1, (err, ticket) => {
   cb(err, ticket)
  })
 })


 // 第三步,生成签名
 steps.push((ticket, cb) => {
  let jsapi_ticket = ticket
  let nonce_str = '123456'
  let timestamp = new Date().getTime()
  let url = req.query.url

  let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '×tamp=' + timestamp + '&url=' + url
  let signature = sha1(str)

  cb(null, {
   appId: appid,
   timestamp: timestamp,
   nonceStr: nonce_str,
   signature: signature,
   ticket: ticket
  })
 })

 waterfall(steps, (err, data) => {
  if (err) {
   res.send({status: 'error', data: err})
  } else {
   res.send({status: 'success', data: data})
  }
 })
})

app.use('/wxJssdk/public', express.static('public'))

app.listen(80, err => {
 if(!err) console.log('connect succeed')
})

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

Javascript 相关文章推荐
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
简单了解JavaScript异步
May 23 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
JavaScript实现三级联动效果
Jul 15 #Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 #Javascript
backbone简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 #Javascript
easyui简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 #Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 #Javascript
You might like
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
php实现记事本案例
2020/10/20 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
初识Node.js
2014/09/03 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
Linux下Python获取IP地址的代码
2014/11/30 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
浙江文明网签名寄语
2014/01/18 职场文书
上班玩手机检讨书
2014/02/17 职场文书
超市客服工作职责
2014/06/11 职场文书
新教师培训心得体会
2014/09/02 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
商场营业员岗位职责
2015/04/14 职场文书
2015选调生工作总结
2015/07/24 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL