H5网页自定义微信分享朋友圈等接口

H5网页自定义微信分享朋友圈等接口

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

绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

前端网页中引入js 文件

http://res.wx.qq.com/open/js/jweixin-1.4.0.js
https网站需要引入以下
http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

权限验证的config 接口

在前端网页中引用：

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

签名验证

下面介绍验证的逻辑，包括服务器端和前端：

1. 根据公众号的appId 和appSecret 先从微信服务器获取access_token ，且需要全局缓存，每7200 秒重新获取一次。
   以下文档获取access_token
   https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

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
}

4. 根据jsapi_ticket 和其他的随机字符串、时间戳、url 地址等运行微信提供的算法，生成signature。

	noncestr=Wm3WZYTPz0wzccnW  //随机字符串，由开发者设置传入， 加强安全性（若不填写可能被重放请求） 。随机字符串，不长于32位。推荐使用大小写字母和数字，不同添加请求的nonce须动态生成，若重复将会导致领取失败。
	jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg // 上一个接口返回的ticket
	timestamp=1414587457   //时间戳，商户生成从1970年1月1日00:00:00至今的秒数,即当前的时间,且最终需要转换为字符串形式;由商户生成后传入,不同添加请求的时间戳须动态生成，若重复将会导致领取失败！。
	url=http://mp.weixin.qq.com?params=value  //必须是动态的 前端传递

7. 进行算法处理对所有待签名参数按照字段名的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

9. 对string1进行sha1签名，得到signature：

	0f9de62fce790f9a083d5c99e95740ceb90c27ed

前端代码

  function ticket(){
            let url = location.href.split('#')[0];  //获取当前地址
            console.log(encodeURIComponent(url))  // 进行encodeURIComponent编码
            $.ajax({
                url:'invite/jsapi_ticket/?url='+encodeURIComponent(url),
                type:'get',
                dataType:'json',
                success:function(res){
                    console.log(res)
                    if(res.status == 200){
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: '您的appId', // 必填，公众号的唯一标识
                            timestamp:res.data.now, // 必填，生成签名的时间戳
                            nonceStr: res.data.words, // 必填，生成签名的随机串
                            signature: res.data.jsapi_ticket,// 必填，签名
                            jsApiList: ['updateAppMessageShareData','updateTimelineShareData','onMenuShareTimeline'], // 必填，需要使用的JS接口列表
                            success:function(res){
                                console.log("检查通过:",JSON.stringify(res))
                            },
                            fail:function(res){
                                console.log("检查失败:",JSON.stringify(res))
                            },
                            complete:function(res){
                                console.log("检查结束",res)
                            },
                            error:function(e){
                                console.error('检查错误:',e)
                            }
                        });
                    }
                }
            })
        }
		
    

11. 前端网页通过微信自带浏览器打开时，微信肯定会通过我们给出的签名、随机字符串、时间戳等信息自己运行一篇算法，如果结果一致，那接下来就会在wx.ready

wx.ready(function () {
            var obj = {
                title: '注册起范儿,立即领取2000范儿币', // 分享标题
                desc: '范儿币范儿币范儿币范儿币范儿币范儿币范儿币范儿币！', // 分享描述
                link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，
                // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；
                imgUrl: 'https://oss.getfan.cn/images/yCFQWznRZm.jpg', // 分享图标
                fail: function (res) {
                    // alert(JSON.stringify(res));
                }
            };
             //监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
            wx.updateAppMessageShareData(obj);
            //监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
            wx.updateTimelineShareData(obj);
       })

12. 接口中处理之后逻辑了。如果结果不一致，将会调用wx.error 接口。 验证成功，即可调用微信自带的各种接口如分享、扫一扫等。

    wx.error(function(res){
     	console.log('error');
        console.log(res);       
   });