一、微信授权
（1）原理：
判断是微信环境 -> 跳转到微信的授权页面-> 用户授权，页面跳转到“页面授权域名”，并带参数code -> 使用code,请求api接口 -> 请求成功，返回access_token、openid
官方文档：https://mp./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./connect/oauth2/authorize?appid=apid&redirect_uri=微信公众平台上的回调地址&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect',// 支付宝获取Auth_code地址getAuthCodeUrl: '/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、openidif (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./289/105656
（2）登录支付宝开放平台申请应用、填写应用信息
（3）代码同上
