微信网页授权和获取用户信息简介在很多微信H5应用中，用户访问第三方应用时，需要对微信网页进行授权，而我们首先要获取很多安全相关的操作.只有用户信息可以继续。本文简单介绍微信授权流程，通过申请微信测试账号模拟网页授权。用户在授权页面点击确定登录后，获取用户信息并显示在前端页面。最终效果如下图所示。工具及开发准备1、因为微信开发者工具和微信测试号是微信授权的，所以必须在微信环境下使用。首先我们这里需要安装微信开发者工具，因为我们没有自己的应用，所以需要在微信公众平台上申请一个接口测试号，相当于我们的第三方应用。2、设置好参数后，登录测试账号后可以查看自己的appId和appsecret信息。将体验界面权限表中网页服务授权表中的网页授权获取用户基本信息修改为127.0.0.1:8800。该地址为用户确认授权后的回调。地址就是我们应用的后台处理地址。如下图，最后拿出自己的微信扫码，关注测试号。如下图微信授权流程介绍具体流程和详细介绍。可以到官网微信公众平台技术文档查看。大致分为四步：引导用户进入授权页面同意授权。此时会调用微信API获取代码授权。授权通过后会请求code参数在后台回调地址获取code，再次调用微信接口获取网页授权。access_token和openid获取用户的基本信息（如果有unionid，也会获取到unionid参数）。详细代码可以在官方开始的github上下载。地址是https://github.com/wangfengyu...1.原代码letexpress=require("express");consthttps=require('https');letapp=express();//appIDletappID=`wxec6fa9e9bc03d885`;//appsecretletappSerect=`4c8a0d14cff08959b4e17334cabf9cf0`;//点击重定向url地址letredirectUrl=`/getUserInfo`;lethost=`http://127.0.0.1:3000`;//微信授权api，接口返回code，点击授权跳转到重定向地址并带上code参数letauthorizeUrl=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=`+`${host}${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`app.get("/login",function(req,res){res.sendFile(path.resolve(__dirname,'login.html'));});app.get("/auth",function(req,res){res.writeHead(302,{'Location':authorizeUrl});res.end();});app.get("/getUserInfo",function(req,res){letcode=req.query.code;letgetaccess=`https://api.weixin.qq.com/sns/oauth2/access_token?appid=`+`${appID}&secret=${appSerect}&code=${code}&grant_type=authorization_code`;//通过获取的code、appID和app_serecthttps获取access_token和open_id.get(getaccess,(resText)=>{varddd="";resText.on('data',(d)=>{ddd+=d;});resText.on('end',()=>{//console.log(ddd);varobj=JSON.parse(ddd);varaccess_token=obj.access_token;varopen_id=obj.openid;//通过上一步得到的access_token和open_id获取userInfo，即用户信息letgetUserUrl=`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${open_id}&lang=zh_CN`;https.get(getUserUrl,(resText)=>{user="";resText.on('data',(d)=>{user+=d;});resText.on('end',()=>{console.log(user);varuserobj=JSON.parse(user);res.send(userobj);console.log(userobj);});})});}).on('error',(e)=>{console.error(e);});//res.end();});app.listen(3000);将appID和appSerect换成你对应的参数即可，因为我们的请求必须有一定的顺序，而node发送请求是异步的，所以我们的请求嵌套了三层，代码难看，所以这里可以使用ES6的async和await来解决异步回调地狱2.使用ES6asyncfunctionwxAuth(req,res){//解析querystring获取URL中的code值letcode=req.query.code;的async和await的改进代码；//通过获取到的code和appID，app_serect获取返回的信息letresObj=awaitgetAccessToken(code);//解析得到access_token和open_idletaccess_token=resObj.access_token;让open_id=resObj.openid;//通过上一步得到的access_token和open_id得到userInfo，即用户信息letuserObj=awaitgetUserInfo(access_token,open_id);控制台日志（userObj）；res.render(path.resolve(__dirname,'userInfo.ejs'),{userObj:userObj});//res.send(userObj);}//通过获取到的code和appID获取access_token和open_id,app_serectfunctiongetAccessToken(code){returnnewPromise((resolve,reject)=>{letgetAccessUrl=`https://api.weixin.qq.com/sns/oauth2/access_token?appid=`+`${appID}&secret=${appSerect}&code=${code}&grant_type=authorization_code`;https.get(getAccessUrl,(res)=>{varresText="";res.on('数据',(d)=>{resText+=d;});res.on('end',()=>{varresObj=JSON.parse(resText);resolve(resObj);});}).on('error',(e)=>{console.error(e);});});}//通过上一步得到的access_token和open_id得到userInfo，即用户信息functiongetUserInfo(access_token,open_id){returnnewPromise((resolve,reject)=>{letgetUserUrl=`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${open_id}&lang=zh_CN`;https.get(getUserUrl,(res)=>{varresText="";res.on('data',(d)=>{resText+=d;});res.on('end',()=>{varuserObj=JSON.parse(resText);resolve(userObj);});}).on('error',(e)=>{console.error(e);});})}app.listen(8800);修改之后，代码流程就清晰多了，最后将获取到的userObj通过ejs模板在前端页面渲染，可以看到文末写的文章开头的效果图。前不久才开始接触前端。最近在公司实习，受到同事的影响，所以也开始写文章记录自己的学习心得。这是我第一次写文章，所以可能不是很好。如果大家对文章和代码有什么建议，欢迎一起分享，谢谢！
