如何设计 QQ、微信、微博、Github 等第三方账号登陆？（附表设计）

电玩女神 2023-02-09 13:18 147阅读 0赞

公众号后台回复“**面试**”，获取精品学习资料

![format_png][]

扫描下方海报了解**专栏详情**

![format_png 1][]

![format_png 2][]本文来源：

https://juejin.im/post/5d0a298bf265da1b827aa06f

**《Java工程师面试突击（第3季）》重磅升级，由原来的70讲增至160讲，内容扩充一倍多，升级部分内容请参见文末**

*  前言：多账户登陆
 *  1. 创业初期
 *   *  用户名密码注册登陆
     *  手机号注册登陆
 *  2. 数据库设计
 *  3. 引入第三方账户方案
 *  4. 数据库设计
 *  5. 总结

--------------------

#     #

# **前言：多账户登陆** #

互联网应用当中，我们的应用会使用多个第三方账号进行登录，比如：网易、微信、QQ等，我们把此称为多账户统一登陆。

通过这篇文章， 我想阐释多账户登陆的技术方案细节，以及相应的表设计，流程设计。我这里不会有具体代码实现细节，只要方案做的对，有思路，代码咋写都不会太烂。

![format_png 3][]

# **1. 创业初期** #

归结为创业初期是因为这个时候**用户量比较少**，甚至还没有接入上面所说的其他第三方的账户系统，只是自建的体系就可以满足，自建体系的话，目前常用的有如下解决方案:

## 用户名密码注册登陆 ##

这种方式在很多初期网站建设会使用，先注册，再进行登录，在老一点的cms中都能找到这个影子。流程图如下：

![format_png 4][]

**流程说明：**

1.  前端将用户名、密码发送到服务器，服务器进行常规的判断，判断用户名、密码长度是否满足，用户名是否重复等条件，条件不通过直接返回对应错误码给到前端，这里密码字段，为了防止传输过程中被截胡，建议加密再上传，我们的传输密码默认都是会进行一个**md5加密**，然后记录到数据库再进行一层加密，就算是脱库也没事，密码不要明文存储。
2.  校验通过后，就将用户名密码写入数据库，并进行后面积分发放等操作，这里不展开。
3.  现在进行登录，前端将用户名，密码发送给到服务端，服务端首先会校验登录次数是否超过设置的阈值，如果超过只能继续等待被关小黑屋。
4.  如果未超过继续登录逻辑，判断用户名、密码是否正确，不正确密码则进行阈值的判断，如果超过则关小黑屋，记住小黑屋必须设置过期时间，要不然就会永久关上了，这个可以用redis的过期来做。
5.  登录成功后进行后续的一切后置逻辑，比如加积分等操作。

## 手机号注册登陆 ##

短信业务非常成熟，使用手机号注册方便快捷。其流程如下：

![format_png 5][]

**流程说明：**

1.  首先输入手机号，然后发送到服务端，服务端将手机号记录在我们数据库中，然后生成随机验证码，并将手机号和验证码绑定到一个redis里面，然后记录过期时间，这个过期时间一般是10分钟左右，这就是我们一般手机验证码的有效期。
2.  手机接收到手机短信后，那么就在界面填写验证码发送服务端，服务端收到验证码后就会在redis里面查询到这个手机号对应的验证码，失败就返回错误码。
3.  成功后就进行登录操作。

这里看起来没有明确的注册登录操作，其实在发送手机号码就可以认为是一个常规的注册，然后后面的验证码输入就是一个登陆操作

**问：** 那我要密码咋办？

**答：** 在后续产品里面增加一个手机号码密码补录的功能即可，这也是现在很常规的手法，但是现在移动互联网大爆炸时代，密码已经显得不是那么重要了，反正我从来记不住密码，如果手机号码能操作的app，绝对不用密码来操作。

# **2. 数据库设计** #

**表结构**

![format_png 6][]

**说明**: 这里只是单纯说明需要用到的数据，没有扩展具体场景,这个表结构能够满足上面两个方案的设计。

# **3. 引入第三方账户方案** #

这里是以QQ-SDK的登录逻辑， 我们先来一波时序图:

![format_png 7][]

**实现思路：**

1.  客户端自己调起登录的界面，进行输入用户名、密码，这里的是第三方的用户名，密码，登录成功后，会返回access\_token openid expire\_in,这过程会使用到oauth2.0，不过在sdk里面进行内置回调获取了，后面我们会说明我们自身实现的oauth2.0
2.  客户端拿到access\_token、openid、login\_type（qq、wechat…）请求应用服务器，应用服务器拿到这些数据后就会根据对应的login\_type去对应的用户中心进行access\_token和openid进行校验。

**校验不通过则返回对应错误码**

1.  校验通过后就会判断本地是否有这个login\_type和openid是否存在，不存在则进行获取远程的用户名、头像等基础信息来作为本地基础数据，并且返回code值
2.  如果已经存在，那就是进行登录操作，返回code值。
3.  客户端拿到code值后进行token值的换取，这个完全遵照oauth2.0的协议来走的，后续每次请求必须带上token，token值在服务端的时间比较久，因为我们想要做的是那种永不下线的操作，所以每次请求我们都将token过期时间进行累加。

# **4. 数据库设计** #

**表结构**

数据库的整理 用户基础表（users）:

![format_png 8][]

用户验证关联表（user\_auth\_rel）

![format_png 9][]

本地用户表（user\_local\_auth）

![format_png 10][]

