微信JS-SDK“分享信息设置”API及数字签名生成方法(NodeJS版本)

本文涉及的产品
.cn 域名,1个 12个月
简介: 原文:微信JS-SDK“分享信息设置”API及数字签名生成方法(NodeJS版本)先上测试地址以示成功: 用微信打开下面地址测试 http://game.4gshu.com/deep-love/index.
原文: 微信JS-SDK“分享信息设置”API及数字签名生成方法(NodeJS版本)

先上测试地址以示成功:

用微信打开下面地址测试

http://game.4gshu.com/deep-love/index.html

获直接扫二维码君

 

用异步ajax的方式获取数字签名


异步的方式好

1、前后端分离啊

2、一个服务可以供多个微信公众帐号的数字签名服务

 

在服务器端用NodeJS跑起一个数字签名生成服务,web端用ajax方式请求NodeJS服务获取数字签名信息

得到信息后配置微信JS-SDK

 

 

步骤


 

第一步 认证的微信公众帐号

首先你得拥有一个通过认证了的微信公众号或者开发者帐号,没有通过认证的公众帐号。数字签名认证也能成功,但是分享信息是无法设置成功的;
 

第二步 添加安全域名

在公众帐号平台后台添加app运行的域名地址,可以理解为为某个域名添加白名单功能
以我们公司旗下的榕树下为例:
微信公众号是:榕树下,添加了game.4gshu.com为安全域名,那么我在game.4gshu.com上的网页可以使用榕树下公众帐号的数字签名了
 

第三步 生成数字签名

在微信公众平台后台上面能找到一个 appid 及 secret字符串
通过这两个数据,请求微信提供的两个公开API地址,生成对应的access_token后再生成ticket再通过规则加密成数字签名
注意,数字签名必须在服务端生成,这里我以NodeJS来实现
数字签名具体生成过程,NodeJS版本
1、获取微信签名所需的access_token
https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid写在这里&secret=你的secret写在这里', function(_res) {
               // 这个异步回调里可以获取access_token
          })

2、获取微信签名所需的ticket

https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步中获取的access_token&type=jsapi', function(_res){
         // 这个异步回调里可以获取ticket
});
3、生成数字签名具体方法
ticket、 noncestr、timestamp、url通过微信的规则用sha1加密
noncestr和timestamp在微信官方sample包中有具体的生成方法函数
 // noncestr
     var createNonceStr = function() {
          return Math.random().toString(36).substr(2, 15);
     };

      // timestamp
     var createTimeStamp = function () {
          return parseInt(new Date().getTime() / 1000) + '';
     };

也可以参考我代码中的代码

 // 计算签名方法
     var calcSignature = function (ticket, noncestr, ts, url) {
          var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;
          shaObj = new jsSHA(str, 'TEXT');
          return shaObj.getHash('SHA-1', 'HEX');
     }
var signature = calcSignature(ticket, noncestr, timestamp, url);
4、返回输出signature数字签名以及在生成数字签名时用到的timestamp、nonceStr、url、及appid
因为在客户内初始化微信JS-SDK中还要用到
 
5、至此数字签名生成成功
 

第四步 在web中如何使用数字签名?

1、引入微信JS-SDK
 
2、请求服务器获取数字签名
在web上用ajax方式请求NodeJS服务地址,请求时将当前web地址url上传至服务器
服务器生成数字签名后返回:
signature,timestamp, appid, nonceStr
这四个数据用于配置微信JS-SDK
wx.config({
                  debug: true,
                  appId: appid,
                  timestamp: timestamp,
                  nonceStr: nonceStr,
                  signature: signature,
                  jsApiList: [
                      'checkJsApi',
                      'onMenuShareTimeline',
                      'onMenuShareAppMessage',
                      'onMenuShareQQ',
                      'onMenuShareWeibo',
                      'hideMenuItems',
                      'chooseImage'
                  ]
              });

3、在wx.ready内调用API

wx.ready(function(){
                   var sdata = {
                        title: '那年|时光遗忘了,文字却清晰地复刻着',
                        desc: '那年|时光遗忘了,文字却清晰地复刻着',
                        link: 'http://game.4gshu.com/deep-love/index2.html',
                        imgUrl: 'http://game.4gshu.com/xuangedan/other-project/2015-01-06/img/share-wx-logo.jpg',
                        success: function () {
                            alert('用户确认分享后执行的回调函数');
                        },
                        cancel: function () {
                            alert('用户取消分享后执行的回调函数');
                        }
                    };
                   wx.onMenuShareTimeline(sdata);
                   wx.onMenuShareAppMessage(sdata);
              });

4、搞定

 

 

关于数字签名过期与微信API的1w次请求的限制问题


 

由于微信提供的两个数字签名生成API有7200秒的有效期,并且暂时有1w次的限制,所以在我们自己服务器上需要将数字签名缓存
 
