微信JS-SDK签名接口怎么用

这篇文章给大家分享的是有关微信JS-SDK签名接口怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十载时间我们累计服务了上千家以及全国政企客户，如砂岩浮雕等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致表扬。

首先我们看一下微信公众号开发关于微信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签名接口怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！