做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下:
这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分享可以自定义内容,如下:
我承认,虽然这分享的标题和内容也并不正经,但这不妨碍我表达我们可以通过微信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):
填写接口的配置信息