你所不知道的APP開發框架之MUI授權登錄方法

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('登錄認證失敗');
          });
      });

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章