微信公众号验签过程详解--前端和后端的操作

本人为后台java开发

一,需求:微信分享

二,在开发过程中有几点疑问

1.验签流程:后台生成签名,时间戳,随机数给前端,前端怎么验签。是用同样的验签规则,也生成一个签名,与后台比较吗

2.入参url是个啥:前端调用该接口的域名

3.下图这个鸟玩意,要不要填,填什么

三,依赖

<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-mp</artifactId>
    <version>4.0.0</version>
</dependency>
<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-open</artifactId>
    <version>4.0.0</version>
</dependency>

四,以下内容为转载,请参考最后原文:

项目是vue写的,首先下载引入依赖:

npm install weixin-jsapi
1
在要用的页面引入:

import wx from 'weixin-jsapi'
1
关于很多人纠结的jssdk还是jsapi看看这篇博客

1,
这里前端要做的就是:请求后台给的验签接口,将当前页面的url路径encodeURIComponent(url.split("#")[0])传参给后台,然后后台就会进行‘一系列操作’将wx.config里权限配置需要的字段返给前端。

2,
前端代码:请求后台接口,获取验签时需要的字段并进行权限配置,这里看一下这篇博客很完整:

getConfig(){
  var $this = this;
  var url = window.location.href;
  this.$post('/xx/bbb',            // 后台配置的接口 验签
      {
          encodeUrl:encodeURIComponent(url.split("#")[0])  //直接丢弃#及后面的字符串   
      }
  ).then(function(response) {
      if(response.data.flag == true){
          var data = JSON.parse(response.data.data);    //字符串转为对象  有需要的可能需要解密返回值
          console.log(data);
          //下列的data.均为后台接口返回的字段,比如我的项里里返回的是 appid,timestamp,nonceStr,signature
          wx.config({
              debug: ture,//这里一般在测试阶段先用ture,等打包给后台的时候就改回false,
              appId: data.appid,
              timestamp: data.timestamp, 
              nonceStr: data.noncestr, 
              signature: data.signature,
              jsApiList: ['chooseWXPay', 'updateMenuTimlingAppMessage']
          })
          wx.ready(function(){
              wx.checkJsApi({
                  jsApiList: ['chooseWXPay'],
                  success:function(res){
                      console.log("seccess")
                      console.log(res)
                  },
                  fail:function(res){
                      console.log("fail");
                      console.log(res)
                  }
              })
            //   微信分享功能,需要初始化就调用
              wx.updateMenuTimlingAppMessage({
                  link: '',
                  imgSrc: '',
                  desc: '',
                  appId: '',
                  complete: function (res) {
                        // 不论成功失败返回
                  },
                  success: function (res) {

                  },
                  error: function(err) {

                  },
                  trigger: function () {

                  }
              })
          })
          wx.error(function (err) {
              $this.$toast(err)
          })
      }else{
          $this.$toast({
              message: response.data.detailMsg      //  若这里弹出了:errMsg:config:ok,则验证成功!
          });
      }
  }).catch(function(error){
      $this.$toast({
          message: '获取config 验签 失败,请重试'
      });
  });
},

这里后端要做的是:重点说一下后台进行的那‘一系列操作’:
先看一下测试号的消息接口指南(当然微信开放文档里也有,就是接入指南),告诉你微信怎么验证你填写的服务器的有效性,只有进行验证成功了,才能进行接下来的操作(其中URL是开发者用来接收微信消息和事件的接口URL。Token可由开发者可以任意填写):

3.1: 当你点击提交,微信那边会马上对你填的服务器进行验证,后台那边的逻辑就参考消息接口使用指南里面写好(在点击提交之前写好),根据返回值如果是true则接头成功。
3.2: 你就可以进行获取验签需要的东西了,微信开放文档里面的步骤三下面的附录1,2以及后面会告诉你如何获取签名需要的票据(ticket)以及其他参数和签名的加密算法,还有会遇到的错误排查:


3.3: 将这些东西算好拼好然后返给前端,前端进行权限验证,判断是否验证通过,然后在wx.checkJsApi进行判断是否有权限调用你需要的jsapi。
3.4: 如果验签成功(如果不成功,微信也给了相应的错误排查),你也有相应jsapi权限,就可以使用相应功能(比如支付)等。支付过两天写
————————————————
版权声明:本文为CSDN博主「慢半拍、」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/huanhuan03/article/details/107179868/

https://blog.csdn.net/huanhuan03/article/details/107179868/


版权声明:本文为C18298182575原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。