网站前后端分离情况下如何实现QQ微信等第三方登陆
本文转自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-2
shade: [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("获取用户信息成功");
//将用户信息存到localStorage
localStorage.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
{
@Autowired
private UserAuthsService userAuthsService;
@Autowired
private 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 {
//拼接url
StringBuilder 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{
//第一步获取qqtoken
if (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、unionId
url.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);
//获取token
return userService.qqLogin(userId);
}
}总结
这样就可以了，有兴趣的可以试试本网站的qq登录，如果有不懂的可以在下方评论，我会及时回复哦