目录

微信js-sdk config接口注入权限验证

2017年11月19日 08:50 | 4527次浏览 作者原创 版权保护

根据微信官方文档说明,微信硬件jsapi基础依赖于微信js-sdk,所以想要成功调用微信硬件jsapi接口,必须首先初始化微信js-sdk config接口权限验证,本章节重点介绍如何成功调用微信js-sdk config接口注入权限验证的配置。

config接口注入权限配置的参数timestamp,nonceStr,signature已经在 https://www.vxzsk.com/302.html  中详细介绍,不明白的读者可前往仔细研读。


新建springMVC Controller一个方法 

@RequestMapping(value="/wxJsSdkConfig")
	public ModelAndView wxJsSdkConfig(HttpServletRequest request,HttpServletResponse response){
		String url = request.getRequestURL()+"?"+request.getQueryString();
		System.out.println("请求地址"+url);
		
		String jsapiTicket = JsapiTicketUtil.getJSApiTicket();
		Map<String,String> map = WeixinUtil.sign(jsapiTicket,  url);
		
		request.setAttribute("timestamp", map.get("timestamp"));
		request.setAttribute("nonceStr", map.get("nonceStr"));
		request.setAttribute("signature", map.get("signature"));
		request.setAttribute("appId", AppConst.APP_ID);
		
		return new ModelAndView("/weixin/device/jssdkConfig");
	}

1,变量jsapiTicket的获取请参考https://www.vxzsk.com/298.html 

2,WeixinUtil中的sign方法如下:

/***
	 * 获取界面调用jsapi的所需参数
	 * @param jsapi_ticket 凭据
	 * @param url 界面请求地址
	 * @return V型知识库 www.vxzsk.com
	 */
	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);
        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);
    }

3, AppConst.APP_ID的值其实是一个固定值,替换为自己公众号中的appid即可。


新建jssdkConfig.jsp页面

上面controller方法中跳转到jssdkConfig.jsp界面,在此界面咱们初始化微信jssdk并成功注入config接口配置

<%@ 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>
    <base href="<%=basePath%>">
     
    <title>微信jsapi测试-V型知识库</title>
    <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> 
     
  </head>
   
  <body>
   
  <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
  <br>
     <p>timestamp:${ timestamp}</p>  
     <p>nonceStr:${ nonceStr}</p>  
     
     <p>signature:${ signature}</p>  
     <p>appId:${ appId}</p>  
    
   
   
  <script type="text/javascript">
   
  wx.config({  
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。  
    appId: '${appId}', // 必填,公众号的唯一标识  
    timestamp: '${ timestamp}' , // 必填,生成签名的时间戳  
    nonceStr: '${ nonceStr}', // 必填,生成签名的随机串  
    signature: '${ signature}',// 必填,签名,见附录1  
    jsApiList: ['chooseImage','getLocation','openLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2  
});  
   
wx.ready(function(){  
    alert("ready");  
});  
   
wx.error(function (res) {
  alert("调用微信jsapi返回的状态:"+res.errMsg);
});
   
 
  </script>
    
  </body>
</html>

运行上述代码,请求路径为 https://www.vxzsk.com/wxJsSdkConfig.do?openid=xxxxxxx 如果请求地址没有参数,代码中变量url的值要更改为https://www.vxzsk.com/wxJsSdkConfig.do 否则权限验证报error valid错误。 效果如下


如果成功调用,界面会弹出config:ok消息,如果失败,会弹出config:fail消息。


至此,微信jssdk已经成功调用,接下来咱们就可以使用微信硬件jsapi的接口啦,敬请期待!

此文章本站原创,地址 https://www.vxzsk.com/312.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程