你所不知道的APP开发框架之MUI授权登录方法

最新推荐文章于 2022-08-10 14:52:57 发布

It骑手

最新推荐文章于 2022-08-10 14:52:57 发布

阅读量1.4k

点赞数 1

分类专栏： APP 文章标签： APP授权 Java JavaScript MUI授权

本文链接：https://blog.csdn.net/scf1198862746/article/details/101052657

版权

APP 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js封装好的方法 TripartiteLogin.js 自定义文件名

//三方登录
var wxLoginObject = wxLoginObject||{};
//微信登录元素id，默认id是 wxLogin
wxLoginObject.domId = "wxLogin";
//绑定登录事件
//三方登录
var qqLoginObject = qqLoginObject||{};
//微信登录元素id，默认id是 wxLogin
qqLoginObject.domId = "qq";
//绑定登录事件
qqLoginObject.login = function(domId,successCallBack,errorCallBack){
	this.domId = domId;
	var loginDom = document.getElementById(this.domId);
	if(loginDom){
		loginDom.addEventListener("tap", function() {
			// 获取登录认证通道
			plus.oauth.getServices(function(services) {
				var auth = null;
				for (var item in services) {
					if (services[item].id == "qq") {
						auth = services[item];
						break;
					}
				}
				if (auth) {
					var w = null;
					//如果是安卓手机,则加载等待ui
					if (plus.os.name == "Android") {
						w = plus.nativeUI.showWaiting();
					}
					//监听运行环境从前台切换到后台事件
					document.addEventListener("pause", function() {
						setTimeout(function() {
							w && w.close();
							w = null;
						}, 2000);
					}, false);
					//登录验证回调
					auth.login(function(event) {
						//验证成功
						w && w.close();
						w = null;
						//微信登录成功用户信息
						var WXUserInfo = event.target.userInfo;
						//兼容ios和Android的微信信息接口
						mui.post('https://graph.qq.com/user/get_user_info', {
							access_token: auth.authResult.access_token,
							oauth_consumer_key: auth.authResult.access_token,
							openid: auth.authResult.openid,
						}, function(result) {
							//验证用户注册信息
							try {
								result = JSON.parse(result);
								successCallBack(result);
							} catch (e) {
								//TODO handle the exception
								successCallBack(result);
							}
						});
					}, function(e) {
						//验证失败
						w && w.close();
						w = null;
						mui.toast("登录认证失败：[" + e.code + "]：" + e.message);
						// plus.nativeUI.alert("详情错误信息请参考授权登录(OAuth)规范文档：http://www.html5plus.org/#specification#/specification/OAuth.html",null,"登录失败["+e.code+"]："+e.message);
					});
				} else {
					mui.toast("无效的登录认证通道！");
					plus.nativeUI.alert("无效的登录认证通道！", null, "登录");
				}
			}, function(e) {
				mui.toast("获取登录认证失败：" + e.message);
			});
		}); 
	}
	else{
		var data = {msg:"未找到登录按钮id："+domId};
		errorCallBack(data);
	}
}

wxLoginObject.login = function(domId,successCallBack,errorCallBack){
	this.domId = domId;
	var loginDom = document.getElementById(this.domId);
	if(loginDom){
		loginDom.addEventListener("tap", function() {
			// 获取登录认证通道
			plus.oauth.getServices(function(services) {
				var auth = null;
				for (var item in services) {
					if (services[item].id == "weixin") {
						auth = services[item];
						break;
					}
				}
				if (auth) {
					var w = null;
					//如果是安卓手机,则加载等待ui
					if (plus.os.name == "Android") {
						w = plus.nativeUI.showWaiting();
					}
					//监听运行环境从前台切换到后台事件
					document.addEventListener("pause", function() {
						setTimeout(function() {
							w && w.close();
							w = null;
						}, 2000);
					}, false);
					//登录验证回调
					auth.login(function(event) {
						//验证成功
						w && w.close();
						w = null;
						//微信登录成功用户信息
						var WXUserInfo = event.target.userInfo;
						//兼容ios和Android的微信信息接口
						mui.post('https://api.weixin.qq.com/sns/userinfo', {
							access_token: auth.authResult.access_token,
							openid: auth.authResult.openid,
						}, function(result) {
							//验证用户注册信息
							try {
								result = JSON.parse(result);
								successCallBack(result);
							} catch (e) {
								//TODO handle the exception
								successCallBack(result);
							}
						});
					}, function(e) {
						//验证失败
						w && w.close();
						w = null;
						mui.toast("登录认证失败：[" + e.code + "]：" + e.message);
						// plus.nativeUI.alert("详情错误信息请参考授权登录(OAuth)规范文档：http://www.html5plus.org/#specification#/specification/OAuth.html",null,"登录失败["+e.code+"]："+e.message);
					});
				} else {
					mui.toast("无效的登录认证通道！");
					plus.nativeUI.alert("无效的登录认证通道！", null, "登录");
				}
			}, function(e) {
				mui.toast("获取登录认证失败：" + e.message);
			});
		});
	}
	else{
		var data = {msg:"未找到登录按钮id："+domId};
		errorCallBack(data);
	}
}

