基于 Express 的微信公众号开发

2024-01-24
贵州
本文字数：1610 字
阅读完需：约 5 分钟

JS-SDK 鉴权流程

步骤一：绑定域名

微信公众号配置

微信公众平台进入“公众号设置”的“功能设置”里填写“JS 接口安全域名”。

需要事先下载一个 MP_verify_aCUsGn8IMhTP8vyx.txt 文件，放在我们自己填写的域名的静态资源文件夹下去保证我们可以通过域名路径+MP_verify_aCUsGn8IMhTP8vyx.txt 的方式可以访问到该文件，已做验证

例如：我们想要配置 aifoosen.applinzi.com 域名>则我们要保证通过http://aifoosen.applinzi.com/MP_verify_aCUsGn8IMhTP8vyx.txt
可以访问到服务器上的这个文件

如图所示：

在服务上添加微信域名校验文件

上述第二步需要将文件下载好后上传到public目录下。因为我是使用的 Express 构建的服务。如图：

添加公众号 IP 白名单配置

微信公众平台进入“安全中心"的“IP 白名单"里填写，跟 js-sdk 鉴权相关的所有 ip 新浪云相关 IP 的位置：文档中心----入口与出口 IP-----外网访问出口 IP 列表

如图：

步骤二：引入 JS 文件

在需要调用 Js 接口的页面引 l 入如下 Js 文件，（支持 https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

我在项目目录 public 中添加了 index.html 文件，并在该文件中引入了 js 文件。具体文件如下：

<html>
<head>    <title>Express</title>    <link rel="stylesheet" href="/stylesheets/style.css">    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>    <!-- <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script></head>
<body>    <h1>Express</h1>    <p>Welcome to Express</p></body>
<script>    axios.get('https://wx.ibitly.cn/jsapi', {        url: encodeURIComponent(location.href.split('#')[0])    }).then((res)=>{        wx.config({            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。            appId: '', // 必填，公众号的唯一标识            timestamp: '', // 必填，生成签名的时间戳            nonceStr: '', // 必填，生成签名的随机串            signature: '',// 必填，签名            jsApiList: [] // 必填，需要使用的JS接口列表        });    })    </script>

</html>

复制代码

项目层级：

步骤三、微信公众号服务器配置

编写公众号鉴权接口

参考文档：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html

express-vercle/routes/index.js

var express = require('express');var router = express.Router();// 通过命令 npm i sha1 安装 sha1var sha1 = require('sha1');
/* GET home page. */router.get('/', function(req, res, next) {  res.render('index', { title: 'Express' });});

/* weixin-鉴权接口 参考文档：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html*/router.get('/wx-auth', function(req, res, next) {  let {signature, timestamp, nonce, echostr} = req.query;  let token = 'paidaxing';  let array = [timestamp, nonce, token];  array.sort(); // 字典排序  let str = array.join('');  let resultStr = sha1(str) // 对字符串str进行sha1进行加密  if(resultStr === signature) {    res.set('Content-Type', 'text/plain')    res.send(echostr);  }else {    res.send('Error!!!!!!')  }});
module.exports = router;