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


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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
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 闭包特性在实际应用中的问题
2009/10/30 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
React组件的三种写法总结
2017/01/12 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python实现连续图文识别
2018/12/18 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Python实现代码块儿折叠
2020/04/15 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
python 获取字典键值对的实现
2020/11/12 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
玄武湖导游词
2015/02/05 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android