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

题图 By Clm From Bing

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

如图:

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

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

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

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

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

那我们来看看具体有哪些参数呢?如图:

一共6个:

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

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

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

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

第五个签名,问题来了签名怎么来的呢???

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

仔细看附录1,点开连接如图:

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

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

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

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

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

我们要设计三个接口:

第一个请求接口返回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全栈开发的程序员,还在探索的路上,相信你也是,大家一起共勉。

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180426G1T9NB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券