首页 > 上网技巧 > 电脑小技巧 > Nodejs接入微信JS-SDK全过程

Nodejs接入微信JS-SDK全过程

时间:2018-05-30 10:08 作者:QQ地带 我要评论

步骤一:设置JS接口安全域名
登录到你的微信公众平台后,左侧菜单选择设置-》公众号设置-》功能设置-》JS接口安全域名。它的上面给你列出了几个注意事项,比如要备案通过的域名,要将MP_verify_nnbEERhXNfbMC8Z0.txt上传到服务器,这一步按照操作即可,这时会像你所填写的这个地址发送一个请求里面,你接受到后还需要利用sha1加密进行比较
 
Nodejs代码:
 
var express = require('express');
var crypto = require('crypto');  //引入加密模块
var config = require('./config');//引入配置文件
var http = require('http');
 
var app = express();
 
app.get('/wx', function (req, res) {
 
    //1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
    var signature = req.query.signature,//微信加密签名
        timestamp = req.query.timestamp,//时间戳
        nonce = req.query.nonce,//随机数
        echostr = req.query.echostr;//随机字符串
 
    //2.将token、timestamp、nonce三个参数进行字典序排序
   
    var array = [config.token, timestamp, nonce];
    array.sort();
 
    //3.将三个参数字符串拼接成一个字符串进行sha1加密
    var tempStr = array.join('');
    const hashCode = crypto.createHash('sha1'); //创建加密类型 
    var resultCode = hashCode.update(tempStr, 'utf8').digest('hex'); //对传入的字符串进行加密
    console.log(signature)
    //4.开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
    if (resultCode === signature) {
        res.send(echostr);
    } else {
        res.send('mismatch');
    }
});
 
 
var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});
config文件代码:
 
{
    "token":"test",
    "appId":"wx1c9dedd4d06c8f14",
    "appSecret":"07b365cb9e600b5ce04915f59623eb99"
}
步骤二:前台的html怎么调用接口
官方提供的http://203.195.235.76/jssdk/ 这个还是很有帮助的,前台的配置都是从这里面复制过去的,首先创建html页面,用来调用接口实现功能,这里需要注意下,没有认证的订阅号有些接口无法调用(具体的权限看百度结果:https://jingyan.baidu.com/art...)
 
我这里调用图片拍照/手机选择这个功能,创建Image.html页面,Image.html代码如下:(这里面的代码大部分都是复制官方提供的那个页面的,这不是重点)
 
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>选择图像</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
 
<body>
    <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
    <h3 id="menu-image">图像接口</h3>
    <span class="desc">拍照或从手机相册中选图接口</span>
    <button class="btn btn_primary" id="chooseImage">chooseImage</button>
 
 
 
</body>
<script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    $.get("http:/xx.xx.cn/getsign", function (res) {
        console.log(res)
        wx.config({
            debug: true, // 开启调试模式
            appId: "你的appid", // 必填,公众号的唯一标识
            timestamp: res.timestamp, // 必填,生成签名的时间戳
            nonceStr: res.noncestr, // 必填,生成签名的随机串
            signature: res.signature,// 必填,签名,见附录1
            jsApiList: ['chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });
    })
 
</script>
 
<script>
  
    wx.error(function(res){
        console.log(JSON.stringify(res))
    })
    wx.ready(function () {
        // 1 判断当前版本是否支持指定 JS 接口,支持批量判断
        document.querySelector('#checkJsApi').onclick = function () {
            wx.checkJsApi({
                jsApiList: [
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage'
                ],
                success: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };
 
        // 5 图片接口
        // 5.1 拍照、本地选图
        var images = {
            localId: []
        };
        document.querySelector('#chooseImage').onclick = function () {
           
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    alert('已选择 ' + res.localIds.length + ' 张图片');
                },
                error:function(res){
                    alert("error")
                    alert("res")
                }
            });
        };
    })
</script>
</html>
步骤三:后台生成签名认证
终于到了这几天一直卡在的点上,反反复复的config:invalid signature错误,后面终于发现问题,1个是生成时间戳要精确到秒 2.生成时所要求的URL其实是前台页面的url地址
 
下面一步一步来做,首先创建jssdk.js 在这个下面用来返回wx.config所需要的信息(具体每个都啥意思,这个你看官方文档写的很明白了https://mp.weixin.qq.com/wiki...),可以在开发的时候将生成token/ticket都打印出来,在官方提供的工具上面https://mp.weixin.qq.com/debu... 进行测试,比较signature是不是一致
 
完整jssdk.js代码如下:
 
var request = require('request'),
    cache = require('memory-cache'),
    sha1 = require('sha1')
 
var express = require('express');
 
var app = express();
app.use('/wx', express.static('static'));
 
app.get('/getsign', function (req, res) {
    var url = "http://xx.xx.cn/wx/Image.html"
    console.log(url)
    var noncestr = "123456",
        timestamp = Math.floor(Date.now() / 1000), //精确到秒
        jsapi_ticket;
    if (cache.get('ticket')) {
        jsapi_ticket = cache.get('ticket');
        // console.log('1' + 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url);
        obj = {
            noncestr: noncestr,
            timestamp: timestamp,
            url: url,
            jsapi_ticket: jsapi_ticket,
            signature: sha1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)
        };
        res.send(obj)
    } else {
        request('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret', function (error, response, body) {
            if (!error && response.statusCode == 200) {
                var tokenMap = JSON.parse(body);
                request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + tokenMap.access_token + '&type=jsapi', function (error, resp, json) {
                    if (!error && response.statusCode == 200) {
                        var ticketMap = JSON.parse(json);
                        cache.put('ticket', ticketMap.ticket, (1000 * 60 * 60 * 24));  //加入缓存
                        // console.log('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url);
                        obj = {
                            noncestr: noncestr,
                            timestamp: timestamp,
                            url: url,
                            jsapi_ticket: ticketMap.ticket,
                            signature: sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)
                        }
                        res.send(obj)
                    }
                })
            }
        })
    }
});
 
 
var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});
步骤四:怎么调试
1.都写完了以后,在浏览器上运行Image.html看不到效果,要在手机微信里面才有效果,这时候可以用草料二维码 https://cli.im/url 一直在用,很好用,你把地址贴过来(http://xx.xx.cn/wx/Image.html),生成一个二维码,手机微信扫一扫就可以了
 
2.Image.html上的wx.config中的debug一定要设置为true,在wx.ready的外面加上
 
    wx.error(function(res){
        console.log(JSON.stringify(res))
    })

标签: nodejs
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告