&

全面的.NET微信網(wǎng)頁開發(fā)之JS-SDK使用步驟、配置信息和接口請求簽名生成詳解

當前位置：點晴教程→知識管理交流 →『技術(shù)文檔交流』

freeflydom

2023年12月26日 9:53 本文熱度 1565

思維導航

JSSDK使用步驟
獲取access_token(公眾號的全局唯一接口調(diào)用憑據(jù))
獲取jsapi_ticket微信公眾號調(diào)用微信JS接口的臨時票據(jù)
生成簽名的隨機串（nonceStr）
生成簽名時間戳（timestamp）
獲取當前網(wǎng)頁URL
生成簽名（signature）
DotNetGuide技術(shù)社區(qū)交流群
參考資料

JSSDK使用步驟

步驟一:綁定安全域名：

先登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

步驟二:引入JS文件：

在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需進一步提升服務(wù)穩(wěn)定性，當上述資源不可訪問時，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

備注：支持使用 AMD/CMD 標準模塊加載方法加載。

在項目中引入：

步驟三:通過config接口注入權(quán)限驗證配置：

注意：所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現(xiàn)web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

wx.config({

debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。

appId: '', // 必填，公眾號的唯一標識

timestamp: , // 必填，生成簽名的時間戳

nonceStr: '', // 必填，生成簽名的隨機串

signature: '',// 必填，簽名

jsApiList: [] // 必填，需要使用的JS接口列表

});

步驟四:通過ready接口處理成功驗證：

注意：假如需要在頁面加載時就調(diào)用的話，需要把對應(yīng)的執(zhí)行函數(shù)放到wx.ready(function(){})；方法里面加載執(zhí)行，之前我調(diào)用加載就獲取地理位置的接口就是因為沒有放到這里面所以一直沒有獲取到用戶當前經(jīng)緯度坐標。

wx.ready(function(){

// config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。

});

步驟五:通過error接口處理失敗驗證：

wx.error(function(res){

// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。

});

接口調(diào)用說明:

所有接口通過wx對象(也可使用jWeixin對象)來調(diào)用，參數(shù)是一個對象，除了每個接口本身需要傳的參數(shù)之外，還有以下通用參數(shù)：

success：接口調(diào)用成功時執(zhí)行的回調(diào)函數(shù)。
fail：接口調(diào)用失敗時執(zhí)行的回調(diào)函數(shù)。
complete：接口調(diào)用完成時執(zhí)行的回調(diào)函數(shù)，無論成功或失敗都會執(zhí)行。
cancel：用戶點擊取消時的回調(diào)函數(shù)，僅部分有用戶取消操作的api才會用到。
trigger: 監(jiān)聽Menu中的按鈕點擊時觸發(fā)的方法，該方法僅支持Menu中的相關(guān)接口。

備注：不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。

以上幾個函數(shù)都帶有一個參數(shù)，類型為對象，其中除了每個接口本身返回的數(shù)據(jù)之外，還有一個通用屬性errMsg，其值格式如下：

調(diào)用成功時："xxx:ok" ，其中xxx為調(diào)用的接口名

用戶取消時："xxx:cancel"，其中xxx為調(diào)用的接口名

調(diào)用失敗時：其值為具體錯誤信息

獲取access_token(公眾號的全局唯一接口調(diào)用憑據(jù))

access_token是公眾號的全局唯一接口調(diào)用憑據(jù)，公眾號調(diào)用各接口時都需使用access_token。開發(fā)者需要進行妥善保存。access_token的存儲至少要保留512個字符空間。access_token的有效期目前為2個小時，需定時刷新，重復獲取將導致上次獲取的access_token失效。

返回參數(shù)說明

正常情況下（即請求成功時），微信只會返回下述JSON數(shù)據(jù)包給公眾號：

{"access_token":"ACCESS_TOKEN","expires_in":7200}

錯誤時微信會返回錯誤碼等信息，JSON數(shù)據(jù)包示例如下（該示例為AppID無效錯誤）:

{"errcode":40013,"errmsg":"invalid appid"}

