前端JSSDK自定义分享

直接上代码

官方文档：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2

注：实现此功能需要后台道友的配合；
注：官方明确给出说明：（出于安全考虑，开发者必须在服务器端实现签名的逻辑。）说三遍！
注：官方明确给出说明：（出于安全考虑，开发者必须在服务器端实现签名的逻辑。）说三遍！
注：官方明确给出说明：（出于安全考虑，开发者必须在服务器端实现签名的逻辑。）说三遍！
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210208173719495.png)

1）前端代码（直接copy到页面中）：

<!--引入JSSDK-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	let tempHref = window.location.href;         // 当前网页的URL
	let tempHash = window.location.hash;         // 获取url #及其后面部分
	let tempUrl = tempHref.replace(tempHash,''); // 获取不包含#及其后面部分的url
	let APPID = '***'; // 登录公众号》开发》基本设置（开发者ID(AppID)）// 也可以让后台接口返回

    // 访问后台道友的接口获取签名等信息 timestamp nonceStr signature 
	$.get('http://***/getSignatureMsg?url=' + tempUrl,function(res){
		timestamp = res.data.timeStamp;
		nonceStr = res.data.nonceStr;
		signature = res.data.signature;
		wxConfig();
	});
	
	function wxConfig(){
		wx.config({
		  debug: false,         // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		  appId: APPID,         // 必填，公众号的唯一标识
		  timestamp: timestamp, // 必填，生成签名的时间戳
		  nonceStr: nonceStr,   // 必填，生成签名的随机串
		  signature: signature, // 必填，签名
		  // *jsApiList 必填，需要使用的JS接口列表
		  // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容 updateAppMessageShareData
		  // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容 updateTimelineShareData
		  // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）onMenuShareTimeline
		  // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）onMenuShareAppMessage
		  // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）onMenuShareQQ
		  // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口 onMenuShareWeibo
		  // 获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）onMenuShareQZone
		  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] 
		});
	}
	
	wx.ready(function () { //需在用户可能点击分享按钮前就先调用
	  wx.updateAppMessageShareData({ 
		title: pageTitle,  //分享标题
		desc: tempHref,    //分享描述
		link: tempHref,    //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl: '',        //分享图标
		success: function () { //alert('分享成功'); },
		success: function () { //alert('分享成功'); }
	  });
	});
	
</script>

2）后端生成JS-SDK权限签名算法（官方传送门）：

☆ 注意事项

1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2. timestamp时间戳控制到秒级别 10位
3. 签名用的url必须是调用JS接口页面的完整URL。
4. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。

jsapi_ticket

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

1. 参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：
   传送门: 公众平台的API调用所需的access_token的使用及生成方式说明.
2. 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回如下JSON：

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

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

签名算法

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

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed