继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

nodejs微信公众号开发之微信开放的JS接口

杜新明
关注TA
已关注
手记 2
粉丝 6
获赞 78

这篇文章会一步一步带你,用 nodejs 实现微信公众号的分享接口。微信分享接口,需要认证的公众号才能调用。并且设置JS接口安全域名后,公众号开发者可在该域名下调用微信开放的JS接口。

配置安全域名

登录公众号,在 公众号设置 - 功能设置 - JS接口安全域名 中添加上你自己的调用域名。

官方文档

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持 pushState 的H5新特性,所以使用 pushState 来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: '', // 必填,公众号的唯一标识

timestamp: , // 必填,生成签名的时间戳

nonceStr: '', // 必填,生成签名的随机串

signature: '',// 必填,签名,见附录1

jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});
步骤四:通过ready接口处理成功验证

wx.ready(function(){

// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

});
参数说明

appId 公众号 id 没啥说的
timestamp 时间戳

//生成时间戳 10 位字符
var createTimestamp = function () {
return parseInt(new Date().getTime() / 1000) + '';
};
nonceStr 随机串

//生成随机字符串 15 位
var createNonceStr = function () {
return Math.random().toString(36).substr(2, 15);
};

//toString(arg) 规定表示数字的基数,使 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。但是要注意,如果该参数是 10 以外的其他值,则 ECMAScript 标准允许实现返回任意值。
signature 签名
附录1-JS-SDK使用权限签名算法

jsapi_ticket

生成签名之前必须先了解一下 jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。

1.参考以下文档获取 access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket): https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下JSON:

{

"errcode":0,
"errmsg":"ok",                    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200

}
获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。

签名算法

签名生成规则如下:参与签名的字段包括 noncestr(随机字符串), 有效的 jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

即 signature=sha1(string1)。 示例:

noncestr=Wm3WZYTPz0wzccnW

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

timestamp=1414587457

url=http://mp.weixin.qq.com?params=value
步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

var ret = {
jsapi_ticket: jsapi_ticket,
nonceStr: createNonceStr(),
timestamp: createTimestamp(),
url: url
};

var raw = function (args) {
var keys = Object.keys(args);
keys = keys.sort(); //字典排序 得到 keys ["jsapi_ticket", "nonceStr", "timestamp", "url"]
var newArgs = {};
keys.forEach(function (key) {
newArgs[key.toLowerCase()] = args[key]; //key val 转小写
});

  var string = '';
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k]; //用 & 链接 去掉第一个 &
  }
  string = string.substr(1);
  return string;

};

string1 = raw(ret);
//得到:jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value
步骤2. 对string1进行sha1签名,得到signature:

jsSHA = require('jssha');
shaObj = new jsSHA(string1, 'TEXT');
signature = shaObj.getHash('SHA-1', 'HEX');

//或者
var sha1 = require('sha1');
signature = sha1(string1);
//signature: 0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事项

1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2.签名用的url必须是调用JS接口页面的完整URL。

3.出于安全考虑,开发者必须在服务器端实现签名的逻辑。
前端代码参考

//load weixin
var ua = navigator.userAgent.toLowerCase(),
isWeixin = ua.indexOf('micromessenger') != -1;

isWeixin && document.write('<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> ');
function WxApi(opts, callback) {
var doc = document,
href = location.href,
hArr = href.split('/');
hArr.pop();

var $desc = doc.querySelector('meta[name=description]'),
    $img = doc.querySelector('img') ;

this.opts = {
    title: doc.title  '请加上标题',
    desc: $desc && $desc.getAttribute('content'),
    imgUrl: $img && $img.src,
    url: href
};
for (var i in opts) {
    this.opts[i] = opts[i]
}

this.callback = callback;

isWeixin ? this.init(this.callback) : console.log('NOT IN WX!');
//this.init()

}

WxApi.prototype.init = function (cb) {
var self = this;

$.ajax({
    url: 'http://****/core/cross/wxapi?callback=?',
    data: {url: location.href.split('#')[0]},
    type: 'GET',
    dataType: 'jsonp',
    success: function(res) {
        config(res.timestamp, res.nonceStr,res.signature);
        cb && cb();

    },
    error: function() {
        isWeixin ? self.init(cb) : console.log('NOT IN WX!');

        //alert('LOC ERROR...')
    }
});
function config(time, ns, sign) {
    wx.config({
        debug: !1,
        appId: '*************',
        timestamp: time,
        nonceStr: ns,
        signature: sign,
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'showOptionMenu',
            'hideOptionMenu',//wx.hideOptionMenu();
            'scanQRCode',    //scanQRCode
        ]
    });
}

};

WxApi.prototype.hideOM = function () {
if (!isWeixin) return;

var self = this;

wx.ready(function() {
    wx.hideOptionMenu();
})

};

WxApi.prototype.qr = function (fn) {
if (!isWeixin) return;

var self = this;

wx.ready(function() {
    wx.scanQRCode({
        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
        success: function (res) {
            var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
            fn && fn(result);
        }
    });
});

};

WxApi.prototype.share = function (obj) {
if (!isWeixin) return;
console.log('============');

var self = this;

wx.ready(function () {
    console.log('=========ready');

    wx.onMenuShareAppMessage({
        title: obj.title  self.opts.title,
        desc: obj.desc  self.opts.desc,
        link: obj.url  self.opts.url,
        imgUrl: obj.imgUrl  self.opts.imgUrl,
        trigger: function (res) {
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });

    wx.onMenuShareTimeline({
        title: obj.title  self.opts.title,
        link: obj.url  self.opts.url,
        imgUrl: obj.imgUrl  self.opts.imgUrl,
        trigger: function (res) {
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });

    wx.onMenuShareQQ({
        title: obj.title  self.opts.title,
        desc: obj.desc  self.opts.desc,
        link: obj.url  self.opts.url,
        imgUrl: obj.imgUrl  self.opts.imgUrl,
        trigger: function (res) {
        },
        complete: function (res) {
            console.log(JSON.stringify(res));
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });

    wx.onMenuShareWeibo({
        title: obj.title  self.opts.title,
        desc: obj.desc  self.opts.desc,
        link: obj.url  self.opts.url,
        imgUrl: obj.imgUrl  self.opts.imgUrl,
        trigger: function (res) {
        },
        complete: function (res) {
            console.log(JSON.stringify(res));
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });
});

};

打开App,阅读手记
14人推荐
发表评论
随时随地看视频慕课网APP