微信授权登录,uniapp微信授权登录,wap2app微信授权登录,h5plus微信授权登录

16 篇文章 0 订阅
6 篇文章 0 订阅

既然是Dcloud产品,那编译器不约而同使用HBuilderX,并且下面的截图是前提

UniAPP中的微信登陆(APP端)

uni.login({
    provider: 'weixin',
    success: function(loginRes) {
        // uniapp为我们封装了微信登陆,loginRes参数里含有我们需要的openid,unionid,access_token等参数
        let openid = loginRes.authResult.openid;
        let unionid = loginRes.authResult.unionid;
        let access_token = loginRes.authResult.access_token;
		if(unionid){
            // 我们拿到openid、unionid、access_token等参数之后调用后端接口传给后端需要的参数
            // 编写我们的业务逻辑
            // openid,access_token,unionid
		}else{
            // unionid在某些情况下是不存在的【当且仅当该移动应用已获得该用户的 userinfo 授权时,才会出现该字段】(文档中的原话)
            // 所以这里使用原生xhr请求获取unionid
			let xhr = new plus.net.XMLHttpRequest();
            // 传给微信服务器openid和access_token来获取unionid
			xhr.open( "GET", "https://api.weixin.qq.com/sns/userinfo?access_token="+access_token+"&openid="+openid );
			xhr.send();
			xhr.onreadystatechange = function () {
			    if(xhr.readyState == 4 && xhr.status == 200){
				    let res = JSON.parse(xhr.responseText)
					unionid = res.unionid;
                    // 这里我们就可以拿到openid、unionid、access_token等参数
                    // 然后调用后端接口传给后端需要的参数来编写我们的业务逻辑
                    // openid,access_token,unionid
				}else if(xhr.readyState == 4 && xhr.status != 200){
					// console.log( "请求失败:"+xhr.readyState );
					uni.showToast({
					    title: '微信登录出错',
					    icon: 'none'
					})
				}
			}
		}
	},
	fail: function() {
	    uni.showToast({
		    title: '微信登录出错',
			icon: 'none'
		})
	}
});

Wap2APP(使用的是H5+API)(APP端)

// 第一步先获取微信服务
plus.oauth.getServices( function(services){
    var wx = null;
    // 遍历所有的服务列表,获取到微信服务
    for(var i = 0;i<services.length;i++){
        if(services[i].id == 'weixin'){
            wx = services[i];
            break;
        }
     }
     // 如果没有微信服务,检查一下前提【manifest.json是否配置】
     if(!wx){
        plus.nativeUI.alert('当前环境不支持微信登陆');
        return false;
     }
     // 第二步获取微信授权
     wx.authorize(function(event){
         // plus.nativeUI.alert("授权成功:"+JSON.stringify(event));
         if(!wx.authResult){
             // 第三步微信登录
             wx.login(function(res){
                 // 这里res参数同样包含有后端需要的参数
                 var access_token = res.target.authResult.access_token;
                 var openid = res.target.authResult.openid;
                 var unionid = res.target.authResult.unionid;
                 var data = {
                     openid:openid,
                     access_token:access_token,
                     unionid:unionid
                 }
                 // 但同样有些情况unionid是获取不到的,所以使用原生xhr请求传入access_token和openid获取unionid
                 if(!data.unionid){
                     var xhr = new plus.net.XMLHttpRequest();
                     xhr.open( "GET", "https://api.weixin.qq.com/sns/userinfo?access_token="+access_token+"&openid="+openid );
					 xhr.send();
					 xhr.onreadystatechange = function () {
					     if(xhr.readyState == 4 && xhr.status == 200){
                             let res = JSON.parse(xhr.responseText)
                             data.unionid = res.unionid;
                             // 这里就拿到了unionid
                             // 接下来编写业务逻辑
						 }else if(xhr.readyState == 4 && xhr.status != 200){
							 console.log( "请求失败:"+xhr.readyState );
						 }
					 }
                  }else{
                     data.unionid = res.target.authResult.unionid;
                     // 这里拿到了login时候的unionid
                     // 接下来编写业务逻辑
                  }
                }, function(e){
                   plus.nativeUI.alert("登录认证失败:"+JSON.stringify(e));
                } );
            }else{
                plus.nativeUI.alert("已经授权认证!");
            }
        }, function(err){
            plus.nativeUI.alert("授权失败");
        }, {
            scope:'snsapi_userinfo'
        });
    }, function(e){
        plus.nativeUI.alert("获取服务列表失败:"+e.message+" - "+e.code);
    } );

个人博客👉:点此进入(http://xueshuai.top)

PHP学习交流群👉:PHP学习交流群

前端学习交流群👉:前端交流群

微信公众号👉:叮当Ding

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端薛小帅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值