admin管理员组文章数量:1531663
一、前言
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/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地址
版权声明:本文标题:Vue + Java 实现QQ第三方登录授权 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1725532861a1028104.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论