微信公衆號的分享接口，分享提示config:fail,invalid signature的解決辦法（2017年12月）

時間  2019-11-13
標籤 微信 公衆號 分享 接口 提示 config fail invalid signature 解決辦法 2017年 12月 简体版
原文   原文鏈接

微信中打開網頁，使用微信右上角菜單中自帶的分享功能的經歷及總結：javascript

最開始，微信分享頁面時，直接讀取頁面的標題（title）和頁面中的第一張符合條件的圖片[此種方式在2017-03-29以前管用，這一天以後，失效了，再也不獲取頁面上的圖片了。html

信息詳細說明：java

標題：會取當前頁面title裏面的內容。jquery

圖片：會取當前頁面body內最前面的一張符合條件的圖片。web

圖片規格有要求：ajax

尺寸必須大於： 300px × 300pxjson

把符合以上兩個條件的圖片放到<img>裏，放到頁面<body>內的最前面。api

這樣分享時就會取這張圖做爲縮略圖了。瀏覽器

2017-03-29之後的微信分享， 新版微信已經不支持非JSSDK的其餘自定義分享內容了.....，微信官方也給出了新的微信分享方式：JSSDK自定義分享接口的策略調整 
JSSDK自定義分享接口的策略調整

2017-03-29 微信團隊 微信開發者
爲規範自定義分享連接功能在網頁上的使用，自2017年4月25日起，JSSDK「分享到朋友圈」及「發送給朋友」接口，自定義的分享連接，其域名或路徑必須與當前頁面對應的公衆號JS安全域名一致，不然將調用失敗。

例如，當前頁面是 http://www.abc.com/123，其公衆號對應的JS安全域名爲 www.abc.com 以及 www.xyz.com，則分享自定義連接 http://www.abc.com/456 能夠成功，分享 http://www.xyz.com/123 或 http://www.def.com/123 均將失敗。

對於未接入微信JSSDK或已接入但JSSDK調用失敗的網頁，被用戶分享時，分享卡片將統一使用默認縮略圖和標題簡介，不容許自定義。

接口完整用法請參考《微信JSSDK說明文檔》，請開發者及時完成調整。

 

官方關於使用JSSDK文檔來實現微信自定義分享的步驟及代碼調用示例的說明：安全

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。

經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。

此文檔面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項。

##JSSDK使用步驟

###步驟一：綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。

備註：登陸後可在「開發者中心」查看對應的接口權限。

###步驟二：引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.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函數中。
});
###步驟五：經過error接口處理失敗驗證

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
});
##接口調用說明

全部接口經過wx對象(也可以使用jWeixin對象)來調用，參數是一個對象，除了每一個接口自己須要傳的參數以外，還有如下通用參數：

1.success：接口調用成功時執行的回調函數。

2.fail：接口調用失敗時執行的回調函數。

3.complete：接口調用完成時執行的回調函數，不管成功或失敗都會執行。

4.cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操做的api纔會用到。

5.trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。

備註：不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回。

以上幾個函數都帶有一個參數，類型爲對象，其中除了每一個接口自己返回的數據以外，還有一個通用屬性errMsg，其值格式以下：

調用成功時："xxx:ok" ，其中xxx爲調用的接口名

用戶取消時："xxx:cancel"，其中xxx爲調用的接口名

調用失敗時：其值爲具體錯誤信息

#基礎接口

##判斷當前客戶端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 須要檢測的JS接口列表，全部JS接口列表見附錄2,
    success: function(res) {
    // 以鍵值對的形式返回，可用的api值true，不可用爲false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});
備註：checkJsApi接口是客戶端6.0.2新引入的一個預留接口，第一期開放的接口都可不使用checkJsApi來檢測。

#分享接口

請注意不要有誘導分享等違規行爲，對於誘導分享行爲將永久回收公衆號接口權限，詳細規則請查看：朋友圈管理常見問題 。

##獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareTimeline({
    title: '', // 分享標題
    link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
    imgUrl: '', // 分享圖標
    success: function () {
    // 用戶確認分享後執行的回調函數
},
cancel: function () {
    // 用戶取消分享後執行的回調函數
    }
});
##獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareAppMessage({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
imgUrl: '', // 分享圖標
type: '', // 分享類型,music、video或link，不填默認爲link
dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
##獲取「分享到QQ」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareQQ({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享連接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
##獲取「分享到騰訊微博」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareWeibo({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享連接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
##獲取「分享到QQ空間」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareQZone({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享連接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
#圖像接口

 

 

項目中的代碼使用狀況：

HTML：

            <input type="hidden" id="hfTitle" value="分享的標題" />
            <input type="hidden" id="hfDesc" value="分享內容的描述文字" />            
            <input type="hidden" id="hfImg" value="分享的圖片完整地址" />

　　

 

Javascript:

<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript">
 //微信右上角菜單分享 $(function () {
 var sTitle = $("#hfTitle").val();//documnet.title; 

var sDesc = $("#hfDesc").val();
var sLink = location.href;//這句話，很重要，當前頁面的連接、分享的連接和簽名的連接必定要使用location.href的值，否者會出現各類坑，好比：微信分享提示config:fail,invalid signature 
var sImgUrl = $("#hfImg").val();
if (WechatShare && sTitle && sLink) 
{ 
  WechatShare(sTitle, sDesc, sLink, sImgUrl);
}
});
 </script>

 

