第三方登入保姆级教程

什么是第三方登录

用户通过授权，基于用户已有的第三方平台的帐号和密码来快速登录的功能，大部分拥有第三方登录的产品，用户都无需再进行注册。

申请网站接入

在项目中我们经常引入第三方登入,常见的第三方应用都支持第三方登录，比如：QQ、微信、微博、GitHub、Gitee等，要想申请第三方登录权限，就需要去到对应的平台，比如QQ，搜索QQ开放平台：

但是对于QQ、微信、微博等的网站接入都需要身份认证，过程比较繁琐，所以我们这里提供一种免签第三方技术平台-水滴聚合

什么是水滴聚合?

水滴聚合登录支持多种第三方应用和平台的登录和授权，包括QQ、微信、微博、支付宝、百度、华为、小米、钉钉、Gitee、Github、微软、Google、Facebook等等，覆盖了大部分用户常用的登录方式。用户只需要在水滴聚合登录网站上进行一次注册和登录，就可以在各种应用和服务中快速、方便地实现登录和授权，省去了繁琐的注册和登录流程，大大提高了用户的使用效率和体验感。

接下来让我们开始使用它吧,let's go!!!

 首先让我了解一下第三方登录的流程:

水滴聚合使用教程

首先需要进入水滴官网创建应用:

官网: 水滴聚合登录官网 - QQ\微信\Google免签约快捷登录API接口

1.注册水滴账号

2.点击用户中心,进入如下界面:

3.进入应用列表,创建应用

填好一下信息：

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

4.创建成功之后进入应用,查看APPID以及APPKEY:

接入项目,下面以 springBoot为例:

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

# 第三方登录配置 申请地址 https://uniqueker.top/
third:
  config:
    appId: xxxx
    appKey: xxxx
    redirectUrl: xxxx

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

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

这里需要创建一个配置类,将这些配置属性注入到容器中:

/**
 * @Author 没什么技术
 * @Date 2023 11 07 22 03
 **/
@Configuration
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ThirdPartyLoginConfig {
    @Value("${third.config.appId}")
    private Integer appId;

    @Value("${third.config.appKey}")
    private String appKey;

    @Value("${third.config.redirectUrl}")
    private String redirectUrl;


    public ThirdPartyLoginConfig thirdPartyLoginConfig() {
        return new ThirdPartyLoginConfig(appId, appKey, redirectUrl);
    }
}

配置完成

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

调用登录接口

1.跳转登录地址接口

https://uniqueker.top/connect.php?act=login&appid={你的appid}&appkey={你的appkey}&type={登录方式}&redirect_uri={返回地址}
其中登录方式的type对应:

​

返回格式以及参数说明:

​

这里提供一个简单的测试案例(这里的JsonUtils是我自己封装的一个类型转换类):

package com.ch.controller;


import com.ch.bean.ResultCodeEnum;
import com.ch.bean.User;
import com.ch.bean.UserInfo;
import com.ch.bean.R;
import com.ch.config.ThirdPartyLoginConfig;
import com.ch.mapper.UserMapper;
import com.ch.service.UserService;
import com.ch.util.JsonUtils;
import com.ch.util.SocialLoginUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.util.UriComponentsBuilder;

import javax.annotation.Resource;
import java.net.URI;
import java.util.Map;

/**
 * @Author 没什么技术
 * @Date 2023 11 08 10 22
 **/
@CrossOrigin
@RestController
@RequestMapping("/u")
public class ThirdPartyLoginController {

    private final RestTemplate restTemplate;

    @Resource
    private UserService userService;

    @Resource
    private UserMapper userMapper;

    public ThirdPartyLoginController() {
        this.restTemplate = new RestTemplate();
    }
    @Resource
    private ThirdPartyLoginConfig thirdPartyLoginConfig;


    @GetMapping("/wx")
    public ResponseEntity<?> initiateQQLogin() {
        String url = "https://uniqueker.top/connect.php";
        UriComponentsBuilder builder = UriComponentsBuilder.fromHttpUrl(url)
                .queryParam("act", "login")
                .queryParam("appid", thirdPartyLoginConfig.getAppId())
                .queryParam("appkey", thirdPartyLoginConfig.getAppKey())
                .queryParam("type", "wx")
                .queryParam("redirect_uri", thirdPartyLoginConfig.getRedirectUrl());

        String redirectUrlString = restTemplate.getForObject(builder.toUriString(), String.class);
        // 假设redirectUrl是一个包含重定向URL的JSON字符串
        // 解析JSON以获取实际的重定向URL
        Map<String, Object> jsonStringMap = JsonUtils.stringToMap(redirectUrlString, String.class, Object.class);

        String redirectUrl = jsonStringMap.get("url").toString();

        System.out.println(redirectUrl);
        // 重定向到QQ登录页面
        return ResponseEntity.status(HttpStatus.FOUND).location(URI.create(redirectUrl)).build();
    }

    @GetMapping("/wxCallback")
    public R qqCallback(@RequestParam String code) {
        String url = "https://uniqueker.top/connect.php";
        UriComponentsBuilder builder = UriComponentsBuilder.fromHttpUrl(url)
                .queryParam("act", "callback")
                .queryParam("appid", thirdPartyLoginConfig.getAppId())
                .queryParam("appkey", thirdPartyLoginConfig.getAppKey())
                .queryParam("type", "wx")
                .queryParam("code", code);

        String response = restTemplate.getForObject(builder.toUriString(), String.class);
//        WXLoginVo wxLoginVo = JsonUtils.jsonToPojo(response, WXLoginVo.class);
        System.out.println(response);
        return R.ok().data(response);
    }


}

大家可以在测试时封装一个wxLoginVo,自己封装一下信息:

@Data
public class QQLoginVo {
    private Integer code;
    private String msg;
    private String type;
    private String url;
}

相当于我们主动访问这个url 同时加上自己的请求参数,访问该url,此时前端弹出弹窗或者新开一个页面得到如下的第三方登入页面

​

当用户点击授权登录后，会重定向到我们的回调地址中，我这边使用的实例域名，如果大家前端已经开发完毕可以直接使用前端地址作为回调地址

​

2.登录成功

前端此时拿到这个code,向后端发起登入请求，我们通过这个code获取第三方用户信息即可，后面就是一系列正常的登入注册逻辑了。

调用第二个接口,获取第三方用户信息: 

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

这里的code值也就是上一个接口重定向后得到的