本文转自Fun言网：https://funyan.cn/p/1705.html

前言

最近在弄第三方登录，实现起来很简单，就是调几个接口获取个人信息即可，详细了解：maven项目整合QQauth2.0第三方登录详细说明，然后因为本网站是前后端分离的，所以不能再回调接口那里直接跳转到我想要的页面，因为我的接口都是通过Ajax进行前后端通信的，查阅了很多资料，有说用websocket的，有用前后端验证的，众说纷纭等等，然后我就想，可不可以让第三方应用的回调地址是一个html，然后我在html再调接口呢，这样就把主动权交在我手里了，答案是肯定的，所以下面就教大家在网站是前后端分离如何实现QQ微信等第三方登陆。

详细步骤

第一步：在第三方应用申请登录接口，在回调一栏写上本网站的一个负责跳转的html，如下图所示

第二步：在前端利用window.open打开qq登录页面，这个qq登录页需要从后台获取，详情参考：maven项目整合QQauth2.0第三方登录详细说明

//发送验证码
function qqLogin() {$.ajax({type: "GET",url: baseContext.path + "user/getCode",success: function (data) {var winObj=window.open(data, 'qq登录', 'height=800, width=600, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');//循环监听，知道子页面啥时候关闭，只要关闭了就跳转到指定页面var loop = setInterval(function() {if(winObj.closed) {clearInterval(loop);window.location.href="newindex.html";}}, 500);},error: function () {layer.alert('连接失败', {icon: 2,skin: 'layer-ext-moon'});}});}

第三步：输入密码后，qq会请求你的回调地址，这时就跳转到你写的那个登录跳转页了，这时就需要在那个页面请求后台接口，根据qq的code，获取access_token,openId,个人信息了，具体参考：maven项目整合QQauth2.0第三方登录详细说明

$(function (){saveLoginUser();})//获取url参数内容
function GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则if (r != null) return decodeURI(r[2]);return null;
}//qq登录后的操作
function saveLoginUser() {var code=GetQueryString("code");var loadingIndex = layer.load(2, { //icon支持传入0-2shade: [1, '#46c37b'], //0.5透明度的灰色背景content: '登录中...',success: function (layero) {layero.find('.layui-layer-content').css({'padding-top': '45px','width': '160px'});}});$.ajax({url: baseContext.path + 'user/loginAfter',type: 'GET',data: {code:code},dataType: 'json',success: function (data) {if (data.code == 100) {console.log("获取用户信息成功");//将用户信息存到localStoragelocalStorage.setItem("token", data.result.token);localStorage.setItem("userId", data.result.userId);localStorage.setItem("headImg", data.result.userInfo.headPhoto);localStorage.setItem("nickname", data.result.userInfo.nickname);//关闭窗口，这时父窗口会知道你关闭了窗口，就会跳转到首页window.open("","_self").close();}else{layer.confirm('登录失败请重试', {btn: ['确定'], //按钮icon:2}, function(){window.open("","_self").close();});}}});
}

第四步：后台接口的书写，具体参考：maven项目整合QQauth2.0第三方登录详细说明，我这里把几个步骤写在一块了，具体根据你的业务需求来定

package cn.funyan.user.controller;import cn.funyan.base.basic.Res;
import cn.funyan.user.QQUserInfo;
import cn.funyan.user.UserAuths;
import cn.funyan.user.service.UserAuthsService;
import cn.funyan.user.service.UserService;
import cn.funyan.utils.HttpClientsUtils;
import cn.funyan.utils.URLEncodeUtil;
import com.alibaba.fastjson.JSON;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.Map;/*****/
@RestController
public class QqLoginController
{@Autowiredprivate UserAuthsService userAuthsService;@Autowiredprivate UserService userService;private String qqAppId="10108";private String qqAppSecret="5964bae5ac3b41b80256e9";private String qqRedirectUrl="https://funyan.cn/logining.html";@GetMapping("/getCode")public String getCode() throws Exception {//拼接urlStringBuilder url = new StringBuilder();url.append("https://graph.qq.com/oauth2.0/authorize?");url.append("response_type=code");url.append("&client_id=" + qqAppId);//回调地址 ,回调地址要进行Encode转码String redirect_uri = qqRedirectUrl;//转码url.append("&redirect_uri="+ URLEncodeUtil.getURLEncoderString(redirect_uri));url.append("&state=ok");String result = HttpClientsUtils.get(url.toString(),"UTF-8");System.out.println(url.toString());return  url.toString();}//qq回调地址，获取qqtoken，获取用户unionid，用户头像昵称等信息@GetMapping("loginAfter")public Res loginAfter(String code) throws Exception{//第一步获取qqtokenif (code != null){System.out.println(code);}StringBuilder url = new StringBuilder();url.append("https://graph.qq.com/oauth2.0/token?");url.append("grant_type=authorization_code");url.append("&client_id=" + qqAppId);url.append("&client_secret=" + qqAppSecret);url.append("&code=" + code);//回调地址String redirect_uri = qqRedirectUrl;//转码url.append("&redirect_uri="+ URLEncodeUtil.getURLEncoderString(redirect_uri));String result = HttpClientsUtils.get(url.toString(),"UTF-8");System.out.println("url:" + url.toString());//把token保存String[] items = StringUtils.splitByWholeSeparatorPreserveAllTokens(result, "&");String accessToken = StringUtils.substringAfterLast(items[0], "=");//第二步获取openid、unionIdurl.setLength(0);if (!StringUtils.isNotEmpty(accessToken)){return new Res().failed().setMsg("未授权");}url.append("https://graph.qq.com/oauth2.0/me?").append("access_token=" + accessToken).append("&unionid=1");result = HttpClientsUtils.get(url.toString(),"UTF-8");result= StringUtils.substringBetween(result, "\"openid\":\"", "\"}");String[] array =result.split("\",\"unionid\":\"");String openId=array[0];String unionId = array[1];System.out.println(openId+"------"+unionId);//判断数据库是否有此unionid，有则直接生成token返回UserAuths userAuths=new UserAuths();userAuths.setUnionId(unionId);userAuths.setOpenId(openId);userAuths.setType(1);userAuths=userAuthsService.selectOne(userAuths);if(userAuths!=null){return userService.qqLogin(userAuths.getUserId());}//第三步获取用户信息url.setLength(0);url.append("https://graph.qq.com/user/get_user_info?").append("access_token=" + accessToken).append("&oauth_consumer_key=" + qqAppId).append("&openid=" + openId);result = HttpClientsUtils.get(url.toString(),"UTF-8");Object json = JSON.parseObject(result,QQUserInfo.class);QQUserInfo user = (QQUserInfo)json;//调注册接口Integer userId=userService.qqRegister(user.getNickname(),user.getFigureurl_qq());//插入到第三方登录表userAuths=new UserAuths();userAuths.setOpenId(openId);userAuths.setUnionId(unionId);userAuths.setType(1);userAuths.setUserId(userId);userAuthsService.insert(userAuths);//获取tokenreturn userService.qqLogin(userId);}
}

总结

这样就可以了，有兴趣的可以试试本网站的qq登录，如果有不懂的可以在下方评论，我会及时回复哦

本文转自Fun言网：https://funyan.cn/p/1705.html

网站前后端分离情况下如何实现QQ微信等第三方登陆相关推荐

Java前后端分离第三方登录_网站前后端分离情况下如何实现QQ微信等第三方登陆-Fun言...
前言最近在弄第三方登录,实现起来很简单,就是调几个接口获取个人信息即可,详细了解:maven项目整合QQauth2.0第三方登录详细说明,然后因为本网站是前后端分离的,所以不能再回调接口那里直接跳转 ...
localStorage.setItem()前后端分离情况下使用
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除. localStorage 属性是只读的. 前后端分离情况下,可以将后端返回的数据保存到localStor ...
前后端分离情况下pdf文件在浏览器中预览的实现
在浏览器上直接打开pdf文件,页面标题与文件不符,经如下处理,问题得到解决: 1.Vue文件发送请求 window.open(HOST + '/file/preview/' + this.userId ...
【sprintboot+vue】前后端分离模式下的登录验证码验证
[项目背景] 考虑登录时的验证安全,需要添加验证码验证,纯前端实现的验证码其实没有真正意义上做到安全验证的要求,简单一个网页爬虫就能获取到前端生成的验证码,所以应该由后台生成验证码,并由后台完成校验过 ...
前后端分离架构下CSRF防御机制
背景 1.什么是CSRF攻击? 这里不再介绍CSRF,已经了解CSRF原理的同学可以直接跳到:"3.前后端分离下有何不同?". 不太了解的同学可以看这两篇对CSRF介绍比较详细的参 ...
前后端分离开发下的权限管控：SpringSecurity 框架
首先在了解前后端分离模式下使用SpringSecurity框架之前,我们需要先了解token和jwt(Json Web Token)技术 token 和 session 的区别? 由于http协议是无 ...
前后端分离模式下的权限设计方案
前后端分离模式下,所有的交互场景都变成了数据,传统业务系统中的权限控制方案在前端已经不再适用,因此引发了我对权限的重新思考与设计. 权限控制到底控制的是什么? 在理解权限控制之前,需要明白两个概念:资 ...
网站静态化——前后端分离（下）
我第一次听说nodejs技术大概是在2009年年末,不过我真正认真在网络上进一步了解nodejs还是在2010年年中,当时对nodejs的认识和我现在对nodejs的认识有着天壤的区别,开始想了解no ...
springmvc集成cas，并解决前后端分离情况
2019独角兽企业重金招聘Python工程师标准>>> 1.最近项目需要集成已经存在的cas系统. 但是目前已集成的系统都是jsp.而我们项目是前后端分离开发(伪),没有分开部署. ...

网站前后端分离情况下如何实现QQ微信等第三方登陆