在h5页面做微信网页授权、支付宝授权

一、微信授权

 （1）原理：

    判断是微信环境 -> 跳转到微信的授权页面 -> 用户授权，页面跳转到“页面授权域名”，并带参数code -> 使用code,请求api接口 -> 请求成功，返回access_token、openid

    官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

（2）前期准备

        登录微信公众平台

        1、公众号设置，设置业务域名、js接口安全域名、网页授权域名

        2、基本配置查看appId、secret、并设置ip白名单

        3、开发者工具 -> web开发者工具，绑定开发者微信号

（3）代码编辑

    一、判断来源

    var ua = navigator.userAgent.toLowerCase();

    // 判断是否是支付宝

    var Alipay = ua.indexof('alipayclient') !== -1;window.isAlipay = Alipay;

    // 判断是否是微信

    var Weixin = ua.indexof('micromessenger') !== -1;window.isWeixin = Weixin;

 三、授权页面编辑

    1、跳转到微信的授权页面

data () {  

    return {    // 微信获取code地址
        getCodeUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=apid&redirect_uri=微信公众平台上的回调地址&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect',      

// 支付宝获取Auth_code地址
        getAuthCodeUrl: 'https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=appid&scope=auth_user&redirect_uri=支付宝开放平台上的回调地址'
     }
}
methods: {
    getCode () {     

        if (window.isWeixin) {     // 微信
            window.location.href = this.getCodeUrl
        } else if (window.isAlipay) {    // 支付宝
            window.location.href = this.getAuthCodeUrl
        } else {
            alert('请使用支付宝/微信扫描二维码！')
        }
    }
}

2、用户授权，页面跳转到“页面授权域名”，并带参数code -> 使用code,请求api接口 -> 请求成功，返回access_token、openid

// 判断是否已经获取过access_token、openid

if (window.isWeixin) {  

    if (!sessionStorage.getItem('openid')) {    

        this.getOpenid()
    }
} else if (window.isAlipay) {

}

// 没有则使用code获取axios.get('/op/sns/oauth2/access_token?appid=appid&secret=secret&code=' + sessionStorage.getItem('code') + '&grant_type=authorization_code').then(this.setOpenid)

二、支付宝授权

（1）原理

    判断是支付宝环境 -> 跳转到支付宝的授权页面 -> 用户授权，页面跳转到“支付宝开放平台设置的域名”，并带参数auth_code -> 将auth_code传给后台，后台获取token、userId

    官方文档：https://docs.open.alipay.com/289/105656

（2）登录支付宝开放平台申请应用、填写应用信息

（3）代码同上