• 微信公众号之验证JS-SDK

    文章目录

    专栏目录请点击

    简介

    • 我们一般在自定义返回的页面上，点击，可以使用微信的js-sdk，但是需要我们进行引入
    • 假设我们在search路由引入js-sdk，在引入js-sdk的时候，我们首先要生成js-sdk的使用的签名，签名的规则我们可以查看官网 点击

    生成签名

    服务器地址的获取

    1. 打开设置服务器地址的网页，点击
    2. 配置js安全域名，安全域名尽量与url相同，但是不带http前缀
      在这里插入图片描述
    3. 在我们的config/index.js下，保存我们的域名
    module.exports = {
...
    url:"http://1fyd7hkb6qqf.ngrok.xiaomiqiu123.top"
}

    • 1
    • 2
    • 3
    • 4

    签名的生成

    app.get("/search", async(req, res) => {
    // 首先生成签名
    /*
    1. 需要以下四个参数
    noncestr=Wm3WZYTPz0wzccnW 随机字符串
    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg 临时票据
    timestamp=1414587457 时间戳
    url=http://mp.weixin.qq.com?params=value 当前服务器地址
    2. 将其进行字典排序，并用&拼接在一起
    3. 进行sha1加密
    */
    // 1. 获取到参数
    const { ticket } = await wechat.fetchTicket()
    const timestamp = Date.now(), jsapi_ticket = ticket, noncestr = Math.random().split(".")[1]
    // 2. 进行字典排序
    const str = [
        `jsapi_ticket=${jsapi_ticket}`,
        `timestamp=${timestamp}`,
        `url=${url}/search`,
        `noncestr=${noncestr}`,
    ].sort().join("&")

    console.log(str)
    // 3. 进行sha1加密
    const signature = sha1(str)
    // 4. 将相关的参数传入到网页中
    res.render("search",{signature,noncestr,timestamp})
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    网页模板处理

    1. 这里我们也要参考官网
    2. 所有可以使用的api的列表点击，一些接口的参数，在当前的网页中也能看到，我们写的代码如下
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>
    <script>
        // 1. 绑定安全域名
        // 2. 引入js文件
        // 3. 通过config接口注入权限配置
        wx.config({
            debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
            appId: '<%=appId %>', // 必填，公众号的唯一标识
            timestamp: '<%=timestamp%>', // 必填，生成签名的时间戳
            nonceStr: '<%=nonceStr%>', // 必填，生成签名的随机串
            signature: '<%=signature%>',// 必填，签名
            jsApiList: [
                "onMenuShareQQ",
                "onMenuShareQZone",
                "startRecord",
                "stopRecord",
                "translateVoice"
            ] // 必填，需要使用的 JS 接口列表
        });
        wx.ready(function () {
            // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
        });
        wx.error(function (res) {
            // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
        });
    script>
    head>
<body>
    <h1>这是一个搜索页面h1>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    对于代码的解释

    1. 绑定安全域名，我们在服务器地址获取的步骤已经做了
    2. 引入js文件，我们要在当前页面的头部引入微信sdk的文件，这个官网中也有说明
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>

    • 1
    1. 引入文件之后，我们全局就多了wx这个对象，这个时候，我们需要调用他的config方法来进行权限的注入
    2. 我们如何知道权限注入是否成功了呢，我们还是通过wx中提供的方法，当通过后会调用wx.ready的方法，没有通过就会调用wx.error的方法
  • 相关阅读:
    【真题T1】[NOIP2022] 种花
    Qt设置进制
    jsqlparser:基于语法分析实现SQL中的CAST函数替换
    Qt 一个简单的word文档编辑器
    markdown语法
    让PPT更好看的方法，需要的朋友快来吧
    vim程序编辑器
    jsp基础语法
    使用Postman拦截浏览器请求
    Nginx的安装和使用
  • 原文地址：https://blog.csdn.net/youhebuke225/article/details/126522635