基于Node.js的微信JS-SDK后端接口实现(二)

上一篇文章中,使用 Node.js 成功的创建了一个项目。在这篇文章中,我们将实现

  1. 微信接入验证。

  2. 微信公众平台一个非常重要的参数 access_token ,它是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用 access_token。

  3. JS-SDK使用权限签名算法。

  4. 案列

  5. 常见问题

准备工作

  1. 在根目录新建一个文件夹wechatApi;并创建一个wechat_jsapi.js文件(文件内容移步github查看)

  2. 在app.js中导入模块并实例化一个jssdk用于调用wechat_jsapi.js中的方法

    const express = require('express'), //express 框架 
        crypto = require('crypto'), //引入加密模块
        Jsapi = require("./wechatApi/wechat_jsapi"), //Wechat JS-API接口
        config = require('./config'); //引入配置文件
    
    //实例Jsapi
    var jssdk = new Jsapi(config.appID, config.appScrect);
    
  3. 方法介绍

    获取 access_token, 返回promise对象,resolve回调返回string

    jssdk.getAccessToken().then(
        re => console.log(re)
    ).catch(err => console.error(err));
    

    获取 jsapi_ticket, 返回promise对象,resolve回调返回string

    jssdk.getJsApiTicket().then(
        re => console.log(re)
    ).catch(err => console.error(err));
    

    获取 JS-SDK 权限验证的签名, 返回promise对象,resolve回调返回json

    jssdk.getSignPackage(url).then(
        re => console.log(JSON.stringify(re))
    ).catch(err => console.error(err));
    

微信接入验证

打开app.js文件加入接入验证的代码

app.get('/', 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'); //对传入的字符串进行加密

    //4.开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
    if (resultCode === signature) {
        res.send(echostr);
    } else {
        res.send('mismatch');
    }
});

启动nodejs项目;在测试号中对接口配置信息进行配置;

QQ截图20190417200600.png

获取 access_token

打开app.js文件加入获取 access_token的代码

//用于请求获取 access_token
app.get('/getAccessToken', function (req, res) {
    jssdk.getAccessToken().then(
        re => res.send({
            "code": 0,
            "message": "ok",
            "data": {
                "access-token": re
            }
        })
    ).catch(
        err => res.send({
            "code": 1,
            "message": "err",
            "err": err
        }));
});

启动nodejs项目,访问http://localhost:3000/getAccessToken

image.png

JS-SDK使用权限签名算法

打开app.js文件加入获取 权限签名算法的代码

//用于JS-SDK使用权限签名算法
app.get('/jssdk', function (req, res) {
    //获取传入的url
    let url = req.query.url;
    //使用签名算法计算出signature
    jssdk.getSignPackage(url).then(
        re => res.send({
            "code": 0,
            "message": "ok",
            "data": re
        })
    ).catch(err => res.send({
        "code": 1,
        "message": "err",
        "err": err
    }));
});

当请求jssdk时会自动在根目录创建两个文件(access_token.json,jsapi_ticket.json)用于保存access_token和jsapi_ticket。

案列

打开app.js文件加入静态文件伺服功能

app.use('/wxJssdk/public', express.static('public'));

在根目录新建一个文件夹public;在其中新建test.html文件;编辑test.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="http://www.jq22.com/jquery/jquery-1.9.1.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>

<body>
    <script type="text/javascript">
        // 请求签名
        $.ajax({
            url: "/jssdk",
            type: 'get',
            data: {
                url: location.href.split('#')[0]
            },
            success: function (res) {
                wx.config({
                    debug: false,
                    appId: res.data.appId,
                    timestamp: res.data.timestamp,
                    nonceStr: res.data.nonceStr,
                    signature: res.data.signature,
                    jsApiList: [
                        'checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ'
                    ]
                });
                wx.ready(function () {
                    var shareData = {
                        title: "123",
                        desc: "123456",
                        link: "",
                        imgUrl: ""
                    };
                    wx.onMenuShareAppMessage(shareData);
                    wx.onMenuShareTimeline(shareData);
                    wx.onMenuShareQQ(shareData);
                });
                wx.error(function (res) {
                    alert(res.errMsg); // 正式环境记得关闭啊!!!!
                });
            }
        });
    </script>
</body>

</html>

启动项目:在微信中访问http://23y8q85354.qicp.vip/wxJssdk/public/test.html并分享给自己发现分享功能已成功运行!

image.png

常见问题

官方常见错误查阅传送门:附录5

因为在实际开发的时候,真的是不端的遇到问题,不断的去找答案。错误出现的话,是有一定顺序的,这对我们找原因有一定的帮助。首先是config fail,若没错的话,才有可能出现invalid signature,若没错的话,才有可能出现``` invalid url domain``。最后就完全没错了,说明已成功。

config 错误

如果config fail,一般说明存在配置字段遗漏,或者配置字段的值为空(null,undefined,"")。

signature错误

如果报invalid signature错误,一般说明签名没有生成正确,再核对一遍规则。可以使用微信 JS 接口签名校验工具:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign,对比代码生成出来的是否和检验工具生成的一样。比如时间戳长度,顺序,拼接遗漏。

url domain错误

如果报invalid url domain错误,说明配置工作已经OK啦。出现这个的原因是域名没有添加到JS接口安全域名下,或者没有使用80、443端口。

其他错误

permission denied接口无权限等等,查阅文档吧。

基于Node.js的微信JS-SDK后端接口实现(一)

基于Node.js的微信JS-SDK后端接口实现(二)

基于Node.js的微信JS-SDK后端接口实现(三)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355