什么是第三方登录
用户通过授权,基于用户已有的第三方平台的帐号和密码来快速登录的功能,大部分拥有第三方登录的产品,用户都无需再进行注册。
申请网站接入
在项目中我们经常引入第三方登入,常见的第三方应用都支持第三方登录,比如: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值也就是上一个接口重定向后得到的