微信公众号wx.config权限通不过config:invalid signature,显示无效签名

一、vue引入weixin-js-sdk(yarn或npm)

代码的写法都是一样的(网上随便找一个,例如https://www.javascriptcn.com/article/159960.htm)
jsApiList里必须要写上自己要调用的接口名,例如

wx.config({
    debug: true, // 开启调试模式
    appId: '.......',
    timestamp: response.data.timestamp, // 必填,生成签名的时间戳
    nonceStr: response.data.nonceStr, // 必填,生成签名的随机串
    signature: response.data.signature, // 必填,签名
    jsApiList: ['scanQRCode']
    // jsApiList: ['getLocation', 'chooseImage', 'hideOptionMenu', 'checkJsApi', 'chooseWXPay', 'closeWindow', 'scanQRCode']
    // 必填,需要使用的JS接口列表
  })

1、有说url参数出的问题,事实上location.href.split('#')[0]是不会骗人的
    要在公众号调试,参数会多code和state,state是空值的
2、还有说后端签名错误,要是后端代码写错了那都太好排查了,可以在这里验证
    http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
    结果我们后端的签名的算法验证没有问题    
3、最后怀疑是服务器域名配置的问题,运维查了一下是https的证书错了
   想必这个问题大家一般不会遇到,证书未及时替换掉

二、大家可以尝试下官方的案例http://demo.open.weixin.qq.co...,把这个地址的代码扒下来尝试一下

出现config:invalid signature分析: 1、jq和sdk的引入最好放到页面加载比较早的位置,如head标签里 2、ajax异步改为同步就可以了(async: false)

$.ajax({
    type: "get",
    url: basePath + config,  //后端接口
    async: false,
    dataType: "json",
    data: {
        page: location.href.split('#')[0]
    },
    success: function (datas) {
        var datas=JSON.parse(datas);
        if (datas.status == 100) {
            var req = datas.data;
            var signature = req.signature;
            var timestamp = req.timestamp;
            var nonceStr = req.nonceStr;
              wx.config({
                  debug: true,
                  appId: 'wxa9f902f87a88c0df',
                  timestamp: timestamp,
                  nonceStr: nonceStr,
                  signature: signature,
                  jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                    'translateVoice',
                    'startRecord',
                    'stopRecord',
                    'onVoiceRecordEnd',
                    'playVoice',
                    'onVoicePlayEnd',
                    'pauseVoice',
                    'stopVoice',
                    'uploadVoice',
                    'downloadVoice',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'getNetworkType',
                    'openLocation',
                    'getLocation',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'closeWindow',
                    'scanQRCode',
                    'chooseWXPay',
                    'openProductSpecificView',
                    'addCard',
                    'chooseCard',
                    'openCard'
                  ]
              });
            // 通过ready接口处理成功验证
            wx.ready(function () {
                 alert("初始化成功!");
            });
            wx.error(function () {
                alert("初始化失败!");
            });

        }
    }
});
原文链接:segmentfault.com

上一篇:辅导案例-CSSE1001
下一篇:base64转为ArrayBuffer

相关推荐

  • 配置(Configuration)

    你可能已经注意到,很少有 webpack 配置看起来很完全相同。这是因为 webpack 的配置文件,是导出一个对象的 JavaScript 文件。此对象,由 webpack 根据对象定义的属性进行解...

    10 天前
  • 跨域编辑器的编码习惯editorConfig

    编辑器就是生产力,符合个人编程习惯和风格的编辑器能给开发带来轻松愉快的心情和生产力。前端开发中越来越多东西需要通过配置文件来进行配置,现在编辑器也使用了这一方法。 意义 存在的目的是项目代码在不...

    1 年前
  • 解决微信js-jdk invalid signature 签名非法的问题

    timg?image&quality=80&size=b999910000&sec=1517401690303&di=c281fc3ce24a7b1c21953f8f3...

    2 年前
  • 解决koala报错invalid byte sequence in UTF-8

    用koala编译scss文件的时候,总是报错 clipboard.png(https://img.javascriptcn.com/d2b74b8f43a7ed30a8ac4c9f61982d11 ...

    10 个月前
  • 理解webpack.config.js的四个核心概念

    webpack是需要自己编写自己需要的一个配置对象,取决你如何使用webpack,下面指定了所有的可用的配置选项。 参考文档:https://doc.webpackchina.org...(https...

    2 年前
  • 没有webpack.config.js如何配置less ??安装配置less必看

    首先我们最新创建的项目;无论是vue或者react项目,你都找不到webpack.config.js,甚至没有原来的build文件夹,那我们如何配置less或者jq这种插件呢?接下来进入正题 配置le...

    1 个月前
  • 如何配置Web.config允许任何长度的要求

    djvsomebloodyfool(https://stackoverflow.com/users/832052/djv)提出了一个问题:How to configure the web.config...

    2 年前
  • 基于config-component转向面向数据的编程?

    面向数据编程 面向数据编程是什么样的体验? 其实是数据驱动式编程更向前走一步,我们知道现在MVVM框架,像React、vue、Angular这些给前端带来了很大的进步,更优雅的工程化体系结构,...

    7 个月前
  • 利用react-router4的react-router-config做路由鉴权

    一、reactrouterconfig 是一个帮助我们配置静态路由的小助手。 其源码就是一个高阶函数 利用一个map函数生成静态路由 //router.js 假设这是我们设置的路由数组(这种写法...

    2 年前
  • 使用不同语言进行配置(Configuration Languages)

    webpack 接受以多种编程和数据语言编写的配置文件。支持的文件扩展名列表,可以在 nodeinterpret 包中找到。使用 nodeinterpret,webpack 可以处理许多不同类型的配置...

    10 天前

官方社区

扫码加入 JavaScript 社区