微信网页授权并获取用户信息的方法


Posted in Javascript onJuly 30, 2018

介绍

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

微信网页授权并获取用户信息的方法

工具及开发准备

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

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

2. 参数设置

登陆测试号后可以查看到自己的appId和appsecret信息,将体验接口权限表里的网页服务的网页授权获取用户基本信息修改为127.0.0.1:8800,该地址就是用户确认授权后回调的地址即我们应用的后台处理地址,如下图

微信网页授权并获取用户信息的方法

最后拿出自己微信扫码关注该测试号即可,如下图所示

微信网页授权并获取用户信息的方法

微信授权流程介绍

具体流程及详细介绍大家可以到官网微信公众平台技术文档查看,大致分为四步:  

1. 引导用户进入授权页面同意授权,此时会调用微信api获取code

2. 授权通过后会带上code参数请求回调地址

3. 后台获取code,再次调用微信接口换取网页授权access_token和openid

4. 通过网页授权access_token和openid获取用户基本信息(如果有unionid还会获取到unionid参数)

正式开始

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

1. 原始代码

let express = require("express");const https = require('https');
let app = express();
//appIDlet 
appID = `wxec6fa9e9bc03d885`;
//appsecretlet 
appSerect = `4c8a0d14cff08959b4e17334cabf9cf0`;
//点击授权后重定向url地址
let redirectUrl = `/getUserInfo`;
let host = `http://127.0.0.1:3000`;
//微信授权api,接口返回code,点击授权后跳转到重定向地址并带上code参数
let authorizeUrl = `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) {  
  let code = req.query.code;  
  let getaccess = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=` + `${appID}&secret=${appSerect}&code=$[code]&grant_type=authorization_code`;  
  //通过拿到的code和appID、app_serect获取access_token和open_id  
  https.get(getaccess, (resText) => {    
    var ddd = "";    
    resText.on('data', (d) => {
      ddd += d;    
    });
    resText.on('end', () => {
      // console.log(ddd);
      var obj = JSON.parse(ddd);
      var access_token = obj.access_token; 
      var open_id = obj.openid;      
      //通过上一步获取的access_token和open_id获取userInfo即用户信息
      let getUserUrl = `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.log(user);
          var userobj = JSON.parse(user);
          res.send(userobj);
          console.log(userobj);
        });
      })    });
  }).on('error', (e) => {
    console.error(e);
  }); 

app.listen(3000);

具体使用时要将appID和appSerect换成你对应的参数即可,因为我们的请求是要按一定顺序的,但是node发送请求是异步的,所以我们的请求嵌套了三层,代码很难看,所以这里可以采用ES6的async和await解决异步回调地狱。

2. 使用ES6的async和await的改进代码

async function wxAuth(req, res) {
  //解析querystring获取URL中的code值  
  let code = req.query.code;
  //通过拿到的code和appID、app_serect获取返回信息
  let resObj = await getAccessToken(code);
  //解析得到access_token和open_id
  let access_token = resObj.access_token;
  let open_id = resObj.openid;
  //通过上一步获取的access_token和open_id获取userInfo即用户信息
  let userObj = await getUserInfo(access_token, open_id);
  console.log(userObj);
  res.render(path.resolve(__dirname,'userInfo.ejs'), {userObj: userObj});
  // res.send(userObj);}

//通过拿到的code和appID、app_serect获取access_token和open_id
function getAccessToken(code) {
  return new Promise( (resolve, reject) => {
    let getAccessUrl = `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.parse(resText);
        resolve(resObj);
      });
    }).on('error', (e) => {
      console.error(e);
    });
  });
  }
//通过上一步获取的access_token和open_id获取userInfo即用户信息
function getUserInfo(access_token, open_id) {
  return new Promise( (resolve, reject) => {
    let getUserUrl = `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.parse(resText);
        resolve(userObj);
      });
    }).on('error', (e) => {
      console.error(e);
    });
  })}

微信网页授权并获取用户信息的方法

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

写在最后

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

Javascript 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
关于JavaScript的一些看法
May 27 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
axios简单实现小程序延时loading指示
Jul 30 #Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 #Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 #Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 #Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 #Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 #Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 #Javascript
You might like
php生成随机数或者字符串的代码
2008/09/05 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
img的onload的另类用法
2008/01/10 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
保护环境倡议书范文
2014/05/13 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2014年终工作总结范本
2014/12/15 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
趣味运动会简讯
2015/07/20 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
Python基础之数据结构详解
2021/04/28 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android