前期准备
映射工具 将本机地址映射到公网
ngrok下载地址: http://www.qydev.com/
选择linux版本,将工具下载到目录:
/home/b.jiang/ngrok02/linux_amd64/ngrok
切换到此目录,运行下面的命令
./ngrok -config=ngrok.cfg -subdomain weixintest01 2333
即可将2333 端口映射到公网地址 : http://weixintest01.tunnel.qydev.com/
申请测试号
为什么要用测试号?
因为正式号的接口未开通,如果要开通,必须通过微信认证。
在获得微信认证之前,使用测试号来开发是一个不错的选择。
进入微信公众号 -> 开发者工具 -> 公众平台测试帐号 ->进入申请
微信测试号服务器配置
用npm安装 wechat
wechat包已经帮我们完成了大部分的工作,主要是接收解析微信服务器发过来的信息,然后定义了返回的格式。
安装
在项目目录下
npm install wechat --save
//安装其他要用到的
npm install express body-parser --save
项目目录下创建wechat.js
var wechat = require('wechat');
var verifyInfo = { //验证信息
token: '', // your wechat token
appid: '' // your wechat appid
};
//处理文本消息
var handler = wechat(verifyInfo, wechat.text(wechatText));
module.exports = handler;
function wechatText(message, req, res, next) {
var input = (message.Content || '').trim();
if (/你好/.test(input)) {
res.reply('Hello world');
} else {
res.reply('其他');
}
}
项目目录下创建app.js
var express = require("express");
var bodyParser = require("body-parser");
var app = express();
//config
app.set('port', 2333);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
// route
app.use('/weixin', require('./wechat'));
// start up server
app.listen(app.get('port'), function () {
console.log('Server listening on:', app.get('port'));
});
运行
node app.js
开始配置测试帐号 服务器url
填写url和Token
点击提交 ,服务器配置成功,启动服务器配置
微信测试号设置授权回调页面域名
在权限列表中 网络帐号 那一项 点击修改 -> 填写 授权回调页面域名
代码实现,获取授权
在写代码之前,使用npm安装组件:
npm install request --save
在项目中oauth.js:
/**
* Created by b.jiang on 2017/3/2.
*/
/**
* @Module : Wechat oauth Module
* @Brief : Process Wechat oauth
*/
var express = require('express');
var router = express.Router();
var request = require('request');
var config = require('./config');
/* 微信网页授权 */
var AppID = config.appid;
var AppSecret = config.appsecret;
router.get('/wx_login', function(req,res, next){
//console.log("oauth - login")
// 第一步:用户同意授权,获取code
var router = 'get_wx_access_token';
// 这是编码后的地址
var return_uri = 'http://weixintest01.tunnel.qydev.com/oauth/'+router;
var scope = 'snsapi_userinfo';
res.redirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+AppID+'&redirect_uri='+return_uri+'&response_type=code&scope='+scope+'&state=STATE#wechat_redirect');
});
/* 获取access_token */
router.get('/get_wx_access_token', function(req,res, next){
//console.log("get_wx_access_token")
//console.log("code_return: "+req.query.code)
// 第二步:通过code换取网页授权access_token
var code = req.query.code;
request.get(
{
url:'https://api.weixin.qq.com/sns/oauth2/access_token?appid='+AppID+'&secret='+AppSecret+'&code='+code+'&grant_type=authorization_code',
},
function(error, response, body){
if(response.statusCode == 200){
// 第三步:拉取用户信息(需scope为 snsapi_userinfo)
//console.log(JSON.parse(body));
var data = JSON.parse(body);
var access_token = data.access_token;
var openid = data.openid;
console.log('openid' + openid);
request.get(
{
url:'https://api.weixin.qq.com/sns/userinfo?access_token='+access_token+'&openid='+openid+'&lang=zh_CN',
},
function(error, response, body){
if(response.statusCode == 200){
// 第四步:根据获取的用户信息进行对应操作
var userinfo = JSON.parse(body);
//console.log(JSON.parse(body));
console.log('获取微信信息成功!' + userinfo.nickname + userinfo.city + userinfo.country);
// 小测试,实际应用中,可以由此创建一个帐户
res.send("\
<h1>"+userinfo.nickname+" 的个人信息</h1>\
<p><img src='"+userinfo.headimgurl+"' /></p>\
<p>"+userinfo.city+","+userinfo.province+","+userinfo.country+"</p>\
");
}else{
console.log(response.statusCode);
}
}
);
}else{
console.log(response.statusCode);
}
}
);
});
module.exports = router;
在app.js中引入这个路由:
...
var oauth = require('./oauth')
...
app.use('/oauth', oauth);
...
创建菜单
创建 wx_menu.json
{
"button":[
{
"name":"菜单",
"sub_button":[
{
"type":"view",
"name":"button03",
"url":"http://weixintest01.tunnel.qydev.com/image/1212.jpg"
},
{
"type":"view",
"name":"用户信息", "url":"http://weixintest01.tunnel.qydev.com/oauth/wx_login"
}
]
}
]
}
在app.js 添加
var menu = JSON.stringify(require('./wx_menu.json'));
api.createMenu(menu, function (err, result) {
console.log(result);
});
开始运行
node app.js
测试
先关注该测试号,点击 用户信息 菜单后将跳转到用户信息页面,显示用户的信息。