在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）代码同上

转载于:https://my.oschina.net/missZhuo/blog/2992669