nodejs实现微信授权

longmon 发布于2019-08-21 17:56 / 3421人阅读

摘要：背景项目基于开发服务器用，提供微信授权和跨域使用微信获取经纬度，再利用百度地图获取用户所在城市待优化问题项目的微信授权基于老的项目，写的有点不够优雅自己开发时把授权信息存到了里面，导致每次进入项目都要走一遍授权，浪费时间和影响用户体验解决方

背景
项目基于angular1.3开发
web服务器用node，提供微信授权和跨域
使用微信jssdk获取经纬度，再利用百度地图API获取用户所在城市

待优化问题：
项目的微信授权基于老的项目，写的有点不够优雅；
自己开发时把授权信息存到了sessionStorage里面，导致每次进入项目都要走一遍授权，浪费时间和影响用户体验；

解决方案：
重写授权，让项目初始化时只请求一个接口，就可以拿到用户的基本信息；将获取的用户基本信息存在cookie里面，并设置一个比较长的过期时间，以便用户在某一段时间内访问可以不用再次授权,拿微信授权的相关代码就贴在下面了.

服务端用node+express

路由部分

router.js
/**
 * router
 */
const express = require("express");
const router = express.Router();
const wxAuth = require("../wxAuth.js");
router.get("/auth", wxAuth.getCode, (req, res, next) => {
    // 授权调用
});
router.get("/wxAuth/getUserInfo", wxAuth.getAccessToken, wxAuth.getUserInfo, (req, res, next) => {
    let back_url = req.query.back_url;
    console.log("back_url=="+back_url);
    if (back_url.indexOf("?path=")) {
        back_url = back_url.replace("?path=","#/")
        console.log(back_url);
    }
    res.redirect(back_url);
});
module.exports = router;

授权中间件 wxAuth.js
//微信公众号的appId和appSecret配置文件
const weixin = require("../weixin.config.js")

