vue前端生成wx.config签名

否定不讽刺

已于 2022-05-20 09:43:47 修改

阅读量1.8k

点赞数

文章标签：前端 vue.js javascript

于 2022-05-09 16:20:30 首次发布

本文链接：https://blog.csdn.net/qq_38809672/article/details/124668804

版权

这篇博客介绍了如何在前端实现微信JS-SDK的签名验证过程，包括引入所需依赖、请求后台获取token和ticket，以及计算签名的详细步骤。同时提到了/wxapi需要通过nginx代理，并指出url应为当前页面的URL。

摘要由CSDN通过智能技术生成

需要引入的依赖：
import wx from “weixin-js-sdk”;
import axios from “axios”;
import qs from “qs”;
import sha1 from “js-sha1”;
import { v4 } from “uuid”;

没有的话使用npm install 一下

关键代码

    //请求后台的方法
    ajax(url, params) {
      return new Promise((resolve, reject) => {
        let paramsStr = qs.stringify(params);
        axios
          .get(url, paramsStr)
          .then((res) => {
            resolve(res);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
   getSignature() {
      let that = this;
      let getTokenUrl =
        "/wxapi/cgi-bin/token?grant_type=client_credential&appid=你的appId&secret=你的app密钥";
      let params = {};
      that
        .ajax(getTokenUrl, params)
        .then((res) => {
          let token = res.data.access_token;
          let getTicketUrl =
            "/wxapi/cgi-bin/ticket/getticket?access_token=" +
            token +
            "&type=jsapi";
          that
            .ajax(getTicketUrl, params)
            .then((res) => {
              let ticket = res.data.ticket;
              let timestamp = Math.round(new Date().getTime() / 1000);
              this.timestamp = timestamp;
              let noncestr = v4();
              this.noncestr = noncestr;
              let url = 你的url地址;
              let str =
                "jsapi_ticket=" +
                ticket +
                "&noncestr=" +
                noncestr +
                "&timestamp=" +
                timestamp +
                "&url=" +
                url;
              let signature = sha1(str);
              this.signature = signature;
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },