基于 Spring Boot + Vue.js + MySQL 的 QQ 登陆实战

点击上方 Java后端，选择 设为星标

优质文章，及时送达

---

如何能在自己的网站上接入 QQ 登录功能？这篇文章就是解决这个事情。此文基于OAuth2 协议开发 QQ 联合登录实战过程，在学习本篇内容前您需要提前了解：

1. 前后端分离开发模式

2. vue.js 基础语法 比如 axios、事件绑定等相关知识

3. 后端开发、数据库等相关基础知识

如果您已经具备了以上所述那我们就开搞吧！

1. 什么是OAuth2

OAuth2.0 是一个开放协议的标准，该标准允许用户让第三方应用访问该用户在某一网站上存储的私密资源（如头像、照片、视频等），而在这个过程中无需将用户名和密码提供给第三方应用。实现这一功能是通过提供一个令牌（token），而不是使用用户名和密码来访问他们存放在特定服务提供者的数据。采用令牌（token）的方式可以让用户灵活的对第三方应用授权或者收回权限。

对于大家而言，我们在互联网应用中最常见的 OAuth2 应该就是各种第三方登录了，例如 QQ 授权登录、微信授权登录、微博授权登录、GitHub 授权登录等等
oauth2 的认证流程如图。

OAuth2中有4种授权模式

1. 简化模式：简化模式适用于纯静态页面应用。所谓纯静态页面应用，也就是应用没有在服务器上执行代码的权限（通常是把代码托管在别人的服务器上），只有前端 JS 代码的控制权。这种场景下，应用是没有持久化存储的能力的。因此，按照 oAuth2.0 的规定，这种应用是拿不到 Refresh Token 的。其整个授权流程如下:

2. 授权码模式：授权码模式适用于有自己的服务器的应用，它是一个一次性的临时凭证，用来换取 access_token 和 refresh_token， 认证服务器提供了一个类似这样的接口：https://www.funtl.com/exchange?code=&client_id=&client_secret=需要传入 code、client_id 以及 client_secret。验证通过后，返回 access_token 和 refresh_token。一旦换取成功，code 立即作废，不能再使用第二次。流程图如下：

3. 密码模式: 密码模式中用户向客户端提供自己的用户名和密码。客户端使用这些信息，向 "服务商提供商" 索要授权。在这种模式中，用户必须把自己的密码给客户端，但是客户端不得储存密码。这通常用在用户对客户端高度信任的情况下，比如客户端是操作系统的一部分认证流程如下：

4. 客户端模式: 如果信任关系再进一步，或者调用者是一个后端的模块，没有用户界面的时候，可以使用客户端模式。鉴权服务器直接对客户端进行身份验证，验证通过后，返回 token。认证流程如下：

以上做出了笔者对于 OAuth2.0 协议的理解，关于 OAuth2.0 协议的详细内容在此不扩展了 可访问 腾讯开放平台 https://wiki.connect.qq.com/ 查阅更详细的介绍，本文在此选择使用4中认证模式中的授权码模式进行案例开发，这个模式也是最安全最常用的模式.

2. 开发前阅读文档

访问腾讯开放平台官网点击文档栏 会有以下内容显示

本篇内容主要完