网站前后端分离情况下如何实现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登录，如果有不懂的可以在下方评论，我会及时回复哦

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