微信公众号开发(七)JSSDK-监听分享朋友圈事件

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

实现步骤

一:绑定域名
在公众号管理页面,设置JS接口安全域名,表示该域名下的所有页面,都拥有使用JSSDK的权限。

二:页面中引入JS文件

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

三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用JSSDK的相关API。

在页面中添加这段js代码

参数介绍
debug:true为开启调试模式,调用的所有api的返回值会在客户端alert出来,若是生产环境则设置为false
appId:必填,公众号的唯一标识
timestamp:必填,时间戳
nonceStr:必填,随机生成的字符串
signature:必填,根据timestamp与nonceStr与jsapi_ticket按照某种算法生成的签名
jsApiList:必填,需要使用的JS接口权限,如:使用分享朋友圈接口,则填入onMenuShareTimeline,其他接口的名称可以在开发文档中找到。

jsapi_ticket:

生成签名signature还需要一个叫jsapi_ticket的参数,jsapi_ticket是公众号用于调用微信JS接口的临时票据,可以通过基础接口的access_token来获取,有效期为7200秒,调用次数有限,所以在后台也需要全局缓存jsapi_ticket。

获取jsapi_ticket的接口:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

代码:

//获取JSSDk的接口地址
   public static final String GET_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";

/**
    * 获取JSTicket
    */
   public static void getJsapi_ticket() {
	   //发送请求到指定的接口
	   String result=HttpUtil.sendGet(GET_TICKET_URL.replace("ACCESS_TOKEN",getAccessToken()),"");
	   System.out.println("JsTicket="+result);
   }

getAccessToken是之前开发教程(四)已经实现好的,有需要的可参考

成功即返回如下JSON:

{
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHFKA",
    "expires_in":7200
}

获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。

签名算法:
规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。最后对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。

注意事项:
1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2.签名用的url必须是调用JS接口页面的完整URL。
3.出于安全考虑,开发者必须在服务器端实现签名的逻辑。

验证签名算法是否正确,可以打开https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

当在页面引入微信js之后,用户跳转到页面的时候我们发送ajax请求,将当前页面的url传递到后台获取signature

页面请求代码:

后台Controller作用是拿到最终的签名signature,代码如下:

后台获取到signature之后前台取出来进行config注入:

	<script>
		$(function() {
			//进页面之后ajax发送后台生成签名,前台拿到签名进行config注入
			// alert(window.location.href);
			$.ajax({
				type : 'post',
				dataType : 'json',
				data : {
					'url' : window.location.href
				},
				url : '../getJSSDKSignature',
				success : function(data) {
					if (data.code == '200') {
						// alert(data.sn+";"+data.appid+";"+data.timestamp+";"+data.noncestr);
						//进行config注入工作
						wx.config({
							debug : false,
							appId : data.appid,
							timestamp : data.timestamp,
							nonceStr : data.noncestr,
							signature : data.sn,
							jsApiList : [ 'onMenuShareTimeline' ]
						//调用的接口
						});
					}
				}
			})
		})
				wx.ready(function() {
					// 在页面加载时就调用相关接口,如:分享到朋友圈、获取位置信息等接口
					wx.checkJsApi({
						jsApiList : [ 'onMenuShareTimeline' ],
						success : function(res) {
							if (res.errMsg == 'checkJsApi:ok') {
								//分享到朋友圈接口
								wx.onMenuShareTimeline({
									title : '抽奖活动', // 分享时的标题
									link : 'http://ansheng.nat300.top/getUserInfo.html', // 分享时的链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									//用户确认分享后执行的回调函数
									imgUrl : 'https://imgsrc.baidu.com/baike/pic/item/f3d3572c11dfa9ec47272dce6cd0f703908fc1da.jpg', // 分享时显示的图标
									success : function() {
										//给用户添加1次抽奖机会
										alert("恭喜你,分享成功");
									},
									//用户取消分享后执行的回调函数
									cancel : function() {
										alert("取消分享");
									}
								});
							} else {
								alert("失败了.......");
							}
						}
					});
				});
		wx.error(function(res) {
			alert("error");
		});
	</script>

效果图: 

总结:1.获取Access_Token,根据Access_Token获取jsapi_ticket,根据jsapi_ticket通过算法整合拿到签名Signature,然后cinfig注入验证,验证成功可调用JSSDK方法

 

感兴趣的小伙伴可以扫码关注下公众号哦,公众号会分享高质量的技术文章哦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酒书

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值