大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
一、前言
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;
}
三、案例源码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231339.html原文链接：https://javaforall.net
