微信公众号扫码登入

介绍一下

微信公众号: 微信认证服务号才有权限,通过接口获取推广支持-生成带参数二维码,用户扫码后,微信推送事件消息给服务器

Koa: 是由 Express 团队设计的全新 Web 框架,旨在为 Web 应用程序和 API 构建一个更小、更具表现力、更强大的基础框架。通过利用异步函数,Koa 可以让你摆脱回调,并显著增强错误处理能力。Koa 的核心没有捆绑任何中间件,而是提供了一套优雅的方法,让编写服务器代码变得快速而有趣。

Cloud Studio(云端 IDE): 是基于浏览器的集成式开发环境,为开发者提供了一个稳定的云端工作站。支持CPU与GPU的访问。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器即可使用。

画个图,看一下大概流程

一、微信公众平台接口测试帐号申请

无需公众帐号、快速申请接口测试号,直接体验和测试公众平台所有高级接口

ruby 复制代码
申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

二、Cloud Studio(云端 IDE)

使用云端 IDE,新建工作空间

arduino 复制代码
https://ide.cloud.tencent.com/

三、创建 Koa 项目

  1. 初始化项目
bash 复制代码
mkdir Wechat
cd Wechat
npm init -y
npm i nodemon -D
  1. 配置 package.json
swift 复制代码
{
  "name": "wechat",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon index.js",
    "serve": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "koa": "^2.16.1",
    "koa-router": "^13.0.1"
  },
  "devDependencies": {
    "nodemon": "^3.1.9"
  }
}
  1. 安装 Koajs
css 复制代码
npm i koa koa-router
  1. 创建 index.js 文件
ini 复制代码
const Koa = require('koa');
const koaRouter = require("koa-router");
const router = new koaRouter();
const app = new Koa();
const port = 3000; // 监听端口


/**
 * 接收消息服务器配置
 */
router.get("/wechat", (ctx) => {

    const { signature, timestamp, nonce, echostr } = ctx.query;
    const Token = 'Token';
    console.log(ctx.query)
    ctx.body = echostr;

});
app.use(router.routes());

/*
  请求方式不匹配的时候,会报请求方式不被允许
*/
app.use(router.allowedMethods());

app.listen(port, () => {
  console.log('server is running on ' + ' http://localhost:' + port)
})
  1. 运行项目
arduino 复制代码
npm run  dev

三、公众号配置接口信息

测试号管理,接口配置信息

arduino 复制代码
url    https://你的域名.com/wechat
Token  Token

四、获取二维码

  1. 新建文件 service/index.js
javascript 复制代码
const axios = require('axios');
const appID = ' '
const appsecret = ' '


// 创建一个 axios 实例
const weixinAxios = axios.create({
    baseURL: 'https://api.weixin.qq.com/cgi-bin'
});
weixinAxios.defaults.headers.post['Content-Type'] = 'application/json';

/**
 * 获取 access_token
 * @returns 
 */
const gettoken = async () => {
    try {
        const { data } = await weixinAxios.get('/token', {
            params: {
                grant_type: 'client_credential',
                appid: appID,
                secret: appsecret
            }
        });
        return data;
    } catch (error) {
        console.error(error);
    }
}

/**
 * 获取二维码
 * @returns 
 */
const createQrcode = async (scene_id, access_token) => {
    try {
        const { data } = await weixinAxios.post('/qrcode/create?access_token=' + access_token, {
            expire_seconds: 604800,
            action_name: 'QR_SCENE',
            action_info: {
                scene: {
                    scene_id: '12345678'
                }
            }
        });
        console.log(data);
        return data;
    } catch (error) {
        console.error(error);
    }
}

/**
 * 获取 getUserInfo
 * @returns 
 */
const getUserInfo = async (openid,access_token) => {
    try {
        const { data } = await weixinAxios.get('/user/info', {
            params: {
                access_token,
                openid,
                lang: 'zh_CN'
            }
        });
        console.log(data);
        return data;
    } catch (error) {

        console.error(error);
    }
}

module.exports = {
    createQrcode, gettoken,getUserInfo
}
  1. 编写 index.js 文件
javascript 复制代码
/**
 * 生成带参数的二维码
 */