const request = require("request")
const appId = weixin.appID;
const appSecret = weixin.appsecret;
const Host = "http://example.com"
exports.getCode = (req, res, next) => {
    if (req.cookies && req.cookies.openid) {
        next();
    } else {
        console.log(req)
        let back_url = escape(req.query.back_url);
        console.log(req.query.back_url)
        let redirect_url = `http://mall.yizhenjia.com/wxAuth/getUserInfo?back_url=${back_url}`;
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect `;
        console.log(url);
        res.redirect(url);
    }
}
exports.getAccessToken = (req, res, next) => {
    console.log("====accessToken")
    // console.log(req.query)
    let code = req.query.code;
    let url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${appSecret}&code=${code}&grant_type=authorization_code `;
    request(url, (error, response, body) => {
        let result = JSON.parse(body);
        console.log(result)
        req.access_token = result.access_token;
        req.openid = result.openid;
        next();
    });
}
exports.getUserInfo = (req, res, next) => {
    console.log("====getUserInfo")
    let access_token = req.access_token;
    let openid = req.openid;
    let url = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN `
    request(url, (error, response, body) => {
        console.log(body)
        let result = JSON.parse(body);
        res.cookie("openid", result.openid, { maxAge: 24 * 60 * 60 * 1000, httpOnly: false });
        res.cookie("unionid", result.unionid, { maxAge: 24 * 60 * 60 * 1000, httpOnly: false });
        res.cookie("nickname", result.nickname, { maxAge: 24 * 60 * 60 * 1000, httpOnly: false });
        res.cookie("headimgurl", result.headimgurl, { maxAge: 24 * 60 * 60 * 1000, httpOnly: false });
        next();
    });
}

在angular项目启动的时候，就判断有没有用户union的cookie存在，如果不存在就去授权，并阻止视图渲染

获取授权，因为微信授权的时候，会忽略angular路由的哈希值后面的内容，所以把哈希值做了转换，在服务端的router.js里面，又把哈希值还原，在重定向的时候写在url里

//放在commonUtil服务里面
转换url,将路由参数传给服务器，然后在授权结束后，在重定向的url里获取路由的哈希值（这里的哈希处理更多的是为了后面微信支付路径的问题）
self.getAuth = function() {
    var hash = window.location.hash.replace("#/", "?path=");
    var origin = window.location.origin;
    var pathname = window.location.pathname;
    var bcakUrl = origin + pathname + hash;
    window.location.href = "/auth?back_url=" + bcakUrl;
}
 

判断授权,没有授权情况下阻止默认渲染，并请求授权（在其他框架的时候也可以做类似处理）
 
 $rootScope.$on("$stateChangeStart", function(event) {
   if (!cookieUtil.hasCookie("unionid") || !cookieUtil.hasCookie("openid")) {
      commonUtil.getAuth();
      event.preventDefault();
     }
 });
 //cookieUtil判断cookie是否存在，设置cookie和获取cookie值（angular service）

授权源码

GPU云服务器云服务器微信授权详解微信网页授权微信授权java php微信登录授权

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90232.html

2018微博词云项目深度解析

摘要：最初产生这个项目的想法应该是在年月份，当时正在学习中，就萌生了这样一个想法从一个用户这一年发布的微博数据中，提取最有意义的个关键词。这些东西提交完就可以提交审核了，微博应用审核的速度还算比较快的，一两天基本差不多会审核完。最初产生这个项目的想法应该是在2018年10月份，当时正在学习python中，就萌生了这样一个想法：从一个用户这一年发布的微博数据中，提取最有意义的top50个关键...

TANKING 2019-07-30 18:42 评论0 收藏0
nodejs微信开发---接入指南

摘要：内网穿透由于微信开发的端口必须是最近貌似增加了，所以一个内网穿透工具还是很有必要的。我个人使用的是浏览器微信调试工具。若确认此次请求来自微信服务器，请原样返回参数内容，则接入生效，成为开发者成功，否则接入失败。首先github地址奉上：https://github.com/xiadd/shorthand 欢迎star?最近又拾起了微信开发，之前的公众号是用的flask进行开发的，所以...

LiangJ 2019-08-19 18:40 评论0 收藏0
Fiddler助力微信开发调试

摘要：下面介绍在微信开发调试方面的应用。微信网页开发中，由于有接口安全域名和授权域名等的限制，导致部分功能需要部署到线上才能测试。设置代理服务器打开微信开发者工具，设置代理设置选择手动设置代理。 Fiddler是一个非常强大的代理工具，可以让你的前端开发调试更加方便。下面介绍在微信开发调试方面的应用。微信网页开发中，由于有js接口安全域名和授权域名等的限制，导致部分功能需要部署到线上才能测...

mengera88 2019-08-26 10:47 评论0 收藏0
微信公众号开发

摘要：接口安全域名主要是在调用微信时用到。到这里为止测试号配置就完成了二微信网页授权篇接口地址为这里你可以使用此地址上的接口进行自己编写，也可以使用别人封装好的。说明：由于最近开发公众号，特写篇文章来记录下开发流程和开发中的坑。开发用的技术为 react + express , nodejs作为中间层。一.配置篇首先申请接口测试号地址：https://mp.weixin.qq.com/...

nifhlheimr 2019-08-23 12:19 评论0 收藏0
登录那些事儿

摘要：假如是在同一个域名下，例如与，因为允许设置到二级域名下，所以和是可以共享的，用户的信息可以通过可逆加密放在二级域名下的，并且设置，就可以一站登录，站站登录。原文链接：BlueSun | 登录那些事儿也不知道是什么原因，刚开始不久的职业生涯，在技术这条路走着走着，和「登录」总是有着一个不解之缘。还记得当初学习Web编程的时候么？不管是Java、.Net、PHP，继经典「Hello W...

layman 2019-08-19 17:52 评论0 收藏0