一、前言

Vue 实现QQ第三方登录授权需要获取到 APP_ID和回调域地址，关于这2个的获取方式可以参考小编的另外一篇文章 Java 实现QQ第三方登录

温馨小提示：

本文基于springboot+vue前后端分离的架构实现三方登录授权

主要实现逻辑：

前端vue进行授权页面跳转，授权过来拿到后端需要的openID，accessToken参数，最后后端获取到授权用户信息进行业务处理完之后再返回给前端进行登录操作等等…

二、Vue 实现QQ第三方登录授权

1、在vue项目下的index.html中引入QQ 第三方登录所需JS SDK

<script type="text/javascript" 
			src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
            data-callback="true"
            data-appid="填写自己的APP_ID"
            data-redirecturi="回调地址url"
            charset="utf-8">
</script>

2、给三方授权按钮绑定事件 -> 跳转到授权页面

<template>
    <div @click="qqLoginClick('qq')">QQ第三方登录</div>
</template>
<script>
    export default {
        name: 'QQLogin',
        methods: {
            // QQ 第三方登录
            qqLoginClick(value) {
                // 直接弹出授权页面，授权过后跳转到回调页面进行登录处理
                QC.Login.showPopup({
                    appId:"填写自己的APP_ID",
                    redirectURI:"回调地址url"  //登录成功后会自动跳往该地址
                });
            }
        }
    }
</script>

3、授权过后在回调页面调用QQ的js方法获取 openId，accessToken

export default {
    name: 'Login',
    data() {
  	   return {
  		  timer: null  // 定时器名称
  	   }
    }
    mounted() {
       // 定时器
       this.timer = setInterval(this.qqLogin, 3000);
    },
    methods: {
	    // QQ第三方登录
	    qqLogin(){
		    var that = this; // 先将vue这个对象保存在_self对象中
		    //检查是否登录
		    if (QC.Login.check()) {
		        //该处的openId，accessToken就是后台需要的参数了，后台可以通过这些参数获取临时登录凭证，然后就是自己的逻辑了
		        QC.Login.getMe(function (openId, accessToken) {
		            if (  openId != undefined ){
		                that.loading = true;
		                // 传参给后台进行登录验证
		                that.$store.dispatch('LoginByUsername', {
		                    username: '',
		                    openId: openId,
		                    accessToken: accessToken
		                }).then(() => {
		                    that.loading = false;
		                    that.$router.push({ path: '/' })
		                }).catch(() => {
		                    that.loading = false
		                })
		            }
		        });
		        console.log('已登录!')
		        // 清除定时器
		        clearInterval(this.timer);
		        this.timer = null;
		    } else {
		        console.log('未登录!')
		    }
	    }
    }
}

4、Java后端通过Vue前端传过来的openID，accessToken获取到授权用户信息，然后进行业务逻辑处理再返回给前端

Java后端所需QQ第三方登录授权依赖

<!-- QQ第三方登录所需 -->
<dependency>
    <groupId>net.gplatform</groupId>
    <artifactId>Sdk4J</artifactId>
    <version>2.0</version>
</dependency>

import com.qq.connect.api.qzone.UserInfo;
import com.qq.connect.javabeans.qzone.UserInfoBean;
/**
 * QQ 授权登录
 * @param openID
 * @param accessToken
 * @return
 * @throws QQConnectException
 */
public UserQueryPara qqLogin( String openID, String accessToken ) throws QQConnectException {
    // 通过OpenID获取QQ用户登录信息对象(Oppen_ID代表着QQ用户的唯一标识)
    UserInfo qzoneUserInfo = new UserInfo(accessToken, openID);
    // 获取用户信息对象(userInfoBean中包含了我们想要的一些信息，比如：nickename、Gender、头像)
    UserInfoBean userInfoBean = qzoneUserInfo.getUserInfo();
    // ...
    return null;
}

三、案例源码

码云地址 或 GitHub地址