江苏龙网

  1. 主页 > 生活百科 > >

Vue+Node 微信支付前后端流程整理( 二 )

微信支付


  1. Node端定义redirect接口
// 用户授权重定向router.get('/redirect',function (req,res) {  //获取前端回调地址  let callback = req.query.callback,       //获取授权类型      scope = req.query.scope,       //授权成功后重定向地址      redirectUrl = 'http://m.51purse.com/api/wechat/getOpenId';  // 临时保存callback       cache.put('callback', callback);  // 微信网页授权地址  let authorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${callback}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;  //重定向到该地址  res.redirect(authorizeUrl);})
此接口接收callback地址，然后直接重定向到微信授权页面，当用户点击同意以后，会自动跳转到redirectUrl上面来 。
  1. 根据code获取openId
// 根据code获取用户的OpenIdrouter.get('/getOpenId',async function(req,res){  // 获取微信传过来的code值  let code = req.query.code;  if(!code){    res.json(util.handleFail('当前未获取到授权code码'));  }else{    let result = await common.getAccessToken(code);    if(result.code == 0){      let data = result.data;      let expire_time = 1000 * 60 * 60 * 2;      cache.put('access_token', data.access_token, expire_time);      res.cookie('openId', data.openid, { maxAge: expire_time });      let openId = data.openid;      // to-do       /**      此处根据openId到数据库中进行查询，如果存在直接进行重定向，如果数据库没有，则根据token获取用户信息，插入到数据库中，最后进行重定向 。      */    }else{      res.json(result);    }  }})
第三步用户同意授权以后，会重定向到此接口来，并且微信会在url后面拼接一个code值，我们根据code来获取网页授权access_token，根据token就可以拉取到用户信息（昵称、头像）了，最好插入到数据库中 。
getToken和getUserInfo接口封装
//根据code获取tokenexports.getAccessToken = function(code){  let token_url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${config.appId}&secret=${config.appSecret}&code=${code}&grant_type=authorization_code`;  return new Promise((resolve, reject) => {    request.get(token_url, function (err, response, body) {      let result = util.handleResponse(err, response, body);      resolve(result);    })  });}//根据token获取用户信息exports.getUserInfo = function (access_token,openId){  let userinfo = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openId}&lang=zh_CN`;  return new Promise((resolve,reject)=>{    request.get(userinfo, function (err, response, body) {      let result = util.handleResponse(err, response, body);      resolve(result);    })  })}
  1. 获取微信sdk配置
前面四步做完以后，服务端会把openId写入到cookie中，此时前端根据openId来拉取sdk配置
// 获取微信配置信息getWechatConfig(){  this.$axIOS.get(API.wechatConfig+'?url='+location.href.split('#')[0]).then(function(response){    let res = response.data;    if(res.code == 0){      let data = res.data;      wx.config({        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 。        appId: data.appId, // 必填，公众号的唯一标识        timestamp: data.timestamp, // 必填，生成签名的时间戳        nonceStr: data.nonceStr, // 必填，生成签名的随机串        signature: data.signature,// 必填，签名        jsApiList: data.jsApiList // 必填，需要使用的JS接口列表      })      // 封装统一的分享信息      wx.ready(()=>{        util.initShareInfo(wx);      })    }  })}


推荐阅读


上一篇：从一个详细的实例来知道单片机编程，你照着做就行了

下一篇：茶叶咖啡因含量,孕妇能喝含咖啡因的茶吗