详解基于Node.js的微信JS

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

详解基于Node.js的微信JS

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

详解基于Node.js的微信JS

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

成为测试公众号开发者

登录测试公众号后台

首先我们需要在申请测试接口,地址:
使用微信扫描登录后,即可来微信公众平台测试账号系统。

成为测试公众号开发者

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

接口配置信息

修改接口配置信息

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

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

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

搭建简单的Node服务器

我们需要在 这个域名上搭建一个服务器,并且曝出一个接口为/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') })

现在我们在地址栏中访问 ,如果页面显示“请求成功了了了了”,则进入到下一步,如果没有成功的话,检查一下你的服务器是否开启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使用步骤

根据,我们需要完成如下:

填写安全域名

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

前端引入JS

在需要调用JS接口的页面引入此JS文件,(支持https):

填写接口的配置信息

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjssg.html