移动端使用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 官方文档