node.js实现微信授权登录,最详细最简单小白教程。。

使用到的中间件,如已安装请忽略

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,若有不对之处,还望指正。。。

写作不易,本篇文章为原创制作,如有抄袭或者使用文字转发的请注明来源,感谢。

  • 8
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值