wxshare.js的完整內容：

///調用微信菜單的分享功能分享服務提供商的頁面
;function WechatShare(shTitle, shDesc, shLink, shImgUrl)
{    
    if (is_weixin()) {       
        var urlPost = "/api/apishare/WeiXin?r=" + Math.random();
        var dataPost = { "url": shLink };//$("#hfLink").val().toLocaleLowerCase()
        $.ajax({
            type: "POST",
            data: dataPost,
            async: false,
            dataType: "json",
            url: urlPost,
            success: function (datastr) {
                var data = strToJson(datastr);
                if (data.errorCode != 200) {
                    return;
                }
                try {
                    if (wx) {
                        //獲取正確的簽名數據
                        wx.config({
                            debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                            appId: data.APPID, // 必填，公衆號的惟一標識
                            timestamp: data.TimeStamp, // 必填，生成簽名的時間戳
                            nonceStr: data.NonceStr, // 必填，生成簽名的隨機串
                            signature: data.Sign,// 必填，簽名，見附錄1
                            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] //必填，須要使用的JS-SDK接口列表
                        });                       
                        InitWechatShareMenu(shTitle, shDesc, shLink, shImgUrl);
                    } else {
                        console.log("wx is not defined");
                    }

                } catch (e) {                    
                    console.log("throw ex:" + e);
                }
            }
        });
    }
    else
    {
        //非微信App打開頁面，不初始化調用微信分享
    }

}

//微信瀏覽器右上角分享功能
function InitWechatShareMenu(shTitle, shDesc, shLink, shimgUrl) {
    try {

        wx.ready(function () {
            // 獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口
            wx.onMenuShareTimeline({
                title: shTitle, // 分享標題
                desc: shDesc, //分享描述
                link: '' + shLink + '',
                imgUrl: shimgUrl, // 分享圖標
                success: function () {
                    // 用戶確認分享後執行的回調函數
                },
                cancel: function () {
                    // 用戶取消分享後執行的回調函數
                }
            });
            // 獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口
            wx.onMenuShareAppMessage({
                title: shTitle, // 分享標題
                desc: shDesc, // 分享描述
                link: '' + shLink + '',
                imgUrl: shimgUrl, // 分享圖標
                type: 'link', // 分享類型,music、video或link，不填默認爲link
                dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
                success: function () {
                    // 用戶確認分享後執行的回調函數
                },
                cancel: function () {
                    // 用戶取消分享後執行的回調函數
                }
            });
            wx.onMenuShareQQ({
                title: shTitle, // 分享標題
                desc: shDesc, // 分享描述
                link: '' + shLink, // 分享連接
                imgUrl: shimgUrl, // 分享圖標
                success: function () {
                    // 用戶確認分享後執行的回調函數
                },
                cancel: function () {
                    // 用戶取消分享後執行的回調函數
                }
            });
            //wx.onMenuShareWeibo({
            //    title: shTitle, // 分享標題
            //    desc: shDesc, // 分享描述
            //    link: shLink, // 分享連接
            //    imgUrl: shimgUrl, // 分享圖標
            //    success: function () {
            //        // 用戶確認分享後執行的回調函數
            //    },
            //    cancel: function () {
            //        // 用戶取消分享後執行的回調函數
            //    }
            //});
            wx.onMenuShareQZone({
                title: shTitle, // 分享標題
                desc: shDesc, // 分享描述
                link: '' + shLink, // 分享連接
                imgUrl: shimgUrl, // 分享圖標
                success: function () {
                    // 用戶確認分享後執行的回調函數
                },
                cancel: function () {
                    // 用戶取消分享後執行的回調函數
                }
            });
            wx.error(function (res) {
                // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
                ConsoleLog("wx.error:" + res);
            });

        });
    } catch (e) {
        ConsoleLog("throw ex:" + e);
    }
}

//配置
function is_weixin() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

function strToJson(str) {
    var json = (new Function("return " + str))();
    return json;
}

接口說明：/api/apishare/WeiXin輸出的json格式的字符串：

返回值：
"{\"errorCode\":200,\"errorMes\":\"ok\",\"APPID\":\"wx529feee86f8ec400\",\"TimeStamp\":\"1513304624\",\"NonceStr\":\"e5e6a44636a041439fe5ed6ac517895a\",\"Api_Ticket\":\"HoagFKDcsGMVCIY2vOjf9rn95syC6rBOdmxyHLia-Gu6QnHXZMSDr4D4XYOoAhTQYOclQkRw5KIeEbHRmRMRAB\",\"Sign\":\"64b78a1a2b003365a4f750e81b4942f1154b12e0\"}"


 

我總結一下須要特別注意問題：

1.在公衆號開發的管理後臺添加 jssdk的安全域名目錄。

2.添加域名所在外網IP的白名單。

3.分享時，微信打開的網頁所在頁面url、簽名的url 和分享的url必須保持一致，注意大小寫敏感，不然會出現簽名配置失敗。建議使用：location.href來取值。（若是地址中有#號，只取#以前的內容） 

附件：share.js 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程