微信 JS-SDK 配置

時間  2019-11-17
標籤 微信 sdk 配置 欄目 JavaScript 简体版
原文   原文鏈接

微信的JS-SDK經過config接口注入權限驗證配置，官網上的文檔說的很清楚：javascript

Js代碼

wx.config({  
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。 
    appId: '', // 必填，公衆號的惟一標識 
    timestamp: , // 必填，生成簽名的時間戳 
    nonceStr: '', // 必填，生成簽名的隨機串 
    signature: '',// 必填，簽名，見附錄1 
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2 
});  
複製代碼

至於如何獲取到以上參數，則須要翻閱微信給出的文檔html

mp.weixin.qq.com/wiki?t=reso…java

步驟

大體流程以下：算法

一、使用APPID和APPSecret獲取access_token；json

二、使用access_token獲取jsapi_ticket ；api

三、用時間戳、隨機數、jsapi_ticket和要訪問的url按照簽名算法拼接字符串；數組

四、對第三步的字符串進行SHA1加密，獲得簽名。緩存

1. 獲取access_token

這裏是官網的說法，能夠看看。安全

如下是個人代碼實現：bash

Java代碼

public static String getAccessToken() {  
    String access_token = "";  
    String grant_type = "client_credential";//獲取access_token填寫client_credential 
    String AppId="APPID";//第三方用戶惟一憑證 
    String secret="APPSECRET";//第三方用戶惟一憑證密鑰，即appsecret 
    //這個url連接地址和參數皆不能變 
    String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type="+grant_type+"&appid="+AppId+"&secret="+secret;  
       
    try {  
        URL urlGet = new URL(url);  
        HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();  
        http.setRequestMethod("GET"); // 必須是get方式請求 
        http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
        http.setDoOutput(true);  
        http.setDoInput(true);  
        System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 鏈接超時30秒 
        System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 讀取超時30秒 
        http.connect();  
        InputStream is = http.getInputStream();  
        int size = is.available();  
        byte[] jsonBytes = new byte[size];  
        is.read(jsonBytes);  
        String message = new String(jsonBytes, "UTF-8");  
        JSONObject demoJson = JSONObject.fromObject(message);  
        System.out.println("JSON字符串："+demoJson);  
        access_token = demoJson.getString("access_token");  
        is.close();  
    } catch (Exception e) {  
            e.printStackTrace();  
    }  
    return access_token;  
}  
複製代碼

APPID和APPSECRET能夠去微信公衆平臺---「開發----基本配置」中查找。

2. 獲取jsapi_ticket

Java代碼

public static String getTicket(String access_token) {  
    String ticket = null;  
    String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ access_token +"&type=jsapi";//這個url連接和參數不能變 
    try {  
        URL urlGet = new URL(url);  
        HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();  
        http.setRequestMethod("GET"); // 必須是get方式請求 
        http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
        http.setDoOutput(true);  
        http.setDoInput(true);  
        System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 鏈接超時30秒 
        System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 讀取超時30秒 
        http.connect();  
        InputStream is = http.getInputStream();  
        int size = is.available();  
        byte[] jsonBytes = new byte[size];  
        is.read(jsonBytes);  
        String message = new String(jsonBytes, "UTF-8");  
        JSONObject demoJson = JSONObject.fromObject(message);  
        System.out.println("JSON字符串："+demoJson);  
        ticket = demoJson.getString("ticket");  
        is.close();  
    } catch (Exception e) {  
            e.printStackTrace();  
    }  
    return ticket;  
}  
複製代碼

3. 拼接字符串

拿到了jsapi_ticket以後就要參數名排序和拼接字符串，並加密了。如下爲sha1的加密算法：

public static String SHA1(String decript) {  
    try {  
        MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");  
        digest.update(decript.getBytes());  
        byte messageDigest[] = digest.digest();  
        // Create Hex String 
        StringBuffer hexString = new StringBuffer();  
        // 字節數組轉換爲 十六進制 數 
            for (int i = 0; i < messageDigest.length; i++) {  
                String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);  
                if (shaHex.length() < 2) {  
                    hexString.append(0);  
                }  
                hexString.append(shaHex);  
            }  
            return hexString.toString();  
   
        } catch (NoSuchAlgorithmException e) {  
            e.printStackTrace();  
        }  
        return "";  
}  
複製代碼

加密算法轉載自：www.open-open.com/lib/view/op…

