PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 在h5页面做微信网页授权、支付宝授权

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

拾一枝樱花的博客
拾一枝樱花的博客 原创
2019年09月09日 09:55:13 6957浏览

一、微信授权

 (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)代码同上


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议