介绍

在很多微信H5应用中，当用户访问第三方应用时，需要对微信网页进行授权，很多涉及安全的操作必须获取用户信息后才能继续。本文简单介绍了微信授权流程，通过申请微信测试账号模拟网页授权。用户点击确定登录授权页面后，获取用户信息并显示在首页。最终效果如下

工具和开发准备

1.微信开发者工具和微信测试号

因为是微信授权的，所以必须在微信环境下使用。首先，我们需要在这里安装微信开发者工具。因为我们没有自己的应用，还需要在微信公众平台申请一个界面测试号，相当于我们的第三方应用。

2.参数设置

登录测试号后，可以查看自己的appId和appsecret信息，将体验界面权限表中web服务的网页授权基本信息修改为127 . 0 . 0 . 13360 . 88888888886这个地址是用户确认授权后的回调地址，也就是我们应用的后台处理地址，如下图所示

最后拿出自己的微信扫码，注意测试号，如下图

微信授权流程介绍

具体流程和详细介绍可以在官网微信公众平台的技术文档中查看，大致分为四个步骤：

1.引导用户进入授权页面并同意授权。这时会调用微信api获取代码

2.授权通过后，它会带来代码参数来请求回调地址

3.后台获取代码，再次调用微信界面，换取网页授权access_token和openid

4.access_token和openid由网页授权获取用户的基本信息(如果有unionid，也会获取unionid参数)

正式开始

详细的代码可以在https://github.com/wangfengyuan/wxAuthorize的github上下载

1.原始代码

let express=require(' express ')；const https=require(' https ')；let app=express()；//appIDlet appID=` wxec 6 fa 9 e 9 BC 03d 885 `；//appsecretlet appSerect=` 4c 8a 0d 14 cf 08959 B4 e 17334 cabf 9 cf 0 `；//点击授权后重定向全球资源定位器(统一资源定位符)地址让ReDirectURl=`/GetUserInfo `；让主机=` http://127。0 .0 .1:3000 `;//微信授权api，接口返回代码，点击授权后跳转到重定向地址并带上密码参数让作者泽乌尔=`https://open.weixin.qq.com/connect/oauth2/authorize？appID=$ { appID } redirect _ uri=` ` $ { host } $ { redirectUrl } response _ type=code scope=SNS API _ user info STATE=STATE #微信_重定向` app.get('/login '，函数(req，RES){ RES . sendfile(路径。解析(_ dirname，'登录。html ')；});app.get('/auth '，函数(req，res) { res.writeHead(302，{ ' Location ' : authorizeUrl })；RES . end()；});app.get('/getUserInfo '，函数(req，RES){ let code=req。查询。代码；让` https://API . weixin . QQ.com/SNS/oauth 2/access _ token获得成功？appID=` `$ { appID } secret=$ { appSerect } code=$[code]grant _ type=authorization _ code `；//通过拿到的密码和appID、app_serect获取访问令牌和open _ id https。get(getaccesse)，(resText)={ var DDD=' '；resText.on('data '，(d)={ DDD=d；});resText.on('end '，)={//console。原木(DDD)；var obj=JSON。解析(DDD)；var access _ token=obj。access _ tokenvar open _ id=obj.openid//通过上一步获取的访问令牌和open_id获取用户信息即用户信息让`https://api.weixin.qq.com/sns/userinfo？access_token=${access_token}openid=${open_id}=zh_cn`；https.get(getUserUrl)，(resText)={ user=' '；resText.on('data '，(d)={ user=d；});resText.on('end '，()={ console。日志(用户)；var userobj=JSON.parse(用户);RES . send(用户对象)；控制台。日志(用户obj)；});}) });}).on('error '，(e)={ console。错误(e)；});app。听(3000)；具体使用时要将应用编号和appSerect换成你对应的参数即可，因为我们的请求是要按一定顺序的，但是结节发送请求是异步的，所以我们的请求嵌套了三层，代码很难看，所以这里可以采用ES6的异步非同步(异步)和等待解决异步回调地狱。

2.使用ES6的异步非同步(异步)和等待的改进代码

异步函数wxAuth(req，res) { //解析参数获取统一资源定位器中的密码值让代码=请求。查询。代码；//通过拿到的密码和appID、app_serect获取返回信息让resObj=等待getAccessToken(代码);//解析得到访问令牌和open_id让access _ token=resobj。access _ token让开放id=resObj.openid//通过上一步获取的访问令牌和open_id获取用户信息即用户信息让userObj=等待getUserInfo(access_token，open _ id)；控制台。日志(UserObj)；渲染(路径。解析(_ dir name，' userInfo.ejs '，{ UserObj : UserObj })；//RES . send(UserObj)；}//通过拿到的密码和appID、app_serect获取访问令牌和open_idfunction getAccessToken(代码){返回新的承诺(解析，拒绝)={让`https://api.weixin.qq.com/sns/oauth2/access_token？appID=` `$ { appID } secret=$ { appSerect } code=$[code]grant _ type=authorization _ code `；https.get(getAccessUrl)，(RES)={ var resText=' '；res.on('data '，(d)={ resText=d；});res.on('end '，)={ var resObj=JSON。解析(resText)；resolve(ResoBj)；});}).on('error '，(e)={ console。错误(e)；});});}//通过上一步获取的访问令牌和open_id获取用户信息即用户信息函数getUserInfo(access_token，open _ id){ 0返回新的承诺(解析，拒绝)={让`https://api.weixin.qq.com/sns/userinfo？access_token=${access_token}openid=${open_id}=zh_cn`；https.get(getUserUrl)，(RES)={ var resText=' '；res.on('data '，(d)={ resText=d；});res.on('end '，()={ var UserObj=JSON。解析(resText)；解析(UserObj)；});}).on('error '，(e)={ console。错误(e)；});})}

修改后代码流程清晰了很多，最后点击确认登陆后将获取到的用户对象通过部署模板渲染在前端页面，就能看到文章最开始展现的效果图。

写在最后

我前端刚入门没多久，最近在公司实习，受到身边同事影响，所以也开始写文章来记录自己的学习心得，这是我第一次写文章，所以可能写的不太好，大家对文章和代码有什么建议欢迎提出来一起交流，谢谢！也希望大家多多支持我们。