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

「爱情、让人受尽委屈。」 2023-02-23 12:12 8阅读 0赞

项目是vue写的，首先下载引入依赖：

npm install weixin-jsapi

在要用的页面引入：

import wx from 'weixin-jsapi'

关于很多人纠结的jssdk还是jsapi[看看这篇博客][Link 1]

## 1， ##

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

## 2， ##

前端代码：请求后台接口，获取验签时需要的字段并进行权限配置，这里[看一下这篇博客很完整][Link 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 验签 失败，请重试'
          });
      });
    },

## 3， ##

这里后端要做的是：重点说一下后台进行的那‘*一系列操作*’：  
先看一下测试号的[消息接口指南][Link 3](当然微信开放文档里也有，就是接入指南)，告诉你微信怎么验证你填写的服务器的有效性，只有进行验证成功了，才能进行接下来的操作（其中URL是开发者用来接收微信消息和事件的接口URL。Token可由开发者可以任意填写）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
**3.1：** 当你点击提交，微信那边会马上对你填的服务器进行验证，后台那边的逻辑就参考[消息接口使用指南][Link 3]里面写好(在点击提交之前写好)，根据返回值如果是true则接头成功。  
**3.2：** 你就可以进行获取验签需要的东西了，[微信开放文档][Link 4]里面的步骤三下面的[附录1,2以及后面][1_2]会告诉你如何获取签名需要的票据(ticket)以及其他参数和签名的加密算法，还有会遇到的错误排查：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]  
**3.3：** 将这些东西算好拼好然后返给前端，前端进行权限验证，判断是否验证通过，然后在wx.checkJsApi进行判断是否有权限调用你需要的jsapi。  
**3.4：** 如果验签成功(如果不成功，微信也给了相应的错误排查)，你也有相应jsapi权限，就可以使用相应功能(比如支付)等。支付过两天写

--------------------

欢迎交流指正~

--------------------

特别感谢[算命先生][Link 5]的详细指点，虽然他有些暴躁。

[Link 1]: https://blog.csdn.net/weixin_41266672/article/details/83142719
[Link 2]: https://blog.csdn.net/weixin_42124196/article/details/88971031
[Link 3]: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202007071354079.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[Link 4]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4
[1_2]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200707141306848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200707141341144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[Link 5]: https://me.csdn.net/weixin_44921098