第三方用户表（user\_third\_auth）

![format_png 11][]

**说明**

1.  users表只是单纯针对我们业务侧的登录，主要是做自身业务的oauth2.0业务，
2.  user\_local\_auth是做自己用户名、密码登录，手机号码登录信息记录，
3.  user\_third\_auth是我们第三方用户体系的数据记录，
4.  user\_auth\_rel是用来关联我们users表与user\_local\_auth、user\_third\_auth。
5.  整个设计理念就是将自建用户与第三方在存储上区分，这在架构演进上也是合乎情理的，开始用户体系大多自建，而后才是对外接入。

# **5. 总结** #

总的来讲，第三方用户的接入技术上来讲是比较简单的，这里设计多一个user\_thirds是可以支持足够多的第三方接入，当然一般我们也就两三个登录就好，太多登录方不仅自身维护成本，界面摆盘也不好看不是。

希望大家能够通过以上学习，能够对于我们多账户登录有一个比较好的认知，这里设计方案不包含分表分库、没有服务化，就是简单直接的设计，当然用户量和需要的不一样，在这个基础上还要加很多东西

**END**

《Java工程师面试突击第三季》加餐部分大纲：（注：1-66讲的大纲请扫描文末二维码，在课程详情页获取）

![format_png 12][]![format_png 13][]![format_png 14][]

**详细的课程内容，大家可以扫描下方二维码了解：**

![format_png 15][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy8xSjZJYkljUENMYXkyZ1VpY284aWJEclM0QVBuakVOaWFtOEVpY1VablE4YjJydDJ2MTNjOTFTaWF6bTg2QUtXd3RRemVIWUhna0ZtdEtob0NIbWJXYWZVQmtBLzY0MA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy8xSjZJYkljUENMWUZkTGlhaWF1aWEzQlhVOUZCOWdEdXo2TXlvSUViVnpWd2toRFRYUklkWjJPdlk2TGcxWGJMNTJoQ0FLbzZlSG82S3dkQTBVWWhyMm1zUS82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8xSjZJYkljUENMYW5HMm56alZab3YxVmlibVBYUjdsRGliRmpSZFR2SDFpYUR6OWljNEgzeFJaQ3o3Qk01NjNyRkZmdlJ1a3pYN3VoT3FYYzh5RGhFWnFpY0ZRLzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUng4ODJ1SzhQNGtuRWljRmhpYW9kOFJFWnNVWEs4WE5tdEQyUzROcHRpY09jV042QkN6QVllOVk2dy82NDA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUjA1NkZpYVp2SWljM1lnYTU3VzlrVVI5V0p3alVndW03OFF3dkdaM3RPMmQ3MmFGU2J6QjMzMzZBLzY0MA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUnRSZHFzV2s3Wm92emNMS1Q1TXhxOGpaUFdPQ0hMWThqejZFb1pwRXJyaGFUd0ZzTnlyeDAzQS82NDA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUnFna2liR2NScnZpY0FiMzhFUG9yTGNlbmppYWsyVGpGWXlRUUpEYTNOYjBGMjNyTzhrcGFJTjNZdy82NDA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUkFyMjQ2ZWMzaWNqc01NRGljbXQyQlRnN0dDU3kzTE8yaWNGV2J2TTJ0dVZYaHZReG90QlFQaE5kdy82NDA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUnIxSmIybWlhWVVhQzhqZFd4NUJoVjE0UTAwdTVwbjJRQVB4Q3kxekw1a2xoOUl4cm84aWJPMmliZy82NDA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUkxCUEtjemJKaWE0d3dJUkg4QldRRWExcFRCbENTZElmVThNWTA4ZjU5bkFJQlk1Tk0xa2w1RVEvNjQw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUjJPNDV4R2NRY3VaSDNYSHJhTkVGYVJOVFVhVzRleURnWVNuZE5xSk5kbFd3VXROV0RLaWF1Z3cvNjQw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy82bXljaGlja211cFZpY1ZQRGlicUwyM3RTMnVjQTJzdXhvUmpJQ2huOWFEaEg0VGRVb0lUNHFRbjBJV0h3dXlxMmhKbjk5d0pGS2lhdXhwWDF6VlFINHVPVncvNjQw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy8xSjZJYkljUENMYkdwTXM1MGROUWh0Tms5VThRWDFaOUFJbUZVdlRSajVvN2ZMZlpKbDNzOXlwa2MyWW9QZHYyWmV4VEg2MG9pYTk3TjdpY2g2aWFSb01oUS82NDA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy8xSjZJYkljUENMYkdwTXM1MGROUWh0Tms5VThRWDFaOVd2OFFuZXJaak5LSUtBaWJXaWNBYU5xbUh0cUIxV1hpYTRsMzhvZWtBQ3dTS1FENGsyQTlHUkQ1Zy82NDA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy8xSjZJYkljUENMYkdwTXM1MGROUWh0Tms5VThRWDFaOWUzNzhpYTBHZDB3UFRzS0RURkQ2ZTU3aWFWaFRyT0UzYWF3Y1hvVW5acXhOUG9NQTNwVjhwT2pnLzY0MA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8xSjZJYkljUENMYjVSaEt2ZnFOV2lhSTJrYjFCVzVNWW9RaWJXclFnOVB1YWlhaGRRaWNJaWJUYzhJaGNtNTZIMVQxUGVpYmhvY2lhVDBGd2ozM3RvYWliaWFBQ2tLdy82NDA?x-oss-process=image/format,png