基于Vue、Springboot实现第三方登录之QQ登录
前言
今天将基于Vue、Springboot实现第三方登录之QQ登录，以及QQ邮件发送给完成了，分享出来给大家~
提示：以下是本篇文章正文内容，下面案例可供参考
一、前提（准备）
要实现QQ登录这个功能呢，首先你得拥有一个备案好了的域名，然后前往QQ互联注册成为开发者，
传送门：QQ互联
审核通过之后呢，按照提示，创建一个网站应用，
注意PS：上图中的网站地址信息务必要和你的网站对应的信息相符合，否则是无法审核通过的哦~
创建完成后等待审核通过，比如我的：
进行下一步~~
要实现QQ邮件发送呢，首先登录你的QQ邮箱，这里是传送门：
进入QQ邮箱页面，点击设置，选择账户，如下图：
准备工作完成！
二、QQ登录实现
1.前端
这里只贴相关代码，页面部分如下：
<!-- 第三方登录 -->
<el-divider>第三方登录</el-divider>
<div>
<a class="icon-qq" @click="LoginClick('qq')" href="javascript:void(0);">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-QQ"></use></svg></a>
</div>
methods中的代码如下：
// 第三方登录
LoginClick(value) {
if (value == "qq") {
var _this = this;
this.$axios.get('/qq/oauth').then(resp =>{
//window.open(resp.data.result, "_blank")
var width = width || 900;
var height = height || 540;
var left = (window.screen.width - width) / 2;
var top = (window.screen.height - height) / 2;
var win =window.open(resp.data.result, "_blank",
"toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left=" +
left + ", top=" + top + ", width=" + width + ", height=" + height);
//监听登录窗口是否关闭,登录成功后 后端返回关闭窗口的代码
var listener=setInterval(function(){
//监听窗口是否关闭
if(win.closed){
//进入这个if代表后端验证成功!直接跳转路由
clearInterval(listener);//关闭监听
//跳转路由
var path = _this.$route.query.redirect;
_this.$router.replace({
path:
path === "/" || path === undefined ? "/admin/dashboard" : path
});
_this.$router.go(0) //刷新
}
},500)
}).catch(fail =>{
console.error(fail)
})
}
},
上述代码中，由 @click=“LoginClick(‘qq’)” 触发事件，像后端发送请求，响应成功后，获取响应回来的数据 resp.data.result 通过window.open（）方法，在当前页面再打开一个窗口。效果大致如下:
为什么能显示这样效果呢？下面我们来看后端springboot代码~~
2.后端
导入所需依赖：
<!-- QQ第三方登录所需 -->
<!--httpclient-->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version> 4.5.9 </version>
</dependency>
<dependency>
<groupId>net.gplatform</groupId>
<artifactId>Sdk4J</artifactId>
<version>2.0</version>
</dependency>
1.application.yml 和工具类QQHttpClient
代码如下：
qq:
oauth:
http: http://www.wangxingjun.top/ #QQ互联中填写的网站地址
下面编写工具类 QQHttpClient，注意看注释，完整代码如下：
package top.wangxingjun.separate.util;
import com.alibaba.fastjson.JSONObject;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import java.io.IOException;
/**
* @author wxj
* QQ工具类（主要用于解析QQ返回的信息）
*/
public class QQHttpClient {
//QQ互联中提供的 appid 和 appkey
public static final String APPID = "qq互联创建的应用AppID";
public static final String APPKEY = "qq互联创建的应用Appkey";
private static JSONObject parseJSONP(String jsonp){
int startIndex = jsonp.indexOf("(");
int endIndex = jsonp.lastIndexOf(")");
String json = jsonp.substring(startIndex + 1,endIndex);
return JSONObject.parseObject(json);
}
//qq返回信息：access_token=FE04************************CCE2&expires_in=7776000&refresh_token=88E4************************BE14
public static String getAccessToken(String url) throws IOException {
CloseableHttpClient client = HttpClients.createDefault();
String token = null;
HttpGet httpGet = new HttpGet(url);
HttpResponse response = client.execute(httpGet);
HttpEntity entity = response.getEntity();
if(entity != null){
String result = EntityUtils.toString(entity,"UTF-8");
if(result.indexOf("access_token") >= 0){
String[] array = result.split("&");
for (String str : array){
if(str.indexOf("access_token") >= 0){
token = str.substring(str.indexOf("=") + 1);
break;
}
}
}
}
httpGet.releaseConnection();
return token;
}
//qq返回信息：callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} ); 需要用到上面自己定义的解析方法parseJSONP
public static String getOpenID(String url) throws IOException {
JSONObject jsonObject = null;
CloseableHttpClient client = HttpClients.createDefault();
HttpGet httpGet = new HttpGet(url);
HttpResponse response = client.execute(httpGet);
HttpEntity entity = response.getEntity();
if(entity != null){
String result = EntityUtils.toString(entity,"UTF-8");
jsonObject = parseJSONP(result);
}
httpGet.releaseConnection();
if(jsonObject != null){
return jsonObject.getString("openid");
}else {
return null;
}
}
//qq返回信息：{ "ret":0, "msg":"", "nickname":"YOUR_NICK_NAME", ... }，为JSON格式，直接使用JSONObject对象解析
public static JSONObject getUserInfo(String url) throws IOException {
JSONObject jsonObject = null;
CloseableHttpClient client = HttpClients.createDefault();
HttpGet httpGet = new HttpGet(url);
HttpResponse response = client.execute(httpGet);
HttpEntity entity = response.getEntity();
if(entity != null){
String result = EntityUtils.toString(entity,"UTF-8");
jsonObject = JSONObject.parseObject(result);
}
httpGet.releaseConnection();
return jsonObject;
}
}
2.QQLoginController
下面是控制层完整代码，如下:
package top.wangxingjun.separate.controller;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import lombok.extern.log4j.Log4j2;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.UsernamePasswordToken;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import top.wangxingjun.separate.entity.User;
import top.wangxingjun.separate.result.Result;
import top.wangxingjun.separate.result.ResultFactory;
import top.wangxingjun.separate.service.UserService;
import top.wangxingjun.separate.util.QQHttpClient;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.net.URLEncoder;
import java.util.UUID;
/**
* @author wxj
* @create 2019-09-27 20:32
* QQ第三方登陆接口
*/
@Controller
@Log4j2
public class QQLoginController{
@Value("${qq.oauth.http}")
private String http;
@Autowired
private UserService userService;
/**
* 发起请求
* @param session
* @return
*/
@GetMapping("/api/qq/oauth")
@ResponseBody
public Result qq(HttpSession session){
//QQ互联中的回调地址
String backUrl = http + "api/qq/callback";
//用于第三方应用防止CSRF攻击
String uuid = UUID.randomUUID().toString().replaceAll("-","");
session.setAttribute("state",uuid);
//Step1：获取Authorization Code
String url = "https://graph.qq.com/oauth2.0/authorize?response_type=code"+
"&client_id=" + QQHttpClient.APPID +
"&redirect_uri=" + URLEncoder.encode(backUrl) +
"&state=" + uuid;
return ResultFactory.buildSuccessResult(url);
}
/**
* QQ回调 注意 @GetMapping("/qq/callback")路径
* 是要与QQ互联填写的回调路径一致(我这里因为前端请求愿意不用写成 api/qq/callback)
* @param request
* @return
*/
@GetMapping("/qq/callback")
@ResponseBody
public String qqcallback(HttpServletRequest request,HttpServletResponse response) throws Exception {
response.setContentType("text/html; charset=utf-8"); // 响应编码
HttpSession session = request.getSession();
//qq返回的信息：http://graph.qq.com/demo/index.jsp?code=9A5F************************06AF&state=test
String code = request.getParameter("code");
String state = request.getParameter("state");
String uuid = (String) session.getAttribute("state");
if(uuid != null){
if(!uuid.equals(state)){
throw new Exception("QQ,state错误");
}
}
//Step2：通过Authorization Code获取Access Token
String backUrl = http + "/qq/callback";
String url = "https://graph.qq.com/oauth2.0/token?grant_type=authorization_code"+
"&client_id=" + QQHttpClient.APPID +
"&client_secret=" + QQHttpClient.APPKEY +
"&code=" + code +
"&redirect_uri=" + backUrl;
String access_token = QQHttpClient.getAccessToken(url);
//Step3: 获取回调后的 openid 值
url = "https://graph.qq.com/oauth2.0/me?access_token=" + access_token;
String openid = QQHttpClient.getOpenID(url);
//Step4：获取QQ用户信息
url = "https://graph.qq.com/user/get_user_info?access_token=" + access_token +
"&oauth_consumer_key="+ QQHttpClient.APPID +
"&openid=" + openid;
JSONObject jsonObject = QQHttpClient.getUserInfo(url);
//可以放到Redis和mysql中
//session.setAttribute("openid",openid); //openid,用来唯一标识qq用户
//session.setAttribute("nickname",(String)jsonObject.get("nickname")); //QQ名
//session.setAttribute("figureurl_qq_2",(String)jsonObject.get("figureurl_qq_2")); //大小为100*100像素的QQ头像URL
if(!userService.qqisExist(openid)){//用户不存在
User u=new User();
u.setUsername(openid);
u.setPassword("123456");
u.setOpenid(openid);
u.setName((String)jsonObject.get("nickname"));
u.setTpath((String)jsonObject.get("figureurl_qq_2"));
u.setEnabled(true);
//注册
userService.qqregister(u);
//redirect:../admin/dashboard
return "<script>window.close();</script>";
}
User us=userService.findByOpenid(openid);
UsernamePasswordToken token = new UsernamePasswordToken(us.getUsername(), "123456");
SecurityUtils.getSubject().login(token);
return "<script>window.opener.localStorage.setItem('username', '"+JSON.toJSONString(us)+"');window.close();</script>";
}
}
我们可以看到，控制层中有两处方法，第一个方法就是发起登录的请求处理方法，第二个方法就是处理前端打开了QQ授权窗口之后，授权成功的回调请求处理方法（注意路径要和你在QQ互联上填写回调路径一致）。第二个方法里面便可以处理你的具体逻辑，比如是否是第一次登录，按照自己业务需求来~ 而我这里的处理逻辑是：第一次登录，那就进行注册，然后通过返回一段js代码，使前台的qq窗口关闭，这里我们重点要注意，看图：
对应的前端代码，如下图：
通过监听窗口是否关闭，来进行下一步逻辑处理。
三、邮件发送
上面已经将qq登录相关的介绍完了，下面将邮件发送也补充上！（前期准备写在上面了）
我这里的处理逻辑是：qq登录时，如果从数据库中通过openid查询数据，不存在即表示需要注册，然后调用注册方法注册。如果数据库存在，即直接通过openid查询对应信息，然后通过拼接js代码的方式，将其对应信息存入前端vue中的localStorage里面。看下面图：
图中的window.opener.localStorage.setItem(‘username’, ‘"+JSON.toJSONString(us)+"’);换成你自己的存放方法即可。重点是 window.close();能够将前端qq窗口关闭。而window.opener，指向的是当前父级浏览器窗口~
呃呃呃呃呃~咋又扯到qq登录相关的去了，算了，就算是解释补充吧，毕竟是结合使用的。
好了，继续下面的逻辑：当第一次登录时，进行注册，注册成功之后发送qq邮件给管理员，这样管理员就可以收到邮件。
下面看实现步骤：
1.引入依赖
<!--邮箱发送-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency>
2.配置文件application.properties
# 邮件发送配置
# 因为是QQ邮箱，所以host需要使用smtp.qq.com。如果是其它邮箱，搜索下即可找到。
spring.mail.host=smtp.qq.com
# 这里便是写你在qq邮箱设置的@foxmail.com
spring.mail.username=acechengui@foxmail.com
# 这里便是写你在qq邮箱设置POP3/SMTP服务生成的令牌
spring.mail.password=XXXXXXXXXX
# 编码格式
spring.mail.default-encoding=UTF-8
#开启加密验证
spring.mail.properties.mail.smtp.ssl.enable=true
3.编码
@Autowired
private JavaMailSender javaMailSender;
注入之后，我这里是将邮件发送，写在业务层，相关代码如下：
/**
* 邮件发送
* @param username
* @throws MessagingException
* From需要和配置文件中的username一致，否则会报错。
* To为邮件接收者；
* Subject为邮件的标题；
* Text为邮件的内容。
*/
public void mailSend(String username) throws MessagingException {
//发送简单邮件
//SimpleMailMessage message = new SimpleMailMessage();
//message.setFrom("acechengui@foxmail.com");
//message.setTo("623169670@qq.com");
//message.setSubject("用户注册通知");
//message.setText("用户"+username+"注册成功,请及时进行赋权");
//javaMailSender.send(message);
//发送HTML邮件
MimeMessage mimeMessage = javaMailSender.createMimeMessage();
MimeMessageHelper messageHelper = new MimeMessageHelper(mimeMessage);
messageHelper.setSubject("用户注册通知");
messageHelper.setFrom("acechengui@foxmail.com");
messageHelper.setTo("623169670@qq.com");
messageHelper.setText("<a href='javascript:void(0)'>用户"+username+"注册成功,请及时进行赋权</a>", true);
javaMailSender.send(messageHelper.getMimeMessage());
}
再到需要发送的地方调用此方法，这里有两种发送邮件方式，一个简单发送，另一种自定义格式的发送，当然还有携带文件的发送，那就的自行百度了实现起来基本一样，比如我这里是注册后发送邮件，看如下图调用即可：
到此，邮件发送使用介绍结束了，下面来看我的效果，看视频：
vue springboot实现qq邮件发送
下面来看下注册成功之后再进行qq登录，看视频：
vue springboot实现qq登录
四、结束~
自己不自觉不够努力，就不要怪别人不管你，不提醒你~ ------------------辰鬼