Front-end WeChat sharing jssdk config:invalid signature signature error solution

This time I will bring you the solution to the signature error of jssdk config:invalid signature shared on front-end WeChat. The solution to the signature error of jssdk config:invalid signature shared on front-end WeChat What are the precautions? What are the following? Let’s take a look at the case.

About the front-end WeChat sharing jssdk config:invalid signature signature error

I just finished writing on WeChat in the past few days. You may not believe it when I tell you. I wrote a WeChat sharing and used it together 2 weeks. There were all kinds of sadness in the process. At first, the big brother in the backend helped me write the backend visa, but it didn’t work. I wanted to ask him to change it. But later, the company had a project that was eager to go online, and there was no time. The product was urgently needed. I have no choice but to start handling the background by myself.

Okay, without further ado, let’s start with the main text

First of all, it is certain to read the WeChat SDK documentation for WeChat

because I am a front-end person, so I only write code about the front-end. I also cover the back-end. At the end of the article, I will attach the back-end code I modified

$.ajax({
        type: "post",
        dataType: 'json',
        url: '接口链接',
        data: {
            url: urld
        },
        success: function(conf) {
            console.log(conf);
            configWxAPI(conf);
            var conf = conf.url;            return conf;
        },
        error: function(event, XMLHttpRequest, ajaxOptions, thrownError) {            
        }
    });

    //配置权限
    function configWxAPI(conf) {
        wx.config({
            debug: false, //开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端
            //打开，参数信息会通过log打出，仅在pc端时才会打印
            appId: "唯一的ID", //必填，公众号的唯一标识
            timestamp: conf.timestamp, //必填，生成签名的时间戳
            nonceStr: conf.nonceStr, //必填，生成签名的随机串
            signature: conf.signature, //必填，签名
            jsApiList: [                
                'onMenuShareTimeline',                'onMenuShareAppMessage',                'onMenuShareQQ',                'onMenuShareWeibo',                'previewImage',
                
            ] //必填，需要使用的JS接口列表，也就是配置你想使用的调用接口
        });
//      微信分享
        wx.ready(function() {
          //分享的图片
            var imgUrl = ""
                      //分享朋友
            wx.onMenuShareAppMessage({
                title: "标题",
                desc: "内容简介",
                link: "分享链接",
                imgUrl: imgUrl,
                success: function() {
                    //分享成功之后执行的回调函数
                },
                cancel: function() {
                    //取消分享之后执行的回调函数
                }
            });
                             //分享朋友圈
            wx.onMenuShareTimeline({
                title: "标题",
                desc: "内容简介",
                link: "分享链接",
                imgUrl: imgUrl,
                success: function() {
                    //分享成功之后执行的回调函数
                },
                cancel: function() {
                    //取消分享之后执行的回调函数
                }
            });
        });
        wx.error(function(conf) {
            console.log(conf);
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    };

Backend part code

public function getSignPackage() {    
    if(IS_POST){        if(!I('post.url')) $this->ajaxReturn(array('status'=>0,'msg'=>'请输入当前的URL'));
        $jsapiTicket = $this->getJsApiTicket();
          //这句代码微信SDK上面没有介绍,但是用来签证的url里面就&后面会自动带有&,所以这里用了php的字符串替换
        $url =  str_replace("&","&",I('post.url'));

        $timestamp = time();
        $nonceStr = $this->createNonceStr();
    
        // 这里参数的顺序要按照 key 值 ASCII 码升序排序

The time here also has the same random string passed to the front desk, and the url link is passed from the front desk to the backend, and the backend uses this url to perform the following encoding

Remember the url passed to the backend It must be exactly the same as the current link. Remember that the url passed to the backend must be exactly the same as the current link. Remember that the url passed to the backend must be exactly the same as the current link.

  $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
    $signature = sha1($string);
    $signPackage = array(    "jsapiTicket" =>$jsapiTicket,      "appId"     => $this->appId,      "nonceStr"  => $nonceStr,      "timestamp" => $timestamp,      "url"       => $url,      "signature" => $signature,      "rawString" => $string
    );    $this->ajaxReturn($signPackage);

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

Front-end entry to css3

axios how to make HTTP request client based on Promise

css gradient color

The above is the detailed content of Front-end WeChat sharing jssdk config:invalid signature signature error solution. For more information, please follow other related articles on the PHP Chinese website!