Java前后端分离第三方登录_网站前后端分离情况下如何实现QQ微信等第三方登陆-Fun言...

前言

最近在弄第三方登录，实现起来很简单，就是调几个接口获取个人信息即可，详细了解：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登录，如果有不懂的可以在下方评论，我会及时回复哦

你还没有登录，请先使用 QQ登录 或 注册！

文章评论

发表评论