微信JSSDK接入Java版--步驟及問題處理和解決

時間  2019-11-13
標籤 微信 jssdk java 步驟 問題 處理 解決 欄目 Java 简体版
原文   原文鏈接

點擊查看自定義分享朋友圈、轉發朋友、獲取網絡狀態、地理位置、掃一掃等JSSDK接口功能

好多圖片都不知道爲何顯示成開源中國LOGO了。我本身也沒保存。非常尷尬javascript

微信JSSDKJava版接入--步驟及問題處理和解決php

能夠關注測試微信號，查看效果  服務器是我的的。請不要惡意攻擊。html

我的訂閱號java

我的小程序，能夠微信掃一掃看看。謝謝支持jquery

JSSDK使用步驟json

http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 官網文檔小程序

步驟一：綁定域名api

注意：前面不須要加http安全

步驟二：引入JS文件服務器

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用搖一搖周邊功能，請引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
備註：支持使用 AMD/CMD 標準模塊加載方法加載

jquery.js自行下載到本身的工程引入便可。

<script src="/js/jquery.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

步驟三：經過config接口注入權限驗證配置

本做者是經過菜單的方法請求一個Servlet。來跳轉到頁面。進行config接口注入。跳轉的時候獲取一些必要的參數。具體java代碼以下

getJsapiTicket sign 方法會列出