router.get("/wechat/token", async (ctx) => {

    try {
        const resultToken = await gettoken();
        const resultTicket = await createQrcode('123456', resultToken.access_token)
        console.log('resultTicket', resultTicket)
        let qrcodeUrl = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${resultTicket.ticket}`
        let result = `<image src='${qrcodeUrl}'/>`
        ctx.body = result;
    } catch (error) {
        console.log(error)
    }
});
  1. 安装 axios
css 复制代码
npm i axios
  1. 通过ticket换取二维码

获取二维码ticket后,开发者可用ticket换取二维码图片。请注意,本接口无须登录态即可调用。 HTTP GET请求(请使用https协议)

ini 复制代码
https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET 

提醒:TICKET记得进行UrlEncode

  1. 文档地址
ruby 复制代码
https://mp.weixin.qq.com/debug

https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

五、接受微信推送事件

  1. 安装依赖
css 复制代码
npm i raw-body xml2js
  1. 编写index.js 文件
ini 复制代码
const Koa = require('koa');
const koaRouter = require("koa-router");
const { gettoken, createQrcode, getUserInfo } = require('./service/index')
const getRawBody = require('raw-body')
const xml2js = require('xml2js');
const parser = new xml2js.Parser();

const router = new koaRouter();
const app = new Koa();
const port = 3000; // 监听端口


/**
 * 接收消息服务器配置
 */
router.get("/wechat", (ctx) => {

    const { signature, timestamp, nonce, echostr } = ctx.query;
    const Token = 'kdsacn';
    console.log(ctx.query)
    ctx.body = echostr;

});

/**
 * 接收微信推送 post 请求处理
 */
router.post("/wechat", async (ctx) => {
    console.log("----------------接受微信推送 post 请求处理 start ------------------------");
    //const { xmlData } = ctx.req.body
    console.log(ctx.req)

    // 解析 xml 的字符串内容
    let wholeXML = await getRawBody(ctx.req, {
        length: ctx.req.headers['content-length'],
        limit: '1mb',
        encoding: 'utf-8'
    });
    // 将 xml 解析成 json
    const formatJson = await parser.parseStringPromise(wholeXML);
    console.log(formatJson)

    let FromUserName = formatJson.xml.FromUserName[0];
    if(FromUserName){
        const resultToken = await gettoken();
        const userInfo = await getUserInfo(FromUserName,resultToken.access_token)
        console.log('userInfo',userInfo)
    }

    ctx.body = 'ok';
});



/**
 * 生成带参数的二维码
 */
router.get("/wechat/token", async (ctx) => {

    try {
        const resultToken = await gettoken();
        const resultTicket = await createQrcode('123456', resultToken.access_token)
        console.log('resultTicket', resultTicket)
        let qrcodeUrl = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${resultTicket.ticket}`
        let result = `<image src='${qrcodeUrl}'/>`
        ctx.body = result;
    } catch (error) {
        console.log(error)
    }
});

app.use(router.routes());

/*
  请求方式不匹配的时候,会报请求方式不被允许
*/
app.use(router.allowedMethods());

app.listen(port, () => {
    console.log('server is running on ' + ' http://localhost:' + port)
})
  1. 接收事件推送文档
ruby 复制代码
https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html
相关推荐
Kagol13 分钟前
🎉TinyVue v3.22.0 正式发布:支持深色模式、增加基于 UnoCSS 的图标库、支持更丰富的 TypeScript 类型声明
前端·vue.js·开源
天天扭码21 分钟前
一分钟解决 | 高频面试题——找到字符串中所有字母异位词
前端·算法·面试
Mintopia38 分钟前
Three.js 第四天几何体顶点组设置
前端·javascript·three.js
小菜刀刀40 分钟前
XSS跨站脚本攻击漏洞
开发语言·前端·javascript
星空寻流年1 小时前
css3新特性第四章(渐变)
前端·javascript·css3
三天不学习1 小时前
基于 Vue3 + ECharts + GeoJson 实现区域地图钻取功能详解
前端·javascript·echarts·geojson·区域地图·钻地图
二川bro1 小时前
webpack 中 chunks详解
前端·webpack·node.js
CodeSheep1 小时前
JetBrains再出手,最新IntelliJ IDEA 2025.1正式登场!
前端·后端·github
JarvanMo1 小时前
如何在Flutter中保护密钥文件?
前端·flutter
Mike_jia1 小时前
一篇文章带你了解一款强大的企业家监控系统---Zabbix
前端