前端js对微信或支付宝的网页授权+支付

场景：微信/支付宝扫码进入网站，出现授权弹窗，用户授权后进入网站首页，并且显示出用户头像和昵称等信息，在网页进行相关商品操作后，点击确认支付，拉起微信/支付宝支付，并去付款，在付款成功后跳转到想要去的页面。

建议先去官网了解详情：适用于网站应用的微信授权官方网址

1.网页授权

判断浏览器并进入相应的授权

 function IsWeixinOrAlipay() {
        var ua = window.navigator.userAgent.toLowerCase();
        //判断是不是微信
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            var weixintarger = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=申请到的appid&redirect_uri=授权过后要去的页面地址（要encode）&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect';
            window.location.href = weixintarger;
        }
        //判断是不是支付宝
        if (ua.match(/AlipayClient/i) == 'alipayclient') {
            var alipaytarget = 'https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=申请到的appid&scope=auth_user&redirect_uri=授权过后要去的页面地址（要encode)&state=2';
            window.location.href = alipaytarget;
        }
        //哪个都不是
        return "false";
    }

获取code，换取用户信息

用户同意授权后，页面跳转至重定向页面，地址会带上code参数，从地址中取出code参数，传递给后端，换取网页授权access_token，获得当前用户信息。并进行页面数据渲染。

2.支付

微信支付

向后端传递订单相关信息换取时间戳，随机串等信息。并调用微信支付接口，详情点击此链接去官网看看吧。微信内H5调起支付官方文档

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
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();
}

支付宝支付

支付宝支付相对简单一些，前端向后端传递订单相关信息，后台根据文档，向支付宝请求h5的支付数据，返回一个form表单到前端上，

  ALIpayOrder() {
                var urlStr = '接口地址';
                var data = {
                    'alipayUserid': this.userInfo.alipayUserid,
                    'alipayNickname': this.userInfo.alipayNickname,
                    'alipayHead': this.userInfo.alipayHead,
                    'orderId': this.orderId
                }; //相关订单信息
               
               //重点是下面这段代码，后端返回的form表单通过下面的代码展现在页面上，就是调起的支付宝支付页面。
                axios.get(urlStr, { params: data }).then((response) => {
                    vm.btnPay = false;
                    var form = response.data;
                    const div = document.createElement('div')//创建div
                    div.innerHTML = form//将返回的form 放入div
                    document.body.appendChild(div);
                    document.forms[0].submit();

                }).catch(function (error) {
                    console.log('失败', error);
                });
            },