逻辑是:
如果用户请求时没缓存中没有数字签名,那么请求执行 第三步 生成数字签名
如果缓存中有,并且是在2小时内那么直接返回数字签名信息,不去请求微信服务器
如果缓存中的数字签名过期了(超过2小时)则还是执行 第三步 生成数字签名
 
 
注意:由于微信规定地址栏中的参数发生变化都认作是新的请求地址,数字签名也需要重新生成。
 
新生成的数字签名将存入cachedSignatures对象内
缓存中的数据结构将url设为key
数据结构如下:
var cachedSignatures =  {
               'http://game.4gshu.com/': {
                    appid: ’微信认证帐号的的appid'
                    ,secret: '微信认证帐号的secret'
                    ,timestamp: '1421135250'
                    ,noncestr: 'ihj9ezfxf26jq0k'
               }
          }

 

测试项目源码


 

我的项目源码已经放到Github上了,有需要的可以pull下来看一看,

NodeJS我也是一知半解,将就着用,多有不足之处,欢迎交流

 

源码地址:https://github.com/willian12345/wechat-JS-SDK-demo

 

 

 

 ======== ======== ======== ======== ======== ======== ======== ======== ======== ========
博客园willian12345
by sheldon.wang
目录
相关文章
|
1月前
|
缓存 API
全球最新地震信息免费API接口教程
该接口提供全球最新地震信息,数据源自中国地震台网,每5分钟更新一次。支持POST/GET请求,需提供用户ID和KEY。返回数据包括地震等级、时间、经纬度、深度及位置等详细信息。示例请求和响应详见文档。
|
14天前
|
供应链 搜索推荐 API
探索1688榜单商品详细信息API接口:开发、应用与收益
本文深入探讨了1688榜单商品详细信息API接口的开发与应用,涵盖接口概述、开发条件、调用方法及数据处理等内容。该API帮助企业高效获取1688平台商品信息,应用于商品信息采集、校验、同步与数据分析等领域,有效提升了企业的运营效率、库存管理、销售转化率及市场策略制定能力,降低了采购成本,提升了客户满意度。
37 9
|
24天前
|
JSON 安全 API
Python调用API接口的方法
Python调用API接口的方法
111 5
|
25天前
|
缓存 算法 API
查询域名WHOIS信息免费API接口教程
该API用于查询顶级域名的WHOIS信息,不支持国别域名和中文域名。通过POST或GET请求,需提供用户ID、KEY及待查询域名。返回信息包括域名状态、注册商、时间等详细数据。示例与文档见官网。
|
25天前
|
API 区块链
获取指定网页基础信息【TDK】免费API接口教程
该接口用于从标准网页中提取标题、关键词、描述和图标等信息。支持POST/GET请求,需提供用户ID、KEY及目标网址等参数,可选指定访问节点。返回状态码、信息提示及提取的内容。示例与详细文档见官网。
|
1月前
|
API
万年历[取当日信息]免费API接口教程
此API提供万年历当天的详细信息,包括农历、星期、宜忌、生肖、星座、节日、五行、星宿等。支持POST和GET请求,需提供用户ID和KEY。返回数据包含阳历、农历、干支、节日列表等多项内容。示例URL:https://cn.apihz.cn/api/time/getday.php?id=88888888&key=88888888。
210 10
|
1月前
|
JSON 数据挖掘 API
电商信息指南:API接口淘宝关键词、店铺所有商品获取
要获取淘宝关键词商品数据和店铺所有商品的API接口,需先注册淘宝开放平台账号并创建应用,获取API密钥。接着,使用密钥获取访问令牌,详细阅读API文档,构造并发送API请求,解析响应数据。特别地,使用`item_search_shop`接口可获取店铺内所有商品信息。
|
1月前
|
Web App开发 API Windows
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cn.apihz.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{"code":200,"ip":"175.154.88.178","browser":"Chrome","os":"Windows 10"}。详情见官网文档。
|
1月前
|
编解码 API 数据库
商品详情 API 接口的返回结果通常包含哪些信息?
商品详情API接口返回的信息涵盖多个方面,主要包括商品基本信息(ID、标题、图片、价格、库存、SKU)、详细描述与规格参数、销售与评价信息(销量、好评率、评价内容、促销活动)、物流与售后信息(发货地、运费模板、退换货政策、保修期限)及店铺信息(ID、名称、评分)和关联推荐信息(相似商品、搭配商品)。这些信息有助于用户全面了解商品并做出购买决策。
|
1月前
|
Java 测试技术 API
如何利用 1688 API 接口获取商品信息?
利用 1688 API 获取商品信息的步骤包括:注册开发者账号并创建应用,申请 API 权限,获取 API 密钥,了解 API 文档,编写代码调用 API,并进行测试与调试。最终在生产环境中上线应用,确保合法合规使用。