public class SaoServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	/**
	 * JSSDK接入的Servlet。將一些參數傳遞到頁面進行調用
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		 JsapiTicket jt=WeixinUtil.getJsapiTicket(Constants.appId,Constants.appSecret);
		 String ticket=jt.getTicket();
		 StringBuffer url=request.getRequestURL();
		 Map<String, String> t= Sign.sign(ticket, url.toString());
		 request.setAttribute("sign",t);
		 request.getRequestDispatcher("/bill_RichScan.jsp").forward(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
			doGet(request, response);
	}
}

JsapiTicket代碼

public class JsapiTicket {
	private String ticket;
	private String expiresIn;
	public String getTicket() {
		return ticket;
	}
	public void setTicket(String ticket) {
		this.ticket = ticket;
	}
	public String getExpiresIn() {
		return expiresIn;
	}
	public void setExpiresIn(String expiresIn) {
		this.expiresIn = expiresIn;
	}
}

http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign微信 JS 接口前面校驗工具網址

WeixinUtil.getJsapiTicket 代碼 這一步是獲取 簽名憑證jsapi_ticket

public final static String js_api_ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
	
//access_token httprequest方法再也不說明
public static JsapiTicket getJsapiTicket(String appid, String appsecret){
		if(Constants.ACCESS_TOKEN==null){
			Constants.ACCESS_TOKEN =WeixinUtil.getAccessToken(appid, appsecret);
		}
		JsapiTicket ticket=new JsapiTicket();
		String requestUrl = js_api_ticket_url.replace("ACCESS_TOKEN",Constants.ACCESS_TOKEN.getToken());
		JSONObject jsonObject =WeixinUtil.httpRequest(requestUrl, "GET", null);
		if(jsonObject.getString("errcode").equals("0")){
			ticket.setTicket(jsonObject.getString("ticket"));
			ticket.setExpiresIn(jsonObject.getString("expires_in"));
		}else{
			log.error("error");
		}
		return ticket;

	}

Sign代碼是官網提供的一個工具類。要注意官網提供的裏面沒有appid的屬性

//官網提供的工具類 須要本身增長appId
public class Sign {
    public static Map<String, String> sign(String jsapi_ticket, String url) {
		Map<String, String> ret = new HashMap<String, String>();
		String nonce_str = create_nonce_str();
		String timestamp = create_timestamp();
		String string1;
		String signature = "";
		// 注意這裏參數名必須所有小寫，且必須有序
		string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str
				+ "&timestamp=" + timestamp + "&url=" + url;
		System.out.println(string1);
		try {
			MessageDigest crypt = MessageDigest.getInstance("SHA-1");
			crypt.reset();
			crypt.update(string1.getBytes("UTF-8"));
			signature = byteToHex(crypt.digest());
		} catch (NoSuchAlgorithmException e) {
			e.printStackTrace();
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		ret.put("url", url);
		//注意這裏 要加上本身的appId
		ret.put("appId", Constants.appId);
		ret.put("jsapi_ticket", jsapi_ticket);
		ret.put("nonceStr", nonce_str);
		ret.put("timestamp", timestamp);
		ret.put("signature", signature);

		return ret;
	}

    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash)
        {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }
    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }
    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }
}

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

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

跳轉驗證config的JSP頁面代碼

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	 <title>接入微信JSSDK</title>
    <base href="<%=basePath%>">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
  <head>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <script src="<%=path %>/js/jquery.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
	$(function(){
		var appId=$("#appId").val();
		var nonceStr=$("#nonceStr").val();
		var timestamp=$("#timestamp").val();
		var signature=$("#signature").val();
				wx.config({
			      debug: true,
			      appId: appId,
			      timestamp: timestamp,
			      nonceStr: nonceStr,
			      signature: signature,
			      jsApiList: [
			        'checkJsApi',
			        'chooseImage'
			      	]
				  });	
		
		    //在這裏寫微信掃一掃的接口
		     $("#sao").bind("click",function(){
		    	 wx.chooseImage({
		    		    count: 9, // 默認9
		    		    sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
		    		    sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
		    		    success: function (res) {
		    		        var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
		    		    }
		    		});
		     
		     });
		}
		);
	wx.ready(function () {
  // 1 判斷當前版本是否支持指定 JS 接口，支持批量判斷
 // alert("1230k"); 
    });
    
 wx.error(function (res) {
  alert(res.errMsg);
});
    
</script>
</head>
<body>
     <input type="button" id="sao" value="測試"/>
     <input id="appId"  type="hidden" value="${sign.appId }"/>
     <input id="url"  type="hidden" value="${sign.url}"/>
     <input id="tk"  type="hidden" value="${sign.jsapi_ticket }"/>     
	<input id="nonceStr" type="hidden" value="${sign.nonceStr }"/>
	<input id="timestamp" type="hidden" value="${sign.timestamp }"/>
	<input id="signature" type="hidden" value="${sign.signature }"/>
  </body>
</html>

基本須要接入的配置文件和參數都準備OK。那就先直接在PC訪問Servlet。查看參數是否完整及參數是否一致。

PC端訪問使用Firefox的firebug 返回如圖中的數據

注意：遇到的錯誤解決  

1.invalid url domain 修改JS安全域名 不加http  可是若是有端口就加上端口 官網文檔寫的只支持 80 和 https的443

2.invalid signature 看是否與下圖的參數一致。是否都有值，並且字母注意大小寫格式。

   errmsg scanQRCode the permission is offline verifying 提示錯誤信息

3.the permission value is offline verifying  這個錯誤提示在蘋果上這樣顯示 其實就是沒有權限纔會有這個錯誤

4.permission denied  這個錯誤提示在安卓上這樣顯示 其實就是沒有權限纔會有這個錯誤

5. config:fail  確定是有以下圖參數爲空了。

以上是本人在接入遇到的問題。

根據JSAPITICKET生成的字符串。與微信返回的數據在簽名校驗工具網址進行對比加密後的signature是否一致

一致表明接入沒有問題。

截圖看下具體的效果。測試只調用了選擇照片的接口進行測試。

若是以爲寫的還行。能夠支持下博主。微信支付和微信紅包微信卡券後續也會實際寫教程哦 服務器有限不要惡意攻擊哦！

                      

我的微博 http://weibo.com/zxshuai319 

我的博客 http://my.oschina.net/xshuai/blog 

公開QQ  783021975 不說具體問題。一概不回覆

https://passport.qcloud.com/index.php?s_url=http%3A%2F%2Fbuy.qcloud.com%2Fcvm

原味地址:http://my.oschina.net/xshuai/blog/726459

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