首页 > 开发 > JS > 正文

使用weixin-java-tools完成微信授权登录、微信支付的示例

2024-05-06 16:46:12
字体:
来源:转载
供稿:网友

本文为学习记录weixin-java-tools实现公众号微信支付.

码云地址:点我

    // 授权登录用到    <dependency>      <groupId>com.github.binarywang</groupId>      <artifactId>weixin-java-mp</artifactId>      <version>3.1.0</version>    </dependency>
    // 微信支付用到    <dependency>      <groupId>com.github.binarywang</groupId>      <artifactId>weixin-java-pay</artifactId>      <version>3.1.0</version>    </dependency>

授权登录官方 api:点我

个人理解的授权登录流程:引导用户点击唤起授权登录的地址,打开页面后携带微信返回的code参数;使用code参数获取AccessToken;获取用户数据。

引导客户打开授权登录地址后,携带code跳转到指定页面在指定页面调用方法:

public Result getAccessToken(@RequestParam(name = "code") String code, HttpServletRequest request, HttpServletResponse response) {    if (StringUtils.isBlank(code)) {      return Result.error("code不存在");    }    try {      WxMpOAuth2AccessToken wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code);      String accessToken = wxMpOAuth2AccessToken.getAccessToken();      // 获取用户微信账户信息      WxMpUser wxMpUser = wxMpService.getUserService().userInfo(wxMpOAuth2AccessToken.getOpenId());      if (StringUtils.isBlank(wxMpUser.getOpenId())) {        return Result.error("用户数据不存在");      }      return Result.success(wxMpUser);    } catch (WxErrorException e) {      e.printStackTrace();      log.info("授权异常:{}", e);      return Result.error("授权登录失败");    } catch (Exception e) {      e.printStackTrace();      return Result.error("登录失败");    }  }

前端保存下用户信息就完事了。

个人理解的微信支付流程:用户页面点击<微信支付>按钮 后端调用 <微信统一下单> 统一下单返回参数 ,前端使用 <统一下单>返回的参数唤起微信支付。

商户中需要在api安全中设置很多东西... 就不一一赘述了 

微信支付官方api 前端:点我

后端api点我

商户登录地址 点我

public Result pay(Long orderNo, HttpServletRequest request) {        //查询订单信息    Order order = orderService.findByOrderNo(orderNo);    try {      WxPayUnifiedOrderRequest orderRequest = new WxPayUnifiedOrderRequest();      //获取当前用户      UserInfo userInfo = RequestContextHolderUtil.getUserInfo();      orderRequest.setBody("支付内容的说明");      //商户号      orderRequest.setMchId(mchId);      orderRequest.setAttach("xxx公司");      orderRequest.setOutTradeNo(orderNo.toString());      orderRequest.setTotalFee(BaseWxPayRequest.yuanToFen(order.getPayment().toString()));//元转成分      orderRequest.setOpenid(userInfo.getOpenId());      orderRequest.setSpbillCreateIp(HttpUtils.getIp(request));      //我这里是微信公众号内打开的h5页面 type使用 JSAPI 根据业务场景变更      orderRequest.setTradeType(WxPayConstants.TradeType.JSAPI);      // 支付成功后跳转页面  这里需要对url进行编码      orderRequest.setNotifyUrl("http://xxxxxxxxx");      orderRequest.setAppid(appId);            // 调用sdk提供的统一下单方法 createOrder会返回重新组装后的对象 建议使用这个       Object unOrder = wxService.createOrder(orderRequest);      // 这个可能是偏向原生一点的统一下单,返回的参数有很多没用的 或者null值 建议使用 createOrder下单      // wxService.unifiedOrder(orderRequest);             return Result.success(unOrder);    } catch (Exception e) {      log.error("微信支付失败!订单号:{},原因:{}", orderNo, e.getMessage());      e.printStackTrace();      return Result.error("支付失败,请稍后重试!");    }  }

前端js代码:

前端唤起微信支付的时候可能会出一些问题,这里建议使用 console.log(res.err_desc);输出错误信息 

res.err_msg 只会提示支付失败... desc会提示一些具体信息

function onBridgeReady(){  WeixinJSBridge.invoke(    'getBrandWCPayRequest', {      "appId":"wx31fd1e1bad23db37",   //公众号名称,由商户传入      "timeStamp":wxData.timeStamp,     //时间戳,自1970年以来的秒数      "nonceStr":wxData.nonceStr, //随机串      "package":wxData.packageValue,      "signType":wxData.signType,     //微信签名方式:      "paySign":wxData.paySign //微信签名    },    function(res){      console.log(res.err_desc)      if(res.err_msg == "get_brand_wcpay_request:ok" ){        // 使用以上方式判断前端返回,微信团队郑重提示:        //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。      }    });}var wxData={};function pay(orderId){  $.ajax({    url:"统一下单方法url",    type:'get',    data:{orderNo:orderId},    beforeSend: function (xhr) {      xhr.setRequestHeader("token", $.cookie("token"));    },    crossDomain: true,    success:function(result){      wxData=result.data;      if (typeof WeixinJSBridge == "undefined") {        if (document.addEventListener) {          document.addEventListener('WeixinJSBridgeReady',            onBridgeReady, false);        } else if (document.attachEvent) {          document.attachEvent('WeixinJSBridgeReady',            onBridgeReady);          document.attachEvent('onWeixinJSBridgeReady',            onBridgeReady);        }      } else {        onBridgeReady();      }    }  });}

注:商户中心支付路径设置 所有调起微信支付的页面都要在此注册,否则微信支付会一闪而过。
微信开发工具上可以模拟授权登录,但是无法模拟微信支付,所以微信支付在微信开发工具上出现的错误都不用管,直接拿到真机上去测试!

使用了sdk后的支付和授权还是很方便的,麻烦的是微信方面的一些配置和流程... 很坑。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表