我是一只快乐的前端小渣渣~~~
领导说这次你做一下微信登陆 你觉得怎么样，你说行就行咯，反正我又不敢顶嘴，我又不敢有意见。。
（what?我只会正确拼写后台两个字）
开始搞 一步一步来
先搞微信公众平台吧：
1.先找到最下面的开发配置
image.png
2.开始配置
image.png
image.png
点击提交后
会有好几种可能的问题
如：Token 验证失败
因为我们还没配好服务验证，它需要调我们的url地址进行Token验证
image.png
这是需要用上的appid和secret；
好，我们的后台验证
//我这里用的是node + express 框架
image.png
用express搭出项目结构后
这里验证需要用上一个包"crypto"
npm install crypto
var express = require('express');
var crypto = require('crypto');
var router = express.Router();
var token = "XXXX"; //你在微信上配置时写的Token
var AccessToken = {
grant_type: 'client_credential',
appid: 'XXXXXXXXXXXXXXX',
secret: '你们公众号上的密码'
};
var API = require('co-wechat-api');
var api = new API(AccessToken.appid, AccessToken.secret);
/* GET home page. */
router.get('/', function (req, res, next) {
var signature = req.query.signature;
var timestamp = req.query.timestamp;
var nonce = req.query.nonce;
var echostr = req.query.echostr;
/* 加密/校验流程如下： */
//1. 将token、timestamp、nonce三个参数进行字典序排序
var array = new Array(token,timestamp,nonce);
array.sort();
var str = array.toString().replace(/,/g,"");
//2. 将三个参数字符串拼接成一个字符串进行sha1加密
var sha1Code = crypto.createHash("sha1");
var code = sha1Code.update(str,'utf-8').digest("hex");
//3. 开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
if(code===signature){
res.send(echostr)
}else{
res.send("error");
}
});
本地的服务器地址推荐用natapp 这个软件映射成外网地址（免费，好用）
配置的时候就需要用这个地址
写好后台后重启服务，（如果你感觉总是退出重启很麻烦，推荐用nodemon 启动项目，会自动更新）
微信会提示验证Token成功;
这里就代表可以正式开始了
获取有效期的带参数的二维码
我用了git上一个库co-wechat-api ES6版
npm install co-wechat-api
框架的api见文档
//添加几行代码
var API = require('co-wechat-api');
var api = new API(AccessToken.appid, AccessToken.secret);
//我前端调了这个接口
router.post('/user/qrcode', (req, res) => { //生成带参数的二维码
async function getQRCode() {
var result = await api.createTmpQRCode('123456', 1800); //一个场景参数，一个有效期
res.json({
'data': result
})
};
getQRCode();
})
//返回一个ticket值
image.png
然后直接调get方法就可以获取到一张带参数的二维码了
（此处应该有掌声）
如果期间发生报告ip有问题的 你可能是没有将ID添加至白名单。
image.png
获取用户扫描关注后的事件回调
image.png
启用服务，扫描关注后系统会自己将数据post到你的地址
消息推送 微信相关文档
//微信客户端各类回调用接口
var EventFunction = {
//关注
subscribe: function (result, req, res) {
//存入openid 通过微信的接口获取用户的信息同时存入数据库。
let openID = result.xml.FromUserName;
async function getUser() {
let result = await api.getUser({
openid: openID,
lang: 'en'
});
console.log("result :" + JSON.stringify(result));
};
getUser();
},
//注销
unsubscribe: function (openid, req, res) {
//删除对应id
},
//打开某个网页
VIEW: function () {
//根据需求，处理不同的业务
},
//自动回复
responseNews: function (body, res) {
function autoResponse(txt) {
var xml = {
xml: {
ToUserName: body.FromUserName,
FromUserName: body.ToUserName,
CreateTime: +new Date(),
MsgType: 'text',
Content: txt
}
};
var reciviMessage = body.Content;
if (/^\@.*/.test(reciviMessage)) {
xml.xml.Content = '已经收到您的建议，会及时处理！'
}
//将json转为xml
xml = builder.buildObject(xml);
res.send(xml);
}
autoResponse('哈哈哈哈，已笑疯');
},
SCAN: function (body, res) {
//关注后返回的消息
var xml = {
xml: {
ToUserName: body.FromUserName,
FromUserName: body.ToUserName,
CreateTime: +new Date(),
MsgType: 'text',
Content: '欢迎关注'
}
};
var reciviMessage = body.Content;
if (/^\@.*/.test(reciviMessage)) {
xml.xml.Content = '已经收到您的建议，会及时处理！'
}
//将json转为xml
xml = builder.buildObject(xml);
//发送给微信
res.send(xml);
}
};
//获取事件推送；
router.post('/', function (req, res, next) {
//获取参数
var query = req.query;
//签名
var signature = query.signature;
//输出的字符，你填写的TOKEN
var echostr = query.echostr;
//时间戳
var timestamp = query.timestamp;
//随机字符串
var nonce = query.nonce;
//获取xml数据
req.on("data", function (data) {
//将xml解析
parser.parseString(data.toString(), function (err, result) {
var body = result.xml;
var messageType = body.MsgType;
//用户点击菜单响应事件
if (messageType == 'event') { //关注成功后的推送
var eventName = body.Event;
EventFunction.subscribe(result, req, res); //处理用户openID；
EventFunction.SCAN(body, res);
//自动回复消息
} else if (messageType == 'text') {
EventFunction.responseNews(body, res);
//第一次填写URL时确认接口是否有效
} else {
res.send('网络繁忙哦，请稍后再试');
}
});
});
})
这个简单的处理用户关注后的相应和获取用户的openid 和用户信息就到这里了
好期待领导下一次的任务（手动期待脸）
网友评论