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

简介: 原文:微信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
目录
相关文章
|
11月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
781 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
1737 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
220 1
|
前端开发 JavaScript Go
JS基础:输出信息的5种方式详解
JS基础:输出信息的5种方式详解
352 1
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
882 0
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
网络安全 开发工具 Python
【Azure事件中心】使用Python SDK(Confluent)相关方法获取offset或lag时提示SSL相关错误
【Azure事件中心】使用Python SDK(Confluent)相关方法获取offset或lag时提示SSL相关错误
133 1
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
138 0
|
自然语言处理 JavaScript 前端开发
【走向世界】Vue.js国际化:打造无国界应用,让爱与信息跨越语言的边界!
【8月更文挑战第30天】本文详细介绍了Vue.js中实现国际化的多种方法及最佳实践。通过使用`vue-i18n`等第三方库,开发者能够轻松地为应用添加多语言支持,优化用户体验并扩大市场覆盖范围。文章涵盖从基本配置、动态加载语言包到考虑文化差异等方面的内容,帮助读者构建真正全球化且无缝多语言体验的应用程序。
421 0
|
JSON Java API
【Azure API 管理】通过Java APIM SDK创建一个新的API,如何为Reqeust的Representation设置一个内容示例(Sample)?
【Azure API 管理】通过Java APIM SDK创建一个新的API,如何为Reqeust的Representation设置一个内容示例(Sample)?
137 0
|
固态存储 Java 网络安全
【Azure Developer】使用Java SDK代码创建Azure VM (包含设置NSG,及添加数据磁盘SSD)
【Azure Developer】使用Java SDK代码创建Azure VM (包含设置NSG,及添加数据磁盘SSD)
201 0