通過接口獲取代碼

        /// <summary>
        /// 獲取微信公眾號全局唯一接口憑證
        /// </summary>
        /// <returns></returns>
        public static string RequestAccessToken()
        {   // 設(shè)置參數(shù)
            string appid=WxAppId;//第三方用戶唯一憑證
            string appsecret=WxAppSecret;//第三方用戶唯一憑證密鑰，即appsecret
            
            //請求接口獲取
            string _url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "&secret=" + appsecret;
            string method = "GET";
            HttpWebRequest request = WebRequest.Create(_url) as HttpWebRequest;
            CookieContainer cookieContainer = new CookieContainer();
            request.CookieContainer = cookieContainer;
            request.AllowAutoRedirect = true;
            request.Method = method;
            request.ContentType = "text/html";
            request.Headers.Add("charset", "utf-8");

            //發(fā)送請求并獲取響應(yīng)數(shù)據(jù)
            HttpWebResponse response = request.GetResponse() as HttpWebResponse;
            Stream responseStream = response.GetResponseStream();
            StreamReader sr = new StreamReader(responseStream, Encoding.UTF8);
            //獲取返回過來的結(jié)果
            string content = sr.ReadToEnd();

            dynamic resultContent=JsonConvert.DeserializeObject(content,new { access_token="", expires_in="", errcode="", errmsg="" }.GetType());
            if (resultContent!=null&&!string.IsNullOrWhiteSpace(resultContent.access_token)) //注意：請求成功時是不會有errcode=0返回,判斷access_token是否有值即可
            {
                return resultContent.access_token;//返回請求唯一憑證
            }
            else
            {
                //請求失敗，返回為空
                return "";
            }
        }

獲取jsapi_ticket微信公眾號調(diào)用微信JS接口的臨時票據(jù)

注意：前提是先要獲取到了公眾號全局唯一接口調(diào)用憑據(jù)（accessToken）。

        /// <summary>
        /// 獲取jsapi_ticket微信公眾號調(diào)用微信JS接口的臨時票據(jù)
        /// </summary>
        /// <param name="accessToken">微信公眾號的全局唯一接口調(diào)用憑證</param>
        /// <returns></returns>
        public static string RequestJsapi_ticket(string accessToken)
        {
            string content = "";
            try
            {
                //TODO：注意api_ticket 是用于調(diào)用微信卡券JS API的臨時票據(jù)，有效期為7200 秒，通過access_token 來獲取。

                string url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi";
                string method = "GET";
                HttpWebRequest request = WebRequest.Create(url) as HttpWebRequest;
                CookieContainer cookieContainer = new CookieContainer();
                request.CookieContainer = cookieContainer;
                request.AllowAutoRedirect = true;
                request.Method = method;
                request.ContentType = "text/html";
                request.Headers.Add("charset", "utf-8");
                //發(fā)送請求并獲取響應(yīng)數(shù)據(jù)
                HttpWebResponse response = request.GetResponse() as HttpWebResponse;
                Stream responseStream = response.GetResponseStream();
                StreamReader sr = new StreamReader(responseStream, Encoding.UTF8);
                //獲取返回過來的結(jié)果
                content = sr.ReadToEnd();
                dynamic resultStr = JsonConvert.DeserializeObject(content,new { errcode="", errmsg="",ticket="", expires_in=""}.GetType());

                //請求成功
                if (resultStr.errcode=="0"&&resultStr.errmsg=="ok")
                {
                    content=resultStr.ticket;
                }
                else
                {
                    content = "";
                }
               
                return content;
            }
            catch (Exception ex)
            {
                content = ex.Message;
                return content;
            }
        }

生成簽名的隨機串（nonceStr）

方法一:

        /// <summary>
        /// 隨機字符串數(shù)組集合
        /// </summary>
        private static readonly string[] NonceStrings = new string[]
                                    {
                                    "a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
                                    "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
                                    };

        /// <summary>
        /// 生成簽名的隨機串
        /// </summary>
        /// <returns></returns>
        public static string CreateNonceStr()
        {
            Random random = new Random();
            var sb = new StringBuilder();
            var length = NonceStrings.Length;

            //生成15位數(shù)的隨機字符串，當然也可以通過控制對應(yīng)字符串大小生成，但是至多不超過32位
            for (int i = 0; i < 15; i++)
            {
                sb.Append(NonceStrings[random.Next(length - 1)]);//通過random獲得的隨機索引到，NonceStrings數(shù)組中獲取對應(yīng)數(shù)組值
            }
            return sb.ToString();
        }

方法二:

string nonceStr = Guid.NewGuid().ToString().Replace("-", "").Substring(0,15);