4. 獲取簽名：

Java代碼

public static void main(String[] args) {  
    //一、獲取AccessToken 
    String accessToken = getAccessToken();  
      
    //二、獲取Ticket 
    String jsapi_ticket = getTicket(accessToken);  
      
    //三、時間戳和隨機字符串 
    String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//隨機字符串 
    String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//時間戳 
      
    System.out.println("accessToken:"+accessToken+"\njsapi_ticket:"+jsapi_ticket+"\n時間戳："+timestamp+"\n隨機字符串："+noncestr);  
      
    //四、獲取url 
    String url="http://www.luiyang.com/add.html";  
    /*根據JSSDK上面的規則進行計算，這裏比較簡單，我就手動寫啦 String[] ArrTmp = {"jsapi_ticket","timestamp","nonce","url"}; Arrays.sort(ArrTmp); StringBuffer sf = new StringBuffer(); for(int i=0;i<ArrTmp.length;i++){ sf.append(ArrTmp[i]); } */  
      
    //五、將參數排序並拼接字符串 
    String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;  
     
    //六、將字符串進行sha1加密 
    String signature =SHA1(str);  
    System.out.println("參數："+str+"\n簽名："+signature);  
}  
複製代碼

該要的都有了，再次回到最開始的config配置，此時應該爲： JS 代碼

wx.config({  
    debug: true, //調試階段建議開啓 
    appId: "APPID",//APPID 
    timestamp: "timestamp",//上面main方法中拿到的時間戳timestamp 
    nonceStr: "nonceStr",//上面main方法中拿到的隨機數nonceStr 
    signature: "signature",//上面main方法中拿到的簽名signature 
    jsApiList: [  
           //全部要調用的 API 都要加到這個列表中 
          "chooseImage"//從本地的相冊、圖庫選擇圖片 
    ]  
});  
複製代碼

注意事項：

  • 以上的時間戳、隨機數、簽名必定要跟main方法中獲取到的一致，不然會報invalid signature錯誤。

  • 另外，這個簽名的有效時間爲7200秒，也就是2個小時，所以當超過兩個小時候，再訪問也會報invalid signature錯誤。

  • 另外還有一個錯誤：invalid url domain

    這個跟生成簽名時用的url有關係，官網的說法是：

    invalid url domain當前頁面所在域名與使用的appid沒有綁定，請確認正確填寫綁定的域名，若是使用了端口號，則配置的綁定域名也要加上端口號（一個appid能夠綁定三個有效域名）

    這個url必須是：「公衆號設置---功能設置----JS接口安全域名」中綁定的三個域名之一

    如果以上的配置沒有問題，且dubug也設置爲了true，那麼再訪問的時候，就會出現一個config:ok，這就說明配置成功了。

後記

jsapi_ticket

生成簽名以前必須先了解一下jsapi_ticket，jsapi_ticket是公衆號用於調用微信JS接口的臨時票據。正常狀況下，jsapi_ticket的有效期爲7200秒，經過access_token來獲取。因爲獲取jsapi_ticket的api調用次數很是有限，頻繁刷新jsapi_ticket會致使api調用受限，影響自身業務，開發者必須在本身的服務全局緩存jsapi_ticket 。

  • 參考如下文檔獲取access_token（有效期7200秒，開發者必須在本身的服務全局緩存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html

  • 用第一步拿到的access_token 採用http GET方式請求得到jsapi_ticket（有效期7200秒，開發者必須在本身的服務全局緩存jsapi_ticket）：api.weixin.qq.com/cgi-bin/tic…

成功返回以下JSON：

Js代碼 收藏代碼

{  
    "errcode":0,  
    "errmsg":"ok",  
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",  
    "expires_in":7200  
}  
複製代碼

得到jsapi_ticket以後，就能夠生成JS-SDK權限驗證的簽名了。

簽名算法

簽名生成規則以下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分） 。對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這裏 須要注意的是全部參數名均爲小寫字符。對string1做sha1加密，字段名和字段值都採用原始值，不進行URL 轉義。

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
複製代碼
    1. 對全部待簽名參數按照字段名的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
複製代碼
    1. 對string1進行sha1簽名，獲得signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項：

一、簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。

二、簽名用的url必須是調用JS接口頁面的完整URL。

三、出於安全考慮，開發者必須在服務器端實現簽名的邏輯。

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