00:00
前面我们做了简单的登录功能,那登录成功后的处理我们留下,后来我们再说,我们再来看一个我们的社交登录,比如在我们这个网站里边,我们想要登录来点击登录,在这一块呢,会有快捷的QQ或者微信登录,我们将这种呢就成为社交登录,可以参照我们给大家的这个社交登录单点登录的文档。首先我们来说一下这个社交登录,为什么会有这个社交登录。比如我们这个QQ、微博gihab这些网站呢,其实他会拥有大量的用户,我现在搞了一个新的网站,假设我现在创建了一个CSDN这个网站,如果让所有的用户都来用我们的网站,按照我们的注册流程来走,可能用户呢,嫌太麻烦了,不想注册,这样就会损失很多的用户,所以呢,我们就在我们的网站上边,我来放置一个别的网站的这个社交登录按钮,如果你有QQ号,你点这个QQ,那这样的话呢,你直接用你的QQ号就能登录我们的网站,而不需要进行我们这个网站的复杂注册流程,那像这种呢,就称为社交登录功能,那这个社交登录的大体步骤就是这么三步,首先第一步我们以这个CSDN为例,好,我们现在CSDN,那第一步我们应该是进CSDN里边,我们想要进行登录,好,我来点击登录,登录以后呢,我不想进行复杂的注册流程,假设我们还没有账号。
01:28
那我们就可以来使用社交登录,那社交登录里边呢,首先我们想要用QQ登录,那我们就来点他的这个合作账号叫QQ,我来点一个QQ,大家注意我点QQ的时候呢,它会跳到我们的QQ这个网站,然后呢,接下来我们想要登录,那就得输我们的QQ号,所以我在这儿选择账号密码登录,来输我们的QQ号以及我们的密码,那输入完成以后,我再来点击登录,那点完登录以后呢,我们只要QQ号密码输的是对的,QQ能登录成功,那接下来呢,登录成功就会直接跳回我们的CSDN的首页,所以呢,三步就是第一步我们来点这个QQ的这个授权按钮,然后呢,第二步我们看到的这个页,我们称为QQ的这个授权页,我们可以来看一下,我想要登录,我现在社交登录,我点QQ来到我们QQ的这个授权页,我们输入我们QQ的这个账号密码,那完了以后只要输成。
02:29
功了,我们输密码的整个过程输完了,包括我点授权并登录,我们将这个过程呢称为用户授权过程,那我们自己把自己的密码填上了,那我们相当于授权通过了,只要授权通过了,我就会跳回我们之前的CSDN网站,这是我们整个社交登录的流程,这个流程呢,它遵循的是我们说的奥色兔协议,这个奥兔呢,能有兔,其实就有1.0,那1.0呢比较老,现在已经不用了,我们现在都在用奥兔,奥色兔就是专门针对于我们这个,它是一个协议标准,要说呢,它是专门针对于我们用户相关的这些开放API,比如我们这个CSDN,想要用QQ登录,好,我来输入我的这个账号密码,如果我这个登录成功,如果是第一次登录进我们这个CSDN,我们是使用QQ登录进来的,相当于我们也在CSDN做了一个快速的注册功能。CSDN呢以后就会将我们。
03:29
当前QQ号这个账号跟他CSDN网站默认关联起来,你以后在里边发的所有文章也都能保存起来,但是呢,此时CSDN肯定会要我们这次QQ登录的一些信息,他肯定不能要QQ的账号密码,要了QQ可能肯定也不给,但是他会要一些什么呢?比如我们这个QQ号,在我们这个QQ这个服务器里边,他的头像是什么,包括他的昵称是什么。默认进来,我给你用你自己的昵称当成默认昵称等等等等,所以他会用一些我们开放的这些信息,比如用户的一些信息,照片、日志等等这些功能,把这些呢都成为开放API,这些开放API呢,在QQ服务器里边存的,你想要QQ的一些信息,必须用户登录成功以后,授权给你以后,你才能访问,那这个访问呢,我们就遵循我们整个奥兔这个流程,那这个奥兔流程呢,主要就是这个样子,首这个样子里边有咱们这四个概念,我们在搞清楚这个奥to流程的时候,我们得先想清楚这四个概念,首先第一个概念client client呢,指我们第三方应用客户端这个client client呢。
04:44
我们应该这样理解,现在是我们CSDN想要用QQ账号登录进来,所以呢,CSDN是一个客户端,他想要找QQ服务器,要QQ账号的相关信息登录进他的网站,所以呢,我们可指的是第三方应用,我们的CSDN也好,京东也好,我们自己做的网站也好,这都是我们的client,我们呢。
05:10
接下来想要用户用他的QQ号登录,接下来就有一个东西叫resource owner resource owner呢指的就是我们用户本人,然后呢,用户本人要做到关键一步就在这,我们来看一下,如果我们想要用QQ登录,好,我来点一个退出,退出我点登录。现在我来社交账号登录,那我们要做的第一步,我们整个流程我们来梳理一下,首先客户端第一件事情就是authorization request,就是认证请求先给我们这个用户。发送一个请求,比如我们现在来点我们的这个QQ合作登录,相当于我们的CSDN,想要让用户使用这个QQ来进行登录,所以我们的这个流程我们在这来给大家分解了一下,来看一下client client指的是我们当前比如我们说的CSDN等等我们的第三方应用,然后呢,我们接下来要做的第一步,我们想要用QQ来登录我们这些社交网站,那接下来要做的第一步先向用户申请进行请求认用认证,那的这个resource owner指的就是我们这个用户本人,我们就来写一个本人,所以当我来点这个QQ按钮的时候,现在就要询问用户本人,你要不要用QQ来登录,如果要QQ登录,你就得扫码或者输QQ的账号密码,所以呢,我们第一步咱们点了社交登录按钮,先询问用户本人要不要进行登录,那用户呢,就要进行授权。整个授权的流。
06:45
成,那就是输入自己的账号密码,输入我们就叫输入自己的,比如我们这个社交账号密码我们称为叫社交。账号和密码,这个社交账号密码我们输入成功以后,那相当于我们才能登录成功,所以我们的整个授权过程,那就是这我们来输入一个我的这个账号密码,当来点授权登录以后,我的这个账号密码都输对,那接下来我们要登录,那我们用的这个账号密码登录,肯定是要登录给我们的QQ服务器,我们不可能拿我们的账号密码登录到CSDN里边,这样CSDN知道了你的。
07:28
QQ账号密码也是一个很麻烦的操作,所以呢,我们即使这样来做,我们最终登录到的也是QQ里边,所以接下来我们说的关键性的第三步,如果我们用户输对了他的社交账号和密码,然后呢,我们这个社交账号和密码就是到认证服务器来进行认证,这个认证服务器呢,其实就是QQ服务器,因为我们输的是QQ账号密码,QQ服务器。所以呢,至此的整个过程中,我们第三方应用CSDN不应该知道你的账号密码,那画严谨应该是这样,那这个呢,不严谨这个箭头呢,我们不应该放在这。
08:06
因为我们自己输的这个授权账号密码信息只有我们自己知道,所以我箭头我来这样画,我们自己来知道,那么自己能知道呢,那就应该是这样,哎,这是我们的这一步,那我们这一步呢,就是我们自己在这儿来。输入我们的账号密码,好再来填一个我们的这个图形,好我们是关键性的这一步,那第二步应该是这我们自己来输入我们的社交的账号密码,这样呢,整个过程我们的第三方应用肯定是不知道的,好把这个全部缩过来,我们自己将我们自己的账号密码输完了以后,接下来我们带着这个账号密码去我们的QQ服务器进行登录,所以我当我点授权并登录的时候,来F12可以看一下,我来点授权并登录的时候,我们这个network会发给哪,我点授权并登录,那么的第一个请求我们一直往上翻,好authorize那呢,它其实是发给我们的这个QQ服务器,它是一个post,所以呢,我们点授权并登录,我们应该是呢,发给我们的QQ服务器,我把这个箭头呢也去掉,来在这儿画一下。
09:18
好,我们本人输完账号密码以后,那将我们的账号密码发给我们的QQ服务器来进行认证,那如果QQ服务器验证我们自己的QQ号密码,那是都是对的,那接下来呢,我们第三方应用如何知道我们当前是谁登录进来了,所以我们这个QQ服务器呢,会给第三方应用返回一个我们称为叫访问令牌,包括这个令牌呢,我们在这儿大概也可以看到我们这个QQ服务器,好,我们在这儿呢,请求发给他,我们发送成功以后,我们这有一个response叫重定向,我们给QQ本来发的请求,请求成功以后,他让我们重定向,又重定向给CSDN,重定向的时候呢,会带一个扣的,扣的呢就是一个唯一的这个令牌,但目前这个还不是令牌,大家先理解为令牌好,相当于我们这登录成功以后,就会给我们CSDN给一个令牌,因为我们看到了重定向到CSDN,并且呢还带了一个令牌。
10:19
诶,然后呢,以后CSDN就可以拿着这个令牌,相当于这个令牌就是关联了我当前这个QQ用户信息,我拿着这个令牌可以查我们当前登录的这个QQ用户的他的头像,包括他的昵称等等,只要是QQ服务器为我们开放的资源,我们都能访问,所以接下来第三方应用只要拿到了这个令牌,那么他就可以使用这个令牌获取所有我们受保护的信息。当然这受保护的信息前提是我们开放出来的,没开放出来的,他拿令牌也不能访问,所以至始至终我们的CSDN肯定不知道我们的QQ账号密码,这是一定的,所以呢,他拿着我们这个访问令牌去,我们称为叫resource server,叫资源服务器,这个资源服务器呢,其实也是QQ服务器,因为我们想要获取当前我刚登录的这个人,他的一些头像昵称信息。
11:17
登录成功了,QQ服务器给我们反令牌,我们拿着这个令牌再去找QQ服务器要这些人的信息,所以呢,整个这个过程我们就称为奥兔,那QQ服务器为外界开放了一些API。然后呢,外界想要进行使用,首先呢,得让我们QQ这个用户得登录进来,那怎么登录呢?那就是整个奥兔流程,先让我们这个用户自己授权我们输入账号密码也好,扫码也好,只要到QQ服务器登录成功了,QQ服务器呢,给我们第三方应用交一个令牌,第三方应用带着这个令牌以后找QQ服务器要我们这个人对应的相关信息就都能要到。那这是我们奥兔的一个简要流程,那下一节课呢,我们就以微博为例,我们测试一下我们整个奥兔的完整流程。
我来说两句