移动端使用mui实现第三方登录
plus
首先你要知道在真机的运行环境下，
我们会有一个顶级对象plus，
有了这个顶级对象才能去调用对应的API
引入mui
<button id="qq" class="login">QQ</button>
<button id="weixin" class="login">微信</button>
<script src="js/mui.min.js"></script>
<script>
//初始化mui
mui.init();
//监听plus顶级对象准备完成，才去做对应操作
mui.plusReady(function() {
})
</script>
获取所有支持第三方登录的服务
mui.plusReady(function() {
// 在这里调用plus api
let ServicesData = null
// 获取所有第三方登录服务列表
plus.oauth.getServices(function(data) {
ServicesData = data
}, function(err) {
console.log(err.message);
});
})
找到你点击三方登录的服务对象
mui('body').on('tap', '.login', function() {
// 从第三方登录服务列表找到你点击的
let obj = ServicesData.find(item => item.id == this.id)
if (obj != -1) {
//登录
obj.login(() => {
//页面跳转
var webview = mui.openWindow({
url: 'new_file.html',
id: 'web1',
extras: {
targetId: id
}
});
mui.toast('登录成功')
}, function(err) {
console.log(err.message);
});
}
})
以上就是登录成功之后跳转到另一个页面
获取第三方个人信息
下面是在新的页面获取到你对应的第三方信息
只写了微信和qq，其他的字段不一样要写判断
不做详解，代码献上，有注释
mui.init()
class Hada {
constructor() {
// 获取到页面跳转带过来的对象
this.data = plus.webview.getWebviewById('web1')
this.obj = null
this.userInfo = null
this.objinit()
}
// obj 初始化
objinit() {
// 获取所有第三方登录服务列表
plus.oauth.getServices((data) => {
// 从第三方登录服务列表找到你点击的
this.obj = data.find(item => item.id == this.data.targetId)
this.getinfo()
}, function(err) {
console.log(err.message);
});
}
// 个人信息初始化
getinfo() {
this.obj.getUserInfo((data) => {
this.userInfo = data
this.dominit()
}, function(err) {
console.log(err.message);
});
}
// dom初始化
dominit() {
console.log(JSON.stringify(this.userInfo));
let tx = document.getElementsByClassName('tx')[0]
let uname = document.getElementsByClassName('uname')[0]
let logout = document.getElementsByClassName('logout')[0]
tx.src = this.userInfo.target.userInfo.headimgurl
uname.innerText = this.userInfo.target.userInfo.nickname
// 退出登录
mui("body").on('tap', '.logout', () => {
this.obj.logout(function() {
mui.back()
mui.toast('退出了')
}, function() {
mui.toast('退出失败')
});
})
}
}
mui.plusReady(function() {
new Hada()
})
参考文档&资料
官方文档 第三方登录API HTML5+ API
Mui 官方文档
