微信開發之——JSSDK,通過config介面注入許可權驗證配置
阿新 • • 發佈:2019-02-04
步驟1:繫結域名
先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。備註:登入後可在“開發者中心”檢視對應的介面許可權。
步驟2:引入js
在需要呼叫JS介面的頁面引入如下JS檔案,(支援https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js請注意,如果你的頁面啟用了https,務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否則將無法在iOS9.0以上系統中成功使用JSSDK. 最好下載JS到本地。
步驟3:通過config介面注入許可權驗證配置
先貼前臺web頁(test.jsp)主要程式碼如下:$(function(){ var url = window.location.href; //ajax注入許可權驗證 $.ajax({ url:"${basePath }JSSDK/ticket.do", dataType: 'json', data: {"url" : url}, complete: function(XMLHttpRequest, textStatus){ }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert("發生錯誤:"+errorThrown); }, success: function(res){ var appId = res.appId; var noncestr = res.noncestr; var jsapi_ticket = res.jsapi_ticket; var timestamp = res.timestamp; var signature = res.signature; wx.config({ debug: true, //開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。 appId: appId, //必填,公眾號的唯一標識 timestamp: timestamp, // 必填,生成簽名的時間戳 nonceStr: noncestr, //必填,生成簽名的隨機串 signature: signature,// 必填,簽名,見附錄1 jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ', 'onMenuShareWeibo','onMenuShareQZone','chooseImage', 'uploadImage','downloadImage','startRecord','stopRecord', 'onVoiceRecordEnd','playVoice','pauseVoice','stopVoice', 'translateVoice','openLocation','getLocation','hideOptionMenu', 'showOptionMenu','closeWindow','hideMenuItems','showMenuItems', 'showAllNonBaseMenuItem','hideAllNonBaseMenuItem'] //必填,需要使用的JS介面列表,所有JS介面列表 見附錄2 }); } }); });
${appId} 是公眾號配置裡獲得。
${jsapi_ticket}進入後臺頁面訪問介面獲得。
url 當前web頁的地址。
jsApiList 需要使用的JS介面列表。
後臺程式碼入下(主要獲取jsapi_ticket以便生成簽名signature,傳遞給前臺):
public void getSignature(HttpServletRequest request, HttpServletResponse response, Model model){ String weburl = request.getParameter("url"); Long timestamp = System.currentTimeMillis()/1000; int noncestr = new Random().nextInt(); AccessTokenUtil accessTokenUtil = new AccessTokenUtil(); String accessToken = accessTokenUtil.getAccessToken();System.out.println("accessToken:" + accessToken); //獲取jsapi_ticket String jsapi_ticket = null; try { String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi"; String responseText = HttpUtil.get(url); jsapi_ticket = null; JSONObject object = JSONObject.fromObject(responseText); if (object.containsKey("ticket")) { jsapi_ticket = object.getString("ticket"); } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } //生成signature List<String> nameList = new ArrayList<String>(); nameList.add("noncestr"); nameList.add("timestamp"); nameList.add("url"); nameList.add("jsapi_ticket"); Map<String, Object> valueMap = new HashMap<String, Object>(); valueMap.put("noncestr", noncestr); valueMap.put("timestamp", timestamp); valueMap.put("url", weburl); valueMap.put("jsapi_ticket", jsapi_ticket); Collections.sort(nameList); String origin = ""; for (int i = 0; i < nameList.size(); i++) { origin += nameList.get(i) + "=" + valueMap.get(nameList.get(i)).toString() + "&"; } origin = origin.substring(0, origin.length() - 1); String signature = sha1(origin); Map<String, Object> map = new HashMap<String, Object>(); map.put("jsapi_ticket", jsapi_ticket); map.put("appId", WXAccount.appid); map.put("signature", signature.toLowerCase()); map.put("timestamp", timestamp.toString()); map.put("noncestr", String.valueOf(noncestr)); response.setContentType("application/json; charset=utf-8"); PrintWriter writer = null; try { writer = response.getWriter(); JSONObject responseObject = JSONObject.fromObject(map); writer.print(responseObject); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally{ writer.flush(); writer.close(); } }
注意:變數timestamp、noncestr 必須作為String型傳遞給後臺,否則 IOS將一直報錯 config:fail
部分摘自微信開發者文件......