一、本节要点
1.获取jsapi_ticket
//2.获取getJsapiTicket的接口地址,有效期为7200秒
private static final String GET_JSAPITICKET_URL="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi"; /**
* @desc :2.获取JsapiTicket
*
* @param accessToken 有效凭证
* @return
* @throws Exception String
*/
public static String getJsapiTicket(String accessToken) throws Exception {
//1.获取请求url
String url=GET_JSAPITICKET_URL.replace("ACCESS_TOKEN", accessToken); //2.发起GET请求,获取返回结果
JSONObject jsonObject=HttpHelper.doGet(url);
logger.info("jsonObject:"+jsonObject.toJSONString()); //3.解析结果,获取accessToken
String jsapiTicket="";
if (null != jsonObject) {
//4.错误消息处理
if (jsonObject.getInteger("errcode")!=null && 0 != jsonObject.getInteger("errcode")) {
int errCode = jsonObject.getInteger("errcode");
String errMsg = jsonObject.getString("errmsg");
throw new Exception("error code:"+errCode+", error message:"+errMsg);
//5.成功获取jsapiTicket
}else {
jsapiTicket=jsonObject.getString("ticket");
}
} return jsapiTicket;
}
2.JS-SDK 使用权限签名算法
/**
* @desc :4.获取前端jsapi需要的配置参数
*
* @param request
* @return String
*/
public static String getJsapiConfig(HttpServletRequest request){ //1.准备好参与签名的字段
//1.1 url
/*
*以http://localhost/test.do?a=b&c=d为例
*request.getRequestURL的结果是http://localhost/test.do
*request.getQueryString的返回值是a=b&c=d
*/
String urlString = request.getRequestURL().toString();
String queryString = request.getQueryString();
String queryStringEncode = null;
String url;
if (queryString != null) {
queryStringEncode = URLDecoder.decode(queryString);
url = urlString + "?" + queryStringEncode;
} else {
url = urlString;
} //1.2 noncestr
String nonceStr=UUID.randomUUID().toString(); //随机数
//1.3 timestamp
long timeStamp = System.currentTimeMillis() / 1000; //时间戳参数 String signedUrl = url; String accessToken = null;
String ticket = null; String signature = null; //签名 try {
//1.4 jsapi_ticket
accessToken=getAccessToken(Env.APP_ID, Env.APP_SECRET);
ticket=getJsapiTicket(accessToken); //2.进行签名,获取signature
signature=getSign(ticket,nonceStr,timeStamp,signedUrl); } catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} logger.info("accessToken:"+accessToken);
logger.info("ticket:"+ticket);
logger.info("nonceStr:"+nonceStr);
logger.info("timeStamp:"+timeStamp);
logger.info("signedUrl:"+signedUrl);
logger.info("signature:"+signature);
logger.info("appId:"+Env.APP_ID); String configValue = "{signature:'" + signature + "',nonceStr:'" + nonceStr + "',timeStamp:'"
+ timeStamp + "',appId:'" + Env.APP_ID + "'}";
logger.info("configValue:"+configValue); return configValue;
} /**
* @desc : 4.1 生成签名的函数
*
* @param ticket jsticket
* @param nonceStr 随机串,自己定义
* @param timeStamp 生成签名用的时间戳
* @param url 需要进行免登鉴权的页面地址,也就是执行dd.config的页面地址
* @return
* @throws Exception String
*/ public static String getSign(String jsTicket, String nonceStr, Long timeStamp, String url) throws Exception {
String plainTex = "jsapi_ticket=" + jsTicket + "&noncestr=" + nonceStr + "×tamp=" + timeStamp + "&url=" + url;
System.out.println(plainTex);
try {
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(plainTex.getBytes("UTF-8"));
return byteToHex(crypt.digest());
} catch (NoSuchAlgorithmException e) {
throw new Exception(e.getMessage());
} catch (UnsupportedEncodingException e) {
throw new Exception(e.getMessage());
}
} /**
* @desc :4.2 将bytes类型的数据转化为16进制类型
*
* @param hash
* @return
* String
*/
private static String byteToHex(byte[] hash) {
Formatter formatter = new Formatter();
for (byte b : hash) {
formatter.format("%02x", new Object[] { Byte.valueOf(b) });
}
String result = formatter.toString();
formatter.close();
return result;
}
2.1 签名生成规则
(1)参与签名的字段包括:
noncestr(随机字符串),
有效的jsapi_ticket,
timestamp(时间戳),
url(当前网页的URL,不包含#及其后面部分) 。
(2)对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式 (即 key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
(3)对string1进行sha1签名,得到signature:
2.2 签名算法应用实例
(1)待签名参数:
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com
(2)字典序
string1=jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-
HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com
(3)sha1加密
signature=sha1(string1)
3.JS-SDK使用步骤
(1)绑定域名
测试号:
(2)引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
(3)通过config接口注入权限验证配置
//1.jsapi签名校验
wx.config({
beta: true,// 必须这么写,否则在微信插件有些jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: _config.appId, // 必填,公众号的唯一标识
timestamp: _config.timeStamp, // 必填,生成签名的时间戳
nonceStr: _config.nonceStr, // 必填,生成签名的随机串
signature: _config.signature,// 必填,签名,见附录1
jsApiList: [ 'checkJsApi', 'onMenuShareAppMessage',
'onMenuShareWechat', 'startRecord', 'stopRecord',
'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice',
'uploadVoice', 'downloadVoice', 'chooseImage',
'previewImage', 'uploadImage', 'downloadImage',
'getNetworkType', 'openLocation', 'getLocation',
'hideOptionMenu', 'showOptionMenu', 'hideMenuItems',
'showMenuItems', 'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem', 'closeWindow', 'scanQRCode',
'previewFile', 'openEnterpriseChat',
'selectEnterpriseContact','chooseInvoice' ]// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
(4)通过ready接口处理成功验证
(5) 通过error接口处理失败验证
//2.jsapi签名校验失败后执行error
wx.error(function(err){
alert('wx error: ' + JSON.stringify(err));
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
4.图片上传
4.1 图片上传的流程
(1)使用 jssdk 上传图片到微信服务器,返回图片对应的mediaId( 即 serverId)
//2.2 上传图片
var images = {
localId : [],
serverId : []
};
$("#uploadImg").click(function(){
//2.2.1拍照或从手机相册中选图
wx.chooseImage({
success : function(res) {
images.localId = res.localIds;
alert('已选择 ' + res.localIds.length + ' 张图片');
//2.2.2 上传图片
uploadImg();
}
});
}); // 2.2.2 上传图片
function uploadImg() {
if (images.localId.length == 0) {
alert('请先使用 chooseImage 接口选择图片');
return;
}
var i = 0, length = images.localId.length;
images.serverId = []; function upload() {
wx.uploadImage({
localId : images.localId[i],
success : function(res) {
i++;
alert('已上传:' + i + '/' + length);
images.serverId.push(res.serverId);
//将serverId上传至服务器
alert("ajax请求即将执行--"); $.ajax({
type : "POST",
url : "http://se9mxs.natappfree.cc/weixin_gz/uploadimg",
data : {
serverId : res.serverId
},
dataType : "text",
success : function(data) {
alert(data);
} }); if (i < length) {
upload();
}
},
fail : function(res) {
alert(JSON.stringify(res));
}
});
}
upload();
};
(2)使用素材管理接口,根据 mediaId 从微信服务器将图片下载至服务器本地。参见:Java微信公众平台开发_06_素材管理
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String mediaId=request.getParameter("serverId");
System.out.println("serverId:"+mediaId); try {
String accessToken=AuthHelper.getAccessToken(Env.APP_ID, Env.APP_SECRET); //String savePath=System.getProperty("user.dir").replaceAll("\\\\", "/")+"/WebContent/img/"+mediaId+".png";
String fileDir=request.getSession().getServletContext().getRealPath("").replaceAll("\\\\", "/")+"/img/";
System.out.println("fileDir:"+fileDir); //2.调用业务类,获取临时素材
TempMaterialService.getTempMaterial(accessToken, mediaId, fileDir); } catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} PrintWriter out = response.getWriter();
out.print("HHHHHHHHHH");
out.close();
out = null; }
二、代码实现
1.前端页面—uploadImg.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSSDK之上传图片</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript">
var _config =
<%=com.ray.weixin.gz.util.AuthHelper.getJsapiConfig(request)%>
;
</script> <script type="text/javascript" src="js/auth.js"></script> </head>
<body> <div align="center">
<img id="userImg" alt="头像" src="">
</div> <div align="center">
<span>UserName:</span>
<div id="userName" style="display: inline-block"></div>
</div> <div align="center">
<span>UserId:</span>
<div id="userId" style="display: inline-block"></div>
</div> <div align="center">
<span class="desc">是否验证成功</span>
<button class="btn btn_primary" id="yanzheng">验证</button>
</div> <div align="center">
<span class="desc">测试按钮</span>
<button class="btn btn_primary" id="ceshi">测试</button>
</div> <div align="center">
<span class="desc">上传图片按钮</span>
<button class="btn btn_primary" id="uploadImg">上传图片</button>
</div> <div align="center">
<span class="desc">拍照上传图片按钮</span>
<button class="btn btn_primary" id="uploadImgFromCamera">拍照上传</button>
</div> <div align="center">
<span class="desc">扫码按钮</span>
<button class="btn btn_primary" id="qrcode" >扫码</button>
</div>
</body>
</html>
auth.js
//1.jsapi签名校验
wx.config({
beta: true,// 必须这么写,否则在微信插件有些jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: _config.appId, // 必填,公众号的唯一标识
timestamp: _config.timeStamp, // 必填,生成签名的时间戳
nonceStr: _config.nonceStr, // 必填,生成签名的随机串
signature: _config.signature,// 必填,签名,见附录1
jsApiList: [ 'checkJsApi', 'onMenuShareAppMessage',
'onMenuShareWechat', 'startRecord', 'stopRecord',
'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice',
'uploadVoice', 'downloadVoice', 'chooseImage',
'previewImage', 'uploadImage', 'downloadImage',
'getNetworkType', 'openLocation', 'getLocation',
'hideOptionMenu', 'showOptionMenu', 'hideMenuItems',
'showMenuItems', 'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem', 'closeWindow', 'scanQRCode',
'previewFile', 'openEnterpriseChat',
'selectEnterpriseContact','chooseInvoice' ]// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
}); //2.jsapi签名校验成功后执行ready
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 //2.1 提示jsapi签名验证成功
$("#yanzheng").html("验证成功"); $("#ceshi").click(function(){
alert("ceshiaaa"); }); $("#checkJsApi").click(function(){
wx.checkJsApi({
jsApiList: [ 'checkJsApi', 'onMenuShareAppMessage',
'onMenuShareWechat', 'startRecord', 'stopRecord',
'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice',
'uploadVoice', 'downloadVoice', 'chooseImage',
'previewImage', 'uploadImage', 'downloadImage',
'getNetworkType', 'openLocation', 'getLocation',
'hideOptionMenu', 'showOptionMenu', 'hideMenuItems',
'showMenuItems', 'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem', 'closeWindow', 'scanQRCode',
'previewFile', 'openEnterpriseChat',
'selectEnterpriseContact','chooseInvoice' ], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
}); }); //2.2 上传图片
var images = {
localId : [],
serverId : []
};
$("#uploadImg").click(function(){
//2.2.1拍照或从手机相册中选图
wx.chooseImage({
success : function(res) {
images.localId = res.localIds;
alert('已选择 ' + res.localIds.length + ' 张图片');
//2.2.2 上传图片
uploadImg();
}
});
}); // 2.2.2 上传图片
function uploadImg() {
if (images.localId.length == 0) {
alert('请先使用 chooseImage 接口选择图片');
return;
}
var i = 0, length = images.localId.length;
images.serverId = []; function upload() {
wx.uploadImage({
localId : images.localId[i],
success : function(res) {
i++;
alert('已上传:' + i + '/' + length);
images.serverId.push(res.serverId);
//将serverId上传至服务器
alert("ajax请求即将执行--"); $.ajax({
type : "POST",
url : "http://se9mxs.natappfree.cc/weixin_gz/uploadimg",
data : {
serverId : res.serverId
},
dataType : "text",
success : function(data) {
alert(data);
} }); if (i < length) {
upload();
}
},
fail : function(res) {
alert(JSON.stringify(res));
}
});
}
upload();
}; //2.3 扫一扫
$("#qrcode").click(function(){
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
alert(result); },
fail:function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
alert(result); }
}); }); //2.4 拉起发票列表
//注意,调用此接口时,config接口必须传入beta参数。
$("#showInvoice").click(function(){
alert("timestamp:"+invoice_config.timestamp);
alert("nonceStr:"+invoice_config.nonceStr);
alert("signType:"+invoice_config.signType);
alert("cardSign:"+invoice_config.cardSign); wx.invoke('chooseInvoice', {
'timestamp': invoice_config.timestamp, // 卡券签名时间戳
'nonceStr' : invoice_config.nonceStr, // 卡券签名随机串
'signType' : invoice_config.signType, // 签名方式,默认'SHA1'
'cardSign' : invoice_config.cardSign, // 卡券签名
}, function(res) {
// 这里是回调函数
alert("aaaaaa");
alert(JSON.stringify(res)); // 返回的结果
}); }); }); //2.jsapi签名校验失败后执行error
wx.error(function(err){
alert('wx error: ' + JSON.stringify(err));
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
2.web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name>weixin_gz</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list> <!--微信公众号回调-->
<servlet>
<servlet-name>weixin</servlet-name>
<servlet-class>com.ray.weixin.gz.controller.WeiXinServlet</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>weixin</servlet-name>
<url-pattern>/weixin</url-pattern>
</servlet-mapping>
<!-- 微信公众号回调--> <servlet>
<description></description>
<display-name>uploadimg</display-name>
<servlet-name>uploadimg</servlet-name>
<servlet-class>com.ray.weixin.gz.controller.UploadImgServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>uploadimg</servlet-name>
<url-pattern>/uploadimg</url-pattern>
</servlet-mapping> </web-app>
3.上传图片servlet—UploadImgServlet
package com.ray.weixin.gz.controller; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ray.weixin.gz.config.Env;
import com.ray.weixin.gz.service.tempmaterial.TempMaterialService;
import com.ray.weixin.gz.util.AuthHelper; /**
* Servlet implementation class UploadImgServlet
*/
public class UploadImgServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public UploadImgServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String mediaId=request.getParameter("serverId");
System.out.println("serverId:"+mediaId); try {
String accessToken=AuthHelper.getAccessToken(Env.APP_ID, Env.APP_SECRET); //String savePath=System.getProperty("user.dir").replaceAll("\\\\", "/")+"/WebContent/img/"+mediaId+".png";
String fileDir=request.getSession().getServletContext().getRealPath("").replaceAll("\\\\", "/")+"/img/";
System.out.println("fileDir:"+fileDir); //2.调用业务类,获取临时素材
TempMaterialService.getTempMaterial(accessToken, mediaId, fileDir); } catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} PrintWriter out = response.getWriter();
out.print("HHHHHHHHHH");
out.close();
out = null; } }
4.素材管理业务类—TempMaterialService.java
package com.ray.weixin.gz.controller; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ray.weixin.gz.config.Env;
import com.ray.weixin.gz.service.tempmaterial.TempMaterialService;
import com.ray.weixin.gz.util.AuthHelper; /**
* Servlet implementation class UploadImgServlet
*/
public class UploadImgServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public UploadImgServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String mediaId=request.getParameter("serverId");
System.out.println("serverId:"+mediaId); try {
String accessToken=AuthHelper.getAccessToken(Env.APP_ID, Env.APP_SECRET); //String savePath=System.getProperty("user.dir").replaceAll("\\\\", "/")+"/WebContent/img/"+mediaId+".png";
String fileDir=request.getSession().getServletContext().getRealPath("").replaceAll("\\\\", "/")+"/img/";
System.out.println("fileDir:"+fileDir); //2.调用业务类,获取临时素材
TempMaterialService.getTempMaterial(accessToken, mediaId, fileDir); } catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} PrintWriter out = response.getWriter();
out.print("HHHHHHHHHH");
out.close();
out = null; } }
其他的同上一节