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('登录认证失败');
});
});