Springboot 实现QQ登录（界面跳转）

现在第三方登录已经变成主流app的登录方式了

今天记录一下如何给自己的网站实现第三方登录（这里以QQ登录为例）

准备工作

首先确保你准备好你自己网站的域名: 如https://xxx.com

以及有正常账号密码登录的方式

有很多实现的方式，比如去微信开放平台和 QQ 开放平台

QQ开发平台：https://connect.qq.com/

微信开放平台： https://open.weixin.qq.com/

上面有教程绑定自己的域名

本文尝试最快实现方法

这里我们使用水滴聚合登录免签API

官网：https://uniqueker.top/

官网创建

注册好账号之后

点击右上角用户 用户中心

进来之后点击 用户列表

点击创建应用

填好一下信息：

应用名称（随意）
应用首页网站（准备好的域名网址）
回调域名白名单 (完成登录之后返回的网址url)

确认提交

创建成功啦！

然后点击应用详情

它会给你几个值，分别是

APPID
APPKEY

用于接口参数的配置

springboot 配置

打开后端springboot项目的application.yml完成一下配置

# 第三方登录配置 申请地址 https://uniqueker.top/

third:

  config:

    appId: xxxx

    appKey: xxxx

    redirectUrl: xxxx

这里的appId 和 appKey 就是它提供给你的两个参数

redirectUrl 指完成登录之后的返回页面url

这里创建一个配置类，把这些配置属性注入到容器中

@Configuration

@ConfigurationProperties(prefix = "third.config")

@Data

@NoArgsConstructor

@AllArgsConstructor

public class ThirdPartyLoginConfig {

    private Integer appId;

    private String appKey;

    private String redirectUrl;

    @Bean

    public ThirdPartyLoginConfig getConfig() {

        return new ThirdPartyLoginConfig(appId, appKey, redirectUrl);

    }

}

配置完成

查看水滴给我们提供的qq登录接口

调用登录接口

1.跳转登录地址接口

请求URL：https://uniqueker.top/connect.php?act=login&appid={你的appid}&appkey={你的appkey}&type={登录方式}&redirect_uri={返回地址}

其中登录方式type值对应

返回格式：

{

	“code”: 0,

	“msg”: “succ”,

	“type”: “qq”,

	“url”: “https:// graph.qq.com/oauth2.0/XXXXXXXXXX”

}

2.编写测试Controller

写一个简单的测试类

（以下代码无法直接调用，用到了好多工具类！！！）



@Resource

private ThirdPartyLoginConfig thirdPartyLoginConfig;

@GetMapping("/qqLogin")

public String qqLogin() throws IOException {

    String requestUrl = String.format("https://uniqueker.top/connect.php?act=login&appid=%s&appkey=%s&type=qq&redirect_uri=%s",

            thirdPartyLoginConfig.getAppId(), thirdPartyLoginConfig.getAppKey(), thirdPartyLoginConfig.getRedirectUrl());

    CloseableHttpClient client = null;

    CloseableHttpResponse response = null;

    try {

        client = HttpClients.createDefault();

        HttpGet request = new HttpGet(requestUrl);

        response = client.execute(request);

        String responseBody = EntityUtils.toString(response.getEntity());

        QQLoginVo qq = new Gson().fromJson(responseBody, QQLoginVo.class);

        return qq.getUrl();

    } catch (IOException e) {

        throw new RuntimeException(e);

    } finally {

        assert response != null;

        response.close();

    }

}

这里QQLoginVo需要自己封装一下信息

@Data

public class QQLoginVo {

    private Integer code;

    private String msg;

    private String type;

    private String url;

}

相当于我们主动访问这个url 同时加上自己的请求参数

登录地址为返回的url的值。

3.登录成功

会自动跳转到指定的redirect_uri，并跟上Authorization Code

例如回调地址是：www.qq.com/my.php，则会跳转到：

http:// www.qq.com/my.php?type=qq&code=520DD95263C1CFEA0870FBB66E

4.获取用户信息

通过Authorization Code获取用户信息

请求URL： https:// uniqueker.top/connect.php?act=callback&appid={appid}&appkey={appkey}&type={登录方式}&code={code}

返回格式：

{

	“code”: 0,

	“msg”: “succ”,

	“type”: “qq”,

	“access_token”: “89DC9691E274D6B596FFCB8D43368234”,

	“social_uid”: “AD3F5033279C8187CBCBB29235D5F827”,

	“faceimg”: “https:// thirdqq.qlogo.cn/g?b=oidb&k=3WrWp3peBxlW4MFxDgDJEQ&s=100&t=1596856919”,

	“nickname”: “大白”,

	“location”: “XXXXX市”,

	“gender”: “男”,

	“ip”: “1.12.3.40”

}

跳转成功界面如下：