关于微信登录的公众号sercret不能在前端代码暴露的解决方案？

今天我们接入微信登录的方式在上一篇文章中有讲到，但是在提交小程序审核时出现莫名其妙的明文密钥暴露问题，所以给出以下解决方案：

1、为什么不能暴露明文密钥：

你会发现不管你调用的是wx登录，或是wx支付，zfb登录或者支付，这些第三方平台都为你的信息安全与主体安全给出了充分的安全考虑，就连我在进行网站HTTPS加密证书申请的时候也会让我设置一个密钥，他们再结合固定的加密算法将你的信息保护的很完美，但是如果你将你的密钥明文暴露到前端的小程序代码中，就会给黑客可趁之机

2、将凭借code换取openId的请求放在后端开发的服务器上进行，这样一来你的密钥数据就会单独的存放在你的数据库中，避免密钥的明文暴露。

3、凭借相同的请求方式，但是获取secret的方式改为从开发服务器中获取，这样的话也会避免明文暴露，但是在请求的过程中如果你的请求不是HTTPS加密类型的协议，就很容易让黑客在应用层进行盗窃。

下面是我针对第三种方案写的代码：

const app = getApp();

Page({

  data: {

    AppId:"你的公众号APPID",

    AppSecret:"",

    Id: "",

    password:"",

    msg:'',

    sign: 0,

    js_code:"",

    userInfo:"",

    jpg1:'../../static/images/zixishi1.jpg',

    jpg2:'../../static/images/zixishi2.jpg',

    jpg3:'../../static/images/zixishi3.jpg',

    fromInfo:[{date:"2022-7-15",info:"您已在监控区域，不要随地吐痰！禁止喧哗。谢谢配合！"}]

  },

  // 用户点击微信登录

  wxlogin(){

    var th = this;

    // 后台获取AppSecret

    wx.request({

      url: 'http://49.235.69.4:8080/findSecret',

      method:"GET",

      header:{

        'content-type': 'application/json'

      },

      data:{

        AppId: th.data.AppId

      },

      dataType:"json",

      success(res){

        console.log(res.data.data);

        if(res.data.code == 1){

             th.setData({

               AppSecret: res.data.data

             })

        }

      }

    })

    // 授权获取当前用户信息

    wx.getUserProfile({

      desc: '用于登录校验',

      success(res){

        //  接收这个响应信息里的用户信息

         var userInfo = res.userInfo;

         th.setData({

           userInfo: userInfo,

         })

      }

    })

    // 调用login接口获取临时交换凭证code

      wx.login({

        success: function(res){

          // 将获取的临时凭证存放起来

          th.setData({

            js_code: res.code

          });

        }

      });

      // 设置延时是先进行授权结束后再回调这个微信登录的openId换取函数

        setTimeout(function(){

        let code = th.data.js_code;

        let appid = th.data.AppId;

        let appsecret = th.data.AppSecret; 

        wx.request({

          // 注意反引号

          url: `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${appsecret}&js_code=${code}&grant_type=authorization_code`,

          success(res){

            console.log(res);

            // 将获取的两个关键信息存储

            th.setData({

              Id: res.data.openid,

            })

             // 访问数据后台服务器入库

            setTimeout(function(){

              wx.request({

                url: 'http://49.235.69.4:8080/wxLogin',

                method:"GET",

                header:{

                  'content-type': 'application/json'

                },

                data:{

                    openid: th.data.Id,

                    nickName: th.data.userInfo.nickName

                },

                dataType:"json",

                success(res){

                    app.globalData.userId = th.data.Id;

                    app.globalData.userInfo = th.data.userInfo;

                    if(res.data.code == 1){

                      wx.showToast({

                        title: '微信登录成功',

                      })

                      setTimeout(function(){

                        wx.switchTab({

                          url: '/pages/Frame/frame',

                        })

                      },100)

                    }

                }

              })

            },1000);

          }

        })

      },2000);

  },

  onLoad: function (options) {

    var th =this;

    // 公告加载发送get请求

    wx.request({

      url: 'http://49.235.69.4:8080/findAllFromInfo',

      method:"GET",

      header:{

        'content-type': 'application/json'

      },

      success(res){

        // 获取响应对象中封装的公告集合对象

        if(res.data.code == 1){

          th.setData({

            fromInfo: res.data.fromInfoList 

          })

        }else{

          this.setData({

           fromInfo: [{date:"",info:"暂无公告！"}]

          })

        }

      }

    })

  }

}