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

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;  //实际上是获取前端请求的coderequest.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,若有不对之处,还望指正。。。

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

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

  1. uniapp开发h5微信授权登录(详细教程)

    uniapp开发h5微信授权登录 文章目录 uniapp开发h5微信授权登录 前言 一.前期准备--申请测试账号 二.正式开发--前端代码 三.打包发布 总结 前言 我也是第一次做h5授权微信登录,网 ...

  2. 微信授权登录后,把获取的信息存储到本地数据库中(超详细有用)!

    微信授权登录后,把获取的信息存储到本地数据库中(超详细有用)!下面一起来看看吧! <?php namespace Home\Controller; use Think\Controller; c ...

  3. uni-app - 最详细 H5 网页接入微信登录功能,提供公众号配置与详细注释示例代码(移动端网页实现点击登录按钮后 调用微信公众号授权登录功能 详细讲解接入流程与详细示例代码)官方最新超级详细教程

    前言 关于 uni-app 项目中接入微信授权登录的文章鱼龙混杂,各种乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现微信授权登录功能,详细讲解接 ...

  4. uniapp - 超详细的 H5 公众号网页微信登录示例代码,提供从 0-1 公众号配置及详细注释代码(站在新手小白的角度)第三方微信授权登录的实现!!

    介绍 目前示例是 "点击按钮登录",你也可以改为 "一进页面就登录" ,可随意改造. 百度的教程都太乱了,而且功能都有一定问题.本文主要讲解 uniapp H5 ...

  5. uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码(适用于 uniapp 微信小程序项目,源代码直接开箱即用)超级详细的代码及注释

    效果图 uniapp 项目编译微信小程序,一些常见的登录方式及源代码,示例代码干净整洁无BUG拿来即用. 本文示例实现了 uniapp 微信小程序项目的登录功能,包含微信授权登录.获取微信手机号登录. ...

  6. 教你如何用node.js开发微信公众号(一)

    内容简介 本文章简单介绍了如何用node.js开发微信公众号.主要内容包括微信公众平台的配置,signature的验证,以及用node.js去处理用户主动发起的行为. 准备工作 开发前需要安装好nod ...

  7. [小黄书小程序]微信授权登录

    在上一篇文章中,我们在后台实现了会员管理以及会员注册登录的逻辑.其中登录方式包括: 通过手机号码和验证码登录 通过微信授权登录 在小黄书小程序上,我们支持第二种登录方式.第一种方式,今后看情况再酌情进 ...

  8. 微信授权登录问题【公众号登录、PC扫描登录】

    微信授权登录问题 微信的授权登录比较多,主要分两大类,一类是微信客户端的公众号网站授权登录 微信公众号网页授权:第二种是网站或者android.ios的授权登录 网站应用微信扫描授权; 具体的andr ...

  9. 微信测试号申请以及微信授权登录

    一.申请微信测试号 进入网址:微信测试号登录 接下来微信登录,然后进入页面 ① 第一点就是接口配置信息,可以使用springmvc或servlet来进行验证,我这里使用springmvc来编写验证代码 ...

最新文章

  1. ios加载本地游戏html,使用WKWebView iOS加载本地HTML / Javascript
  2. LeetCode 251. 展开二维向量
  3. python做的大型游戏_Python实现数据量较大的生命游戏
  4. intellij 专业版 TomCat9
  5. String 转 jsonObject
  6. 微信 JSAPI 支付流程
  7. 十九个国内外主流的三维GIS软件(转)
  8. oracle导出为dmp文件,oracle导出dmp文件的2种方法
  9. 如何在vue-cli中配置amazeui的vue版本
  10. 操作系统的概念(定义)
  11. shell脚本造数据
  12. [转发] 我的一年中台实战录 - 何少甫
  13. [ManjaroLinux]-虚拟机安装
  14. global mapper 导入bln文件和tif文件
  15. IDEA 在hdfs中创建目录
  16. 鸿蒙系统支持列表,华为鸿蒙系统支持的手机型号一览【最新】
  17. ER图向关系模型的转换
  18. cdr怎么把矩形去掉一个边_cdr画矩形怎么把中间弄掉
  19. 常用SQL语句:子查询
  20. vs2019生成dll文件及(C#)使用

热门文章

  1. iOS 14获取不到WiFi名字的解决方法
  2. Starling Feathers Controls Drawers
  3. 《机器学习实战》8.2 线性回归基础篇之预测鲍鱼年龄
  4. 一份很全的路由器默认初始密码
  5. 每日一题:贪心算法解救生艇问题
  6. 计算机桌面颜色比较暗,电脑屏幕变色了怎么调回来 电脑屏幕变暗淡的原因有哪些...
  7. 使用SuperMap iDesktopX数据迁移工具迁移ArcGIS数据
  8. 30小时搞定python网络爬虫第37讲,黑马上海37期Python全套视频课程
  9. error C2872: “flann”: 不明确的符号 --- PCL 与OpenCV2 的flann命名空间冲突问题的解决方法
  10. 基于单片机的热电偶测温仿真设计(#0003)