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登录 或 注册!
文章评论
发表评论
Java前后端分离第三方登录_网站前后端分离情况下如何实现QQ微信等第三方登陆-Fun言...相关推荐
- 网站前后端分离情况下如何实现QQ微信等第三方登陆
本文转自Fun言网:https://funyan.cn/p/1705.html 前言 最近在弄第三方登录,实现起来很简单,就是调几个接口获取个人信息即可,详细了解:maven项目整合QQauth2.0 ...
- python 抖音第三方登录_前后端分离抖音第三方授权登录
现在我做的项目需要支持使用抖音账号登录,并且可以管理自己的抖音号,所以我需要拿到抖音用户的身份验证 access_token,这篇文章记录一下抖音授权登录的流程. 抖音开放平台提供了授权相关的接口和文 ...
- Android 基于第三方登录(使用Bmob后端云存储数据)实现记忆用户登录、不必重复登录
最近在开发一个Android 社交app,其中引入了第三方登录的接口,数据存储使用Bmob后端云.有个问题曾困扰了我很久,就是记忆用户登录的问题.众所周知,如果是自己的服务器,进行用户登录,其实完全可 ...
- python 第三方登录_【Python web 开发】social_django 集成第三方登录
1.背景: 我们之前写的一些接口仅仅是知道微博授权的一个流程,要把第三方授权登录的用户的user_id 弄到我们的user_profile 中来才是 符合业务的需求的 因此gitbub上已经有一些开源 ...
- python实现网页微信登录_网站微信登录-python 实现
最近微信登录开放公测,为了方便微信用户使用,我们的产品也决定加上微信登录功能,然后就有了这篇笔记. 根据需求选择相应的登录方式 微信现在提供两种登录接入方式 移动应用微信登录 网站应用微信登录 这里我 ...
- gmail第三方登录_提醒:第三方Gmail应用可以完全访问您的电子邮件
gmail第三方登录 Remember that "cool" free Gmail app you installed years ago and then forgot abo ...
- 前端和后端哪个工资高_前端、后端、全栈都是干嘛的?哪个薪资高?
刚入门Web开发者总会听到前端开发.后端开发.全栈开发等岗位描述及相关介绍说明.很多人不清楚前端.后端.全栈到底指的是什么?对应岗位需求是什么? 俗话说"磨刀不误砍柴工",了解了互 ...
- 信用卡欺诈行为检测_在无监督学习的情况下检测欺诈行为
信用卡欺诈行为检测 It's common to hear about fraudulent acts on e-commerce platforms. In recent years, the sp ...
- 断网python第三方库安装_Python离线断网情况下安装numpy、pandas和matplotlib等常用第三方包...
联网情况下在命令终端CMD中输入"pip install numpy"即可自动安装,pandas和matplotlib同理一样方法进行自动安装. 工作的电脑不能上外网,所以不能通过 ...
最新文章
- fiddler设置抓取https请求后打开网页总是报“你的连接不是私密链接”的解决办法
- 版本控制工具——Git常用操作(下)
- linux下 tar解压 gz解压 bz2等各种解压文件使用方法
- 翻译(六)——T-SQL的进阶之路:超过基础的2级水平:写子查询
- ComboBox自动补全小技巧
- threadlocal存连接对象的目的_ThreadLocal 介绍
- 小米6x更换关机音量键记录
- 配置管理口管理曙光服务器
- ddos攻击网站原理,遭受ddos攻击该如何处理进行防御?
- 鸿蒙比安卓流畅,华为鸿蒙系统首升用户体验:流畅得不像话,专属应用体积超小!...
- 用华为手机现在还不知道这5种实用功能,几千块白花了,太浪费了
- [WriteUp]unctf-web-fuzz_md5
- 常用的arm汇编指令(3) -学无止尽,积土成山,积水成渊
- 家用双wan口路由器推荐_教你如何配置双WAN口路由器
- 刷分区linux,【无聊】Linux下的磁盘分区利器——GParted简明介绍
- VxWork学习笔记(一)
- LOAM源码解析1一scanRegistration
- 实名报名超5000人!RTE2022即将开幕,声网发布RTE行业首本专业书《实时万象》
- C#操作IIS的代码
- 2021-08-10第一章绪论1.1统计学与医学统计学
热门文章
- undefined reference to `main`
- 关于字符匹配所引起的的问题
- RabbitMQ 幂等性概念及业界主流解决方案
- 关于ArcGIS动态图层空间内栅格数据,JS前端显示颜色不正确的解决方案
- LOL(英雄联盟)提示不支持虚拟机登录,解决方法
- 【白皮书分享】2021国有企业数字化转型指数与方法路径白皮书.pdf(附下载链接)...
- “出题老师”超全划重点,赛场高分必备干货!
- 站在BERT肩膀上的NLP新秀们(PART I)
- 神经网络佛系炼丹手册
- angularjs config_AngularJS依赖注入