使用到的中间件,如已安装请忽略
npm install express -g
npm install request --save
首先想要微信授权,必须注册的有公众号,进入微信公众号平台—开发—开发者工具—公众号平台测试账户,在打开之前个人建议先在 # 微信公众号平台—开发—接口权限—网页服务—网页授权—网页授权获取用户基本信息 #过一遍教程,因为笔者忽略了这篇教程所以踩了很大的坑。。。
打开公众号平台测试账户
往下拉找到网页授权获取用户基本信息,填好域名,我这里直接用的是我后台在本地运行的端口号,127.0.0.1:3000,记住千万不要填写http://或者https://协议之类,如图
js接口安全域名修改,也需要填写,如图
往上,接口配置信息如何填写呢?
URL一样的,只是在前面加了协议,token随便填,点提交,这个时候你肯定会发现上面有个弹框提示配置失败,不急。。。打开控制台看一下
可以看到报-107错误,不急,等几秒钟数据会自动刷新,这时候点开,居然拿到我们的微信名,
ok,上面的都好了,接下来我们去写node后端代码,本地运行的端口号必须和上面授权回调页面域名一致。
app.listen(3000, '0.0.0.0',function(req,res){ //创建服务器
console.log('可以启动啦'+'http://localhost:3000');
})
定义好参数
/* 微信授权登录参数 这个不可以复制 */
var AppID = '微信公众号APPID(测试、正式号都可以)';
var AppSecret = 'appsecret';
添加路由,然后我们直接访问这个路由
router.get('/code', function(req,res){
var router = 'coto';
var return_uri = 'http://127.0.0.1:3000';
var scope = 'snsapi_login'; //网页
var state = '123';
res.redirect('https://open.weixin.qq.com/connect/qrconnect?appid='+AppID+'&redirect_uri='+return_uri+'&response_type=code&scope='+scope+'&state='+state+'#wechat_redirect');
});
提示我们要用微信客户端打开,这个时候,复制这个链接,手机微信打开也可以,电脑客户端打开也行,建议都进行尝试。。
打开之后如果提示需要关注公众号,那就先去关注公众号,去打开之前的测试号管理界面,如图,扫你自己的
扫码成功后再重新访问链接,提示是否授权,我们接受,这个时候是不是有一点点小高兴,不急,我们最终要实现的效果是拿到我们微信的头像和地区。接着来。。。
刚刚授权后是不是跳了一个啥都没有的界面,肯定没有啊,如果你在路由上写的有其它的东西也没关系,我们复制这个链接,随便找个地方粘贴,如图
粘贴后得到的
http://127.0.0.1:3000/?code=0a1so8sG1NS7F60vterG1qYPrG1so8sN&state=123
我们复制code这个参数的值去后端使用,其实这个值以后要从前端获取的,我这里没有从前端请求解析URL,所以直接写在后端了,我注释一下,上代码。。
router.get('/get_wx', function(req,res, next){
var code = '0a1so8sG1NS7F60vterG1qYPrG1so8sN';
// var code = req.query.code; //实际上是获取前端请求的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){
let data = JSON.parse(body)
let access_token = data.access_token;
let openid = data.openid;
request.get(
{
url:'https://api.weixin.qq.com/sns/userinfo?access_token='+access_token+'&openid='+openid+'&lang=zh_CN'
},
function(error,response,body){
var userinfo = JSON.parse(body);
console.log(userinfo)
res.send("\
<h1>"+userinfo.nickname+" 的个人信息</h1>\
<p><img src='"+userinfo.headimgurl+"' /></p>\
<p>"+userinfo.city+","+userinfo.province+","+userinfo.country+"</p>\
");
}
)
}
}
)
}
ok,访问这个路由发现成功的获取你的微信头像和地区,这个地方如果没获取到的可能是因为code过期了,写好以后需要先去微信客户端访问我们前面写的/code的路由,把code参数的值复制过来再访问/get_wx这个路由就可以成功获取微信基本信息。源码跟上面写的有很大出入,所以就不贴了,上面的方法应该算是非常简单了的。
笔者初学node,若有不对之处,还望指正。。。