简介

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

生成签名

服务器地址的获取

打开设置服务器地址的网页，点击
配置js安全域名，安全域名尽量与url相同，但是不带http前缀
在我们的config/index.js下，保存我们的域名

module.exports = {...url:"http://1fyd7hkb6qqf.ngrok.xiaomiqiu123.top"
}

签名的生成

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})
})

网页模板处理

这里我们也要参考官网
所有可以使用的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>Document</title><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>

对于代码的解释

绑定安全域名，我们在服务器地址获取的步骤已经做了
引入js文件，我们要在当前页面的头部引入微信sdk的文件，这个官网中也有说明

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

引入文件之后，我们全局就多了wx这个对象，这个时候，我们需要调用他的config方法来进行权限的注入
我们如何知道权限注入是否成功了呢，我们还是通过wx中提供的方法，当通过后会调用wx.ready的方法，没有通过就会调用wx.error的方法

微信公众号之验证JS-SDK相关推荐

nodejs+express解决微信公众号token验证失败
nodejs+express解决微信公众号token验证失败问题描述下面是服务端代码问题原因解决方案重新运行服务器问题解决结语问题描述这里是测试号的状态,如果是公众号的话上边应该显示t ...
php开发微信公众号token验证失败,Thinkphp5 微信公众号token验证不成功的原因
微信是中国最流行的社交软件之一,随着微信生态系统的建立,很多人也致力于公众号相关的文章">微信公众号和微信小程序的开发,那么Thinkphp5 微信公众号token验证不成功的原因及 ...
Java微信公众号配置验证Token
Java微信公众号服务器配置-验证Token 一.填写服务器配置首先我们需要在微信公众平台上填写服务器配置重点内容服务器地址URL(一定要外网能访问的到) 在我们提交配置的时候, ...
php 公众号验证失败,微信公众号Token验证失败的几种情况及解决办法
微信公众号Token验证失败的几种情况及解决办法 1. 思路看验证的文件,编码是否是:utf-8 无bom头的 2. thinkphp框架,要关闭调试模式,开启调试模式容易有错误代码出现,导致验证失败 ...
微信公众号---域验证
1.为了成为开发者进行的验证: 验证成功之后,需返回:echoStr 消息 controller请求: /*** @author: cc* @date: 2020/7/15 13:26*/@GetMa ...
微信公众号 Token验证失效问题
最近在学习微信公众号的时候遇到了一个问题:Token验证失效话不多说,看代码:handle.py import hashlib import webclass Handle(object):def ...
配置微信公众号token验证失败
微信公众号服务器配置出现token验证失败, <?php //define your token define("TOKEN", "zlsh"); // ...
阿里云服务器配置微信公众号token验证失败解决办法
我使用的是阿里云服务器ECS 第一步根据阿里云服务器提示部署LAMP环境根据提示一步步完成第二步远程连接服务器进入目录 /var/www/html/phpinfo.php 更改phpinfo ...
微信公众号服务器验证Token的完整步骤
服务器验证Token验证分为以下及步骤一,在微信公众号平台上设置 1.1打开微信公众号平台 1.2打开"开发"中的<基本配置> 1.3点击基本配置页面里的修改配置 1 ...
微信公众号token验证失败的一些总结
本文转载自: https://www.cnblogs.com/sunnor/p/5958272.html 作者:Sunnor 转载请注明该声明. 这几天准备弄一个微信公众号,在进行服务器配置的时候出现 ...

微信公众号之验证JS-SDK

文章目录

简介

生成签名

服务器地址的获取

签名的生成

网页模板处理

对于代码的解释

微信公众号之验证JS-SDK相关推荐

最新文章

热门文章