登录页面的JavaScript代码

	wxLoginObject.login("wxLogin", function(data) {  //微信按钮的id wxLogin QQ按钮的id qq  
				console.log(JSON.stringify(data))//data是js获取里面的内容
            app.openid=data.openid
			app.headimgurl=data.headimgurl
			 app.nickname=data.nickname
				
				mui.ajax(site_url + '/home/Loginnav/user', {  //自己的请求更新关联起来
					data: {
						openId: data.openid
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						console.log(JSON.stringify(data))
						if (data.status == 1) {
							plus.storage.setItem("token", data.msg);
							mui.openWindow({
								url: '../common/lm_c_foot.html',
							});
						} else if (data.status == 0) {
							//授权成功跳转绑定手机号
							//跳转页面就行
							//bindWithWeChat(app.openid, app.headimgurl, app.nickname);
						} else {

							mui.toast(data.msg);

						}
					},
					error: function(xhr, type, errorThrown) {

					}
				});

			}, function(errorData) {
				mui.toast("授权登录失败");

			})

	function bindWithWeChat(openId,headimgurl,nickname) {
				console.log(openId+headimgurl+nickname)
				mui.openWindow({
					url: '../login/band_tel.html',
					id: "band_tel",
					extras: {
						openId: openId,
						headimgurl: headimgurl,
						nickname: nickname,
					},
					createNew: true

				})

			}

mui自带的方法

document.getElementById("wechat").addEventListener('tap', function() {  //wechat 按钮的id
        plus.oauth.getServices(function(services) {
            auths = services;
            //auths解释0QQ 1微信 2微博 3小米，但是不建议使用auths[1]类似的写法，因为各个设备排序不一样，比较坑爹
            //注意获取使用unionid，此id通用后期的微信端等它会用户共享，（openid完全唯一）
            //var s = auths[1];
            var s;
            for (var i = 0; i < auths.length; i++) {
              if (auths[i].id == 'weixin') {
                s = auths[i];
                break;
              }
            }

            if (!s.authResult) {
              s.login(function(e) {
                // 获取登录操作结果
                s.getUserInfo(function(e) {
                  console.log("获取用户信息成功：" + JSON.stringify(s.userInfo));
                  openid = s.userInfo.openid;
                  // console.log(openid);  
                  //mui.toast('登录成功');
                  mui.post(site_url + 'app/wx_login', {
                    openId: s.userInfo.openid,
                  }, function(res) {
                    if (res.status_code == 200) {
                      window.localStorage.setItem('token', res.token);
                      window.localStorage.setItem('getStatus', res.getStatus);
                      mui.toast(res.prompt);
                      var vip_page = plus.webview.getWebviewById('vip_index.html');
                      mui.fire(vip_page, 'refresh');
                      mui.back();
                    } else if (res.status_code == 202) {
                      mui.openWindow({
                        url: "../vip/vip_bind_mobile.html",
                        id: 'bind_mobile.html',
                        createNew: true,
                        waiting: {
                          autoShow: true,
                          title: '正在加载..',
                        },
                        extras: {
                          openId: openid,
                        }
                      });
                    }
                  }, 'json');
                }, function(e) {
                  console.log("获取用户信息失败：" + e.message + " - " + e.code);
                  mui.toast('获取用户信息失败');
                });

              }, function(e) {
                mui.toast('登录认证失败');
              });
            }
             else {
              //已经登录认证
                  mui.toast('登录成功');
                  window.localStorage.setItem('token', localStorage.token);
                  var vip_page = plus.webview.getWebviewById('vip_index.html');
                  mui.fire(vip_page, 'refresh');
                  mui.back();
            }

          },
          function(e) {
            console.log("获取登录失败：" + e.message + " - " + e.code);
            mui.toast('登录认证失败');
          });
      });

It骑手

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
你所不知道的APP开发框架之MUI授权登录方法

js封装好的方法 TripartiteLogin.js 自定义文件名//三方登录var wxLoginObject = wxLoginObject||{};//微信登录元素id，默认id是 wxLoginwxLoginObject.domId = "wxLogin";//绑定登录事件//三方登录var qqLoginObject = qqLoginObject||{};...
复制链接

扫一扫