基于Vue、Springboot网站实现第三方登录之QQ登录，以及邮件发送

基于Vue、Springboot实现第三方登录之QQ登录

• 前言
• 一、前提（准备）
• 二、QQ登录实现
• 1.前端
• 2.后端
• 1.application.yml 和工具类QQHttpClient
• 2.QQLoginController
• 三、邮件发送
• 1.引入依赖
• 2.配置文件application.properties
• 3.编码
• 四、结束~

---

前言

今天将基于Vue、Springboot实现第三方登录之QQ登录，以及QQ邮件发送给完成了，分享出来给大家~

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前提（准备）

要实现QQ登录这个功能呢，首先你得拥有一个备案好了的域名，然后前往QQ互联注册成为开发者，

传送门：QQ互联

审核通过之后呢，按照提示，创建一个网站应用，

注意PS：上图中的网站地址信息务必要和你的网站对应的信息相符合，否则是无法审核通过的哦~

创建完成后等待审核通过，比如我的：

进行下一步~~

要实现QQ邮件发送呢，首先登录你的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登录

四、结束~

自己不自觉不够努力，就不要怪别人不管你，不提醒你~ ------------------辰鬼