import lombok.RequiredArgsConstructor;
import me.chanjar.weixin.common.bean.WxJsapiSignature;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import org.springframework.web.bind.annotation.*;

/**
 * 微信功能控制器
 */
@RestController
@RequiredArgsConstructor
@RequestMapping(value = "/wx")
public class WxController {

    private final WxMpService wxService;

    /**
     * 校驗指定公眾號的簽名
     * 設置URL和TOKEN時，微信服務器會發(fā)送GET請求到該地址，并攜帶參數(shù)
     * 請求方向：wx---》業(yè)務系統(tǒng)
     * URL: http://{host:port或domain}/wx/{appId}/checkSignature
     * @param appId 公眾號appId
     * @param signature 微信加密簽名，signature結(jié)合了開發(fā)者填寫的token參數(shù)和請求中的timestamp參數(shù)、nonce參數(shù)。
     * @param timestamp 時間戳
     * @param nonce 隨機數(shù)
     * @param echostr 隨機字符串
     * @return echostr或者空， 如果返回echostr，則說明校驗通過，否則不通過
     */
    @GetMapping("/{appId}/checkSignature")
    public String checkSignature(
            @PathVariable(value = "appId") String appId,
            @RequestParam(value = "signature") String signature,
            @RequestParam(value = "timestamp")String timestamp,
            @RequestParam(value = "nonce")String nonce,
            @RequestParam(value = "echostr")String echostr) {
        boolean flag = this.wxService.switchoverTo(appId).checkSignature(timestamp, nonce, signature);
        return flag ? echostr : "";
    }

    /**
     * 獲取JS-SDK所需要的簽名參數(shù)
     * @param appId 公眾號的應用Id
     * @param pageUrl 前端的訪問地址
     * @return 返回值 如{"code": 200, "data": {"appid": "", "nonceStr": "", "timestamp": 0, "url": "", "signature": ""}}
     */
    @GetMapping("/{appId}/jsapi/getJsapiTicket")
    public AjaxResult<WxJsapiSignature, Object> getJsapiTicket(
            @PathVariable(value = "appId") String appId,
            @RequestParam(value = "pageUrl") String pageUrl) throws WxErrorException {
        final WxJsapiSignature jsapiSignature = this.wxService.switchoverTo(appId).createJsapiSignature(pageUrl);
        return AjaxResult.success(jsapiSignature);
    }
}

npm install weixin-js-sdk

import wx from 'weixin-js-sdk';

export const wxConfig = async (params) => {
  const {appId, timestamp, nonceStr, signature} = params;
  wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
    appId: appId, // 必填，公眾號的唯一標識
    timestamp: Number(timestamp), // 必填，生成簽名的時間戳
    nonceStr: nonceStr, // 必填，生成簽名的隨機串
    signature: signature,// 必填，簽名
    jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
  });

  wx.ready(function(){
    wx.checkJsApi({
      jsApiList: ['chooseImage', 'scanQRCode'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
      success: function(res) {
        console.log(res.checkResult);
        // 以鍵值對的形式返回，可用的api值true，不可用為false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    });
    // config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
  });

  wx.error(function(res){
    console.log(res)
    // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
  });
}

// 如http://${js安全域名}/#/devtoolUi/pages/index/index 轉(zhuǎn)為http://${js安全域名}/ ，注意最后的/不能缺，有?param=xxx也要包含
let pageUrl = location.href.split('#')[0];
// 請求后端接口獲取配置信息
request({
  url:`wx/${userConfig.option.devtoolUi.wx.h5.appid}/jsapi/getJsapiTicket?pageUrl=${pageUrl}`,
  method: 'GET',
  header: {}
}).then((res) => {
  if (res.code === 200) {
    // console.log('獲取配置信息成功', res)
    wxConfig(res.data);
  }
});

const CryptoJS = require("crypto-js");
// 待加密的數(shù)據(jù)
const data = "Hello, World!";
// 使用SHA-1算法加密
const hash = CryptoJS.SHA1(data);