生成簽名時間戳（timestamp）

        /// <summary>
        /// 獲取當前時間戳
        /// </summary>
        /// <returns></returns>
        public static long GetCurrentUinxTime()
        {
            DateTime currentDate = DateTime.Now;//當前時間
            //轉(zhuǎn)化為時間戳
            DateTime localTime = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1));
            return long.Parse((currentDate - localTime).TotalSeconds.ToString().Split('.')[0]);
        }

獲取當前網(wǎng)頁URL

后端

注意：一定要是在安全域名內(nèi)，否則生成的是無效的簽名（url必須是調(diào)用JS接口頁面的完整URL）。

//獲取當前網(wǎng)頁完整的URL（包括URL中的參數(shù)）

string currentWebUrl = Request.Url.ToString();

前端

//獲取當前網(wǎng)頁完整的URL（包括URL中的參數(shù)）

var currentWebUrl =self.location.href;

生成簽名（signature）

簽名算法說明

簽名生成規(guī)則如下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網(wǎng)頁的URL，不包含#及其后面部分）。對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數(shù)名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉(zhuǎn)義。

即signature=sha1(string1)。示例：

noncestr=Wm3WZYTPz0wzccnW

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

timestamp=1414587457

url=http://mp.weixin.qq.com?params=value

步驟1. 對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步驟2. 對string1進行sha1簽名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項

簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
簽名用的url必須是調(diào)用JS接口頁面的完整URL。
出于安全考慮，開發(fā)者必須在服務(wù)器端實現(xiàn)簽名的邏輯。

獲取簽名代碼

        /// <summary>
        /// 獲取簽名
        /// </summary>
        /// <param name="jsapi_ticket">微信公眾號調(diào)用微信JS臨時票據(jù)</param>
        /// <param name="nonceStr">隨機串</param>
        /// <param name="timestamp">時間戳</param>
        /// <param name="url">當前網(wǎng)頁URL</param>
        /// <returns></returns>
        public static string GetSignature(string jsapi_ticket, string nonceStr, long timestamp, string url)
        {

            var string1Builder = new StringBuilder();
            //注意這里參數(shù)名必須全部小寫，且必須有序
            string1Builder.Append("jsapi_ticket=").Append(jsapi_ticket).Append("&")
                          .Append("noncestr=").Append(nonceStr).Append("&")
                          .Append("timestamp=").Append(timestamp).Append("&")
                          .Append("url=").Append(url.IndexOf("#") >= 0 ? url.Substring(0, url.IndexOf("#")) : url);

            return Sha1(string1Builder.ToString(),Encoding.UTF8);
        }

        /// <summary>
        /// 簽名加密，使用SHA加密所得
        /// </summary>
        /// <param name="content">簽名加密參數(shù)</param>
        /// <param name="encode">編碼UTF-8</param>
        /// <returns></returns>
        public static string Sha1(string content, Encoding encode)
        {
            try
            {
                SHA1 sha1 = new SHA1CryptoServiceProvider();
                byte[] bytesIn = encode.GetBytes(content);
                byte[] bytesOut = sha1.ComputeHash(bytesIn);
                sha1.Dispose();
                string result = BitConverter.ToString(bytesOut);
                result = result.Replace("-", "");
                return result;
            }
            catch (Exception ex)
            {
                throw new Exception("SHA1加密出錯：" + ex.Message);
            }
        }

invalid signature簽名錯誤排查

假如你遇到簽名錯誤的情況，建議你按照以下順序進行排查。

確認簽名算法正確，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。
確認config中nonceStr（js中駝峰標準大寫S）, timestamp與用以簽名中的對應(yīng)noncestr, timestamp一致。
確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'后面的GET參數(shù)部分,但不包括'#'hash后面的部分。
確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
確保一定緩存access_token和jsapi_ticket。
確保你獲取用來簽名的url是動態(tài)獲取的，動態(tài)頁面可參見實例代碼中php的實現(xiàn)方式。如果是html的靜態(tài)頁面在前端通過ajax將url傳到后臺簽名，前端需要用js獲取當前頁面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數(shù)，如果不是動態(tài)獲取當前鏈接，將導致分享后的頁面簽名失敗。

參考資料

微信JS-SDK詳情說明請移步微信官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
微信JS-SDK使用權(quán)限簽名算法詳細概述：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

作者：追逐時光者

來源：博客園

該文章在 2023/12/26 9:53:17 編輯過

男女做爽爽爽网站-男女做羞羞高清-男女做爰高清无遮挡免费视频-男女做爰猛烈-男女做爰猛烈吃奶啪啪喷水网站-内射白浆一区