uniapp登录授权

一、第一阶段（微信，QQ，微博）

<template>
    <view class="content">
        <view class="box">
            <view class="item">
                <image :src="qqimg" data-loginType="qq" mode="" @tap="auth" class="imagestyle"></image>
                <view class="">
                    {{qqname}}
                </view>
            </view>
            <view class="item">
                <image :src="weixinimg" data-loginType="weixin" mode="" @tap="auth" class="imagestyle"></image>
                <view class="">
                    {{weixinname}}
                </view>
            </view>
            <view class="item">
                <image :src="weiboimg" data-loginType="sinaweibo" mode="" @tap="auth" class="imagestyle"></image>
                <view class="">
                    {{weiboname}}
                </view>
            </view>
        </view>
        <view class="" @tap='goauthentication()'>
            指纹认证
        </view>
        <view class="" @tap='gooldauthentication()'>
            旧指纹认证
        </view>
        
        <view class="input">
            <input type="text" value="" @input="onChange" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                qqname: "qq_name",
                weixinname: "weixin_name",
                weiboname:'weibo_name',
                qqimg: require('@/static/images/QQ.png'),
                weixinimg: require('@/static/images/Weixin.png'),
                weiboimg:require('@/static/images/Weibo.png')
            }
        },
        onLoad() {

        },
        methods: {
            
            // 获取数据
            onChange(){
                uni.onKeyboardHeightChange(res => {
                  console.log(res.height)
                })
            },
            
            
            // 跳转到指纹认证
            goauthentication:function(){
                uni.navigateTo({
                    url:"/pages/authentication/authentication"
                })
            },
            
            // 跳转到旧指纹认证
            gooldauthentication:function(){
                uni.navigateTo({
                    url:"/pages/oldauthentication/oldauthentication"
                })
            },
            
            auth(e) {
                var that = this;
                let loginType = e.currentTarget.dataset.logintype
                console.log("loginType", loginType)
                uni.login({
                    provider: loginType,
                    success(res) {
                        console.log(res)
                        // 登录成功后, 获取用户数据
                        uni.getUserInfo({
                            provider: loginType,
                            success(info) {
                                var userInfo = info.userInfo
                                console.log("userInfo", userInfo)
                                var nickName = ""
                                var avatarUrl = ""
                                var openId = ""
                                if (loginType == "weixin") {
                                    nickName = userInfo.nickName
                                    that.weixinname = nickName
                                    that.weixinimg = userInfo.avatarUrl
                                    avatarUrl = userInfo.avatarUrl
                                    openId = userInfo.openId
                                } else if (loginType == "qq") {
                                    nickName = userInfo.nickname
                                    that.qqimg = userInfo.figureurl_qq
                                    that.qqname = nickName;
                                    avatarUrl = userInfo.figureurl_qq_2
                                    // qq返回了多个尺寸的头像, 按需选择
                                    openId = userInfo.openId
                                } else if (loginType == "sinaweibo") {
                                    console.log("userInfo",userInfo)
                                    that.weiboname = userInfo.nickName
                                    that.weiboimg = userInfo.avatar_large
                                    nickName = userInfo.nickname
                                    avatarUrl = userInfo.avatar_large
                                    openId = userInfo.id
                                }
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .content {
        .box {
            width: 100%;
            padding: 20rpx;
            box-sizing: border-box;
            display: flex;

            .item {
                width: 33.33%;
                text-align: center;
                border-right: 1rpx solid #C0C0C0;

                .imagestyle {
                    width: 50%;
                    height: 120rpx;
                }
            }
        }
    }
</style>