微信JS-SDK签名接口的使用与开发

最近诸事缠身好久没有写文章了。前不久将与微信公众号有关的一些知识点进行了梳理，微信公众号开发过程中，用最多的就是微信js-sdk了。但是使用微信js-sdk需要获取签名、时间戳、随机字符串，等等一系列的参数，那问题就来了，这些参数是由后端提供能，还是前端自己获得呢？当然是先由后端获，然后向前端工程师提供一个接口，只不过这个接口返回的是jsapi_ticket还是计算好的签名signature，这个就得由前后端工程师协商了，一般为了方便，我的做法是直接返回计算好的签名。

首先我们看一下微信公众号开发关于微信JS-SDK的使用说明，如图：

 

一般来说，第一步由后端工程师完成，配置安全域名，微信规定只能在配置的域名下才能调用微信的JS-SDK，在哪里设置呢？

如图：

 

注意：填写的是域名而不是URL，URL是带协议的也就是带有http://,而域名则不需要。

之后是第二步，在页面中引入微信的js-sdk，这个无需多说。

第三步，通过config接口注入权限验证配置。

看起来很懵逼啊？什么是config接口，什么是注入权限，什么是验证配置...懵逼状态...,点开链接看到如图信息：

 

通过仔细阅读发现，当页面中引入了微信的js-sdk后，会在全局有一个wx对象，类似页面中引入了jquery会有一个$对象,道理一样。这里的wx对象上有一个属性为config，这个属性的值为一个函数，这个config函数也可称为接口。

那后面的注入权限验证配置又是什么呢？

注入权限验证配置指的是向config这个函数中传递上图显示的特定参数，然后调用这个函数，这个函数调用后会验证当前页面是否能使用微信的JS-SDK。

那我们来看看具体有哪些参数呢？如图：

 

一共6个：

第一个是开启调试开关的，开发环境一般设为true，上线后改为false；

第二个是微信公众号的appId；

第三个生成签名的时间戳，时间戳就是一串表示时间的数字，那这个签名是什么鬼呢，先不用管继续看

第四个生成签名的随机字串，随机串就是随机字符串，这里又提到了签名

第五个签名，问题来了签名怎么来的呢？？？

第六个需要使用的js的接口列表，这是干什么的呢？简单来说就是你需要使用微信js-sdk的那些功能，比方说调用扫一扫，相机，等等需要哪些功能就将代表其功能的字符串放进数组里面就可以了。

上面主要的疑问是签名如何来的？接着看文档，我们在查看第三步的时候，关于签名的信息，其实是有一个连接的如图：

 

仔细看附录1，点开连接如图：

 

  

文档很长，大家可以不用看，我来用最简短的话语来描述一下文档的信息：

第一 要获取签名的话，需要先获取jsapi_ticket,

第二 要获取jsapi_ticket的话要先获取access_token

以上两步通常由后端工程师完成，完成后向前端工程师提供一个接口，前端工程师，通过请求接口可以得到jsapi_ticket,然后根据文档的签名算法计算出签名。

但是为了方便，一般计算签名这一步骤也由后端工程师来完成，前端工程师直接请求签名接口从而获取签名、时间戳、随机字符串、等一系列信息。

本片文章的标题为：微信JS-SDK签名接口的使用与开发，前面主要讲微信JS-SDK签名接口的使用，如果只是使用的话前面的文章基本够用了，那么下面将要讲的就是微信JS-SDK签名接口的开发了。

我们要设计三个接口：

第一个请求接口返回access_token；

第二个请求接口返回jsapi_ticket

第三个请求接口返回signature也就是签名，当然还有一些列的其他信息，appid、时间戳、随机字符串。

首先我们看关于获取access_token的文档：

 

 

写的很详细，但是也很啰嗦，这里我挑重点用大白话给大家解释一下：获取access_token需要用get请求方式请求一个url地址，并且需要传递三个参数：grant_type、appid、secret。grant_type是固定值"client_credential"，appid和secret在微信公众号后台可以看到。

然后再看响应参数:

 

access_token和expires_in，前者为获得到的access_token,后者为此次获取的access_token可以缓存的时间。啥意思呢，就是说，在第一次获取access_token后，expires_in时间内不需要重新获取access_token，可以直接使用缓存的access_token这说明咱们可以将access_token存储起来，在需要使用access_token时，先判断时间有没有过期，没过期直接取出存储介质中的access_token，过期的话重新请求access_token，之后更新过期时间，更新存储介质中的access_token,获取access_token的流程图如下：

 

 

这里代码演示用的是存储到本地json文件中，没有使用数据库，数据量很小，真实项目中，也可以使用本地文件存储。首先实现两个功能函数，读取文件和写入文件：

 

然后是获取access_token的方法，这里将获access_token分离成两个函数,将直接从微信服务器获取access_token抽离成getNewToken函数：

 

到这里access_token就获取完成了，下面就是获取jspai_ticket了，看官方文档：

 

照样很啰嗦，简单来说就是向另一个url发送get请求，带上参数access_token和type，type是固定的值"jsapi"，access_token就是上面获取的access_token;拼接完成的url如下：

 

返回来的参数为一个对象有四个属性,如图:

 

主要两项：ticket和expires，ticket就是要获取的jsapi_ticket,expires_in是缓存时间，这个ticket也可以缓存7200秒，所以ticket的获取流程和access_token大体是一样的，只不过，多了一个判断,判断access_token是否过期。因为ticket的获取依赖access_token,所以ticket的获取流程图如下：

 

代码实现如下：

 

 

和access_token的获取方式一样，也是分为了两个函数，只不过在getTicket函数中多了一步请求access_token的异步操作。

到目前为止我们已经获取了ticket，此ticket也可以以接口的形式返回给前端。

最后一步就是计算签名了，看一下签名的文档：

 

 

这里大家先仔细读一下，我就不带着大家读了，直接总结要点：计算签名需要几个参数：

1、noncestr（随机字符串）,

2、有效的jsapi_ticket,

3、timestamp（时间戳）,

4、url（当前网页的URL，不包含#及其后面部分）

我们先实现获取timestamp和noncestr的函数：

 

然后需要ticket，ticket上面的代码中已经获取到了，那url呢，这里就需要前端向后端传递数据了，这里是开发中获取signature接口api的代码：

 

首先获取前端传过来的url，而后获取时间戳与随机字符串，然后将以上几项按照键值对的形式连接，注意顺序是固定的的，然后对字符串进行sha1加密，这里加密用的是crypto这个库，也可以直接用npm安装sha1库，直接调用sha1库的方法加密，加密之后，获得的就是签名了，最后将签名、时间戳、随机字符串、appid以json的形式返回给前端。

下面是综合前后端分离模式下，获取ticket的流程图：

---

---

 

到此微信js-sdk的前世今生就解释完了，不知道屏幕前的你有没有一丝收获。有疑问的话，欢迎留言，我是你们的好朋友巷里人，一个专注nodejs全栈开发的程序员，还在探索的路上，相信你也是，大家一起共勉。

好久没有写这么长的文章了，最近也是诸事缠身，万望大家谅解。

项目代码已上传github，点击原文链接，链接到github。