微信公众号扫码登入

介绍一下

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

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
相关推荐
沙振宇1 小时前
【Web】使用Vue3开发鸿蒙的HelloWorld!
前端·华为·harmonyos
运维@小兵2 小时前
vue开发用户注册功能
前端·javascript·vue.js
蓝婷儿2 小时前
前端面试每日三题 - Day 30
前端·面试·职场和发展
oMMh2 小时前
使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用(2)
前端·c#·asp.net
一口一个橘子3 小时前
[ctfshow web入门] web69
前端·web安全·网络安全
读心悦4 小时前
CSS:盒子阴影与渐变完全解析:从基础语法到创意应用
前端·css
湛海不过深蓝5 小时前
【ts】defineProps数组的类型声明
前端·javascript·vue.js
layman05285 小时前
vue 中的数据代理
前端·javascript·vue.js
柒七爱吃麻辣烫5 小时前
前端项目打包部署流程j
前端
layman05285 小时前
vue中理解MVVM
前端·javascript·vue.js