angular 单页应用微信授权和微信支付
背景 待优化问题: 解决方案: 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,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,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,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,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,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,httpOnly: false }); res.cookie("nickname",result.nickname,httpOnly: false }); res.cookie("headimgurl",result.headimgurl,httpOnly: false }); next(); }); } 在angular项目启动的时候,就判断有没有用户union的cookie存在,如果不存在就去授权,并阻止视图渲染 //放在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) 视图加载后,修改路由(解决微信支付的bug) 例如我设置的支付目录如下 http://www.test.com/app/ 我的发起支付的界面如下 http://www.test.com/app/#/pay1 http://www.test.com/app/#/pay2 http://www.test.com/app/#/pay3 当我在'#'前面添加'?',这个时候微信会把'?'后面的内容当做参数而angular可以识别'?#',这样既可以避免出现出现提示当前页面url未注册的错误 $rootScope.$on('$viewContentLoaded',function(event) { if (window.location.href.indexOf('?#') < 0) { window.location.href = window.location.href.replace('#','?#') } }); 微信公众号授权和实现签名 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |