uniapp app 第三方登录功能实现

需求描述：

1.在app"我的"页面点击"我要登录"按钮，跳转出一键登录弹框；
2.点击"切换登录方式"按钮，跳转到其他登录方式页面；
3.在其他登录方式页面需要有微信，qq，和微博登录按钮，并且点击可完成第三方登录；

实现第三方登录功能

准备

需要在HBuilderX当前项目manifest.json中配置如下：

实现第三方登录前需要开通权限.png

由于是测试，我就随便填了个数字，真实开发中需要在相关平台中使用公司账号申请相应的appid,新浪微博是appKey；

关于一键登录的功能已经在上一篇写过了，这里设置fullScreen: false;实现下图：

1.png

点击切换登录方式跳转页面；

2.png

更多登录方式中

点击微信代码：

wxLogin() {
                uni.showToast({ title: '微信登录', icon: 'none' });
                //调用uni.login 时就会打开微信授权的页面
                // 在uni.login 的成功回调函数里面  调用uni.getUserInfo来获取微信的个人信息
                uni.login({
                    provider:'weixin',
                    success: (loginreq) => {
                        console.log("loginreq:"+JSON.stringify(loginreq))
                        uni.getUserInfo({
                            provider:'weixin', 
                            success: (successreq) => {//拿到微信的信息   头像 昵称 等  
                                console.log("successreq"+JSON.stringify(successreq))
                            }
                        })
                    }
                })
            },

直接进入微信授权页面

点击qq

qqLogin(){
                uni.showToast({
                    title:"qq登录",
                    icon: 'none'
                })
                uni.login({
                    provider:'qq',//调用QQ授权
                    success: (loginreq) => {
                        console.log("loginreq:"+JSON.stringify(loginreq))
                        uni.getUserInfo({
                            provider:'qq', 
                            success: (successreq) => {//拿到qq的信息   头像 昵称 等  
                                console.log("successreq"+JSON.stringify(successreq))
                            }
                        })
                    }
                })
            },

弹出qq授权页面

3.png

点击微博

sinaLogin(){
                uni.showToast({
                    title:"微博登录",
                    icon: 'none'
                })
                uni.login({
                    provider:'sinaweibo',//调用QQ授权
                    success: (loginreq) => {
                        console.log("loginreq:"+JSON.stringify(loginreq))
                        uni.getUserInfo({
                            provider:'sinaweibo', 
                            success: (successreq) => {//拿到微博的信息   头像 昵称 等  
                                console.log("successreq"+JSON.stringify(successreq))
                            }
                        })
                    }
                })
            }
          }

弹出微博授权页面

4.png

数据拿回来了，就开整吧