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;

    /**
     * 校驗(yàn)指定公眾號(hào)的簽名
     * 設(shè)置URL和TOKEN時(shí)，微信服務(wù)器會(huì)發(fā)送GET請(qǐng)求到該地址，并攜帶參數(shù)
     * 請(qǐng)求方向：wx---》業(yè)務(wù)系統(tǒng)
     * URL: http://{host:port或domain}/wx/{appId}/checkSignature
     * @param appId 公眾號(hào)appId
     * @param signature 微信加密簽名，signature結(jié)合了開發(fā)者填寫的token參數(shù)和請(qǐng)求中的timestamp參數(shù)、nonce參數(shù)。
     * @param timestamp 時(shí)間戳
     * @param nonce 隨機(jī)數(shù)
     * @param echostr 隨機(jī)字符串
     * @return echostr或者空， 如果返回echostr，則說(shuō)明校驗(yàn)通過(guò)，否則不通過(guò)
     */
    @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 公眾號(hào)的應(yīng)用Id
     * @param pageUrl 前端的訪問(wèn)地址
     * @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的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
    appId: appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: Number(timestamp), // 必填，生成簽名的時(shí)間戳
    nonceStr: nonceStr, // 必填，生成簽名的隨機(jī)串
    signature: signature,// 必填，簽名
    jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
  });

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

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

// 如http://${js安全域名}/#/devtoolUi/pages/index/index 轉(zhuǎn)為http://${js安全域名}/ ，注意最后的/不能缺，有?param=xxx也要包含
let pageUrl = location.href.split('#')[0];
// 請(qǐng)求后端接口獲取配置信息
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);