微信调用JSSDK时,验签详细步骤

1.哪个页面需要调用jsskd,则把该页面的地址webUrl传入到后台
2.获取微信ACCESS_TOKEN
3.调用https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi方法,获取ticket
4.本地生成一个时间戳time
    String time = Long.toString(System.currentTimeMillis() / 1000);
5.本地生成一个str
    String str = UUID.randomUUID().toString();
6.将上述四个参数拼接成一个字符串signatureStr
    String signatureStr  = "jsapi_ticket=" + ticket+ "&noncestr=" + str + "&timestamp=" + time+ "&url=" +webUrl;
7.对signatureStr进行sha1签名,得到signature,加密方法:
    1>使用apache的codec jar包对string进行加密,先下载并引入jar包:
  https://mvnrepository.com/artifact/commons-codec/commons-codec/1.10
    2>生成:
    String signature = DigestUtils.shaHex(signatureStr);

8.将time,str,signature这三个参数返回给前台页面

9.依次将这几个参数放入config中,至此验签过程结束
    wx.config({
            debug: false,
            appId: data.data.appid,
            timestamp:time,
            nonceStr:str,
            signature:signature,
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'hideOptionMenu',
                'onMenuShareAppMessage'
            ]
        });
        
10.后续就能直接调用微信JSSDK中的接口了。比如调用分享当前页面到朋友圈
    wx.ready(function(){
            wx.onMenuShareTimeline({
                title : shareTitle, // 分享标题
                link : url, // 分享链接
                imgUrl : 'mall.hanyacapital.com/share.png', // 分享图标
                success : function() {
                    // 用户确认分享后执行的回调函数
                    alert("分享成功");
                },
                cancel : function() {
                    // 用户取消分享后执行的回调函数
                    alert("分享取消");
                }
            });
            //wx.hideOptionMenu();/***隐藏分享菜单****/
        });
            

要在Vue2中接入微信公众号JSSDK,您需要按照以下步骤进行操作: 1. 在公众号后台配置JS接口安全域名,确保您的域名已经添加到了微信公众平台的安全域名列表中。 2. 安装使用`weixin-js-sdk`库,可以通过npm进行安装: ``` npm install weixin-js-sdk ``` 3. 在需要使用JSSDK的组件或页面中引入`weixin-js-sdk`库: ```javascript import wx from 'weixin-js-sdk'; ``` 4. 在组件或页面的`mounted`生命周期钩子函数中初始化JSSDK,并进行相关配置: ```javascript mounted() { this.initWeChatJSSDK(); }, methods: { initWeChatJSSDK() { // 异步请求后端接口获取微信配置信息 axios.get('/api/getWeChatConfig') .then(response => { const { appId, timestamp, nonceStr, signature } = response.data; wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['chooseImage', 'scanQRCode'] // 需要使用的JSSDK接口 }); wx.ready(() => { // JSSDK配置成功后的回调函数 console.log('JSSDK配置成功'); }); wx.error((res) => { // JSSDK配置失败后的回调函数 console.error('JSSDK配置失败', res); }); }) .catch(error => { console.error('获取微信配置信息失败', error); }); } } ``` 5. 在需要使用JSSDK的地方调用对应的接口,比如选择图片接口`chooseImage`: ```javascript methods: { chooseImage() { wx.chooseImage({ count: 1, success: function (res) { // 选择图片成功后的处理逻辑 const localIds = res.localIds; // ... }, fail: function (error) { // 选择图片失败后的处理逻辑 console.error('选择图片失败', error); } }); } } ``` 以上是在Vue2中接入微信公众号JSSDK的基本步骤,您可以根据实际需求进行相应的配置和调用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值