00:00
接下来我们测试使用微博来做我们网站的社交登录功能,首先要做社交登录,我们先要做一些准备工作,我们网站呢,现在想要用微博来能登录进来,我们就得去微博申请我们整个认证权限,我们先来进微博的开放平台,我们这个网站申请一个我们整个合作权限,那这个权限呢,我们先来百度我们这个微博开放平台,我们有权限了,我们才能做微博登录,好我们在微博开放平台里边来点进来,那先登录进来再说,好,我们先登录我自己的微博,好,我来点击登录。填写验证码。好,我登录进微博以后,我们现在呢,想要做社交登录,我们需要在微连接里边,这有一个叫网站接入,那网站接入里边呢,有一个立即接入,那我们现在需要创建一个应用,我们这个应用呢,可以使用我们微博的社交登录功能,这个应用的名字随便起,比如我们就叫鼓励mail的鼓励商城,好我来点一个创建,而且我们是一个网页应用,好我来点一个创建。
01:09
那如果这个应用已经有了,那么就重新给它起一个名字来点击创建好,那么这个应用呢,创建成功,创建成功以后呢,下面就有一些应用的信息,这来到我们我的应用的这个后台系统,这个后台系统里边呢,有我们应用的名字,还有它的appk和APP secret,这两个呢很重要,我们放在这,那第一步做完第二步我们还要做一些配置,在高级信息里边,我们需要填写两个回调地址,这个回调地址是什么,来考虑一下,那们之前在测试使用CSDN登录的时候,好比如我们来打开CSDN,我们来在测试使用它登录的时候,我在这,如果我们来点了QQ登录啊,我们在这看一下社交账号,如果我点了QQ登录,我在这登录成功以后,它会跳回CSDN,所以呢,在微博这同样也需要配置,如果我们微博登录成功以后,要跳回我们哪个页面所这一块有一个授权回调页和取消授权回调页。
02:10
那就是我们这个登录失败和登录成功的回调,那登录成功我们就跳到我们这个商城,比如我们叫鼓励ma com下的success这个页面,那如果登录失败,假设呢,我们就让它跳到鼓励M,我们就叫feel这个页面,好,我来点一个提交,那至此呢,我们这两个基本信息我们就创建好了,剩下的呢,我们先都不用管,并且我们如果使用微博来测试社交登录的话,只要我们应用不上线,我们可以暂时先不用走我们整个审核流程,我在开发期间也可以将流程测通,测通以后呢,我们需要上线的时候再提交一些公司的资质信息等等,那应用呢才能正常上线,而且在测试期间呢,我们这个测试账号最多呢只能关联15个微博账号。如果大家想要关联一些多的账号,也可以在这儿来新增一些微博的账号,那我呢,就用我的账号来进行默认测试就行了。好,我们先来创建出一个应用信息,相当于这个应用可以来使用我们微博的社交登录功能,那接下来该如何使用,我们就要参照文档来点开文档,在文档里边呢一直往下翻,下边呢,专门有一个叫author to授权认证这个流程,好,我们来点进来。
03:24
那这个流程呢,就是我们之前说的整个奥兔的流程,哎,这张流程图也是截取的这一块的流程图,那这个奥兔它要怎么使用,我们一直来参照下边,下面这块呢,这是我们手机APP的这个登录方式,这手机APP这是外包网页,我们一直翻来看好外包网站的授权,来看一下我们这个外包网站,我们应该如何完成我们整个登录授权过程,首先呢,它这一块的流程变成了这个样子,这个样子我们来大概也给大家看一下,首先client。C呢,我们称为第三方应用,比如我们CSDN,或者我们的鼓励mail来我们的这个商城,我们商城呢想要用微博来进行登录,然后呢,我们client第一节课要做的事情先向user agent,这叫用户代理,用户代理呢那就是浏览器,先给浏览器发请求,相当于我们点了一个微博登录按钮,然后浏览器呢,接下来就要让用户给我们来进行授权,我们点一个社交登录按钮,那就相当于来到这个授权页,来到授权页呢,接下来就应该是这样。
04:31
那这个B步完了以后呢,不是直接到C,接下来是到这块流程,那这块流程是什么,我们来看,首先呢,我们这个浏览器它呢,有一个我们客户端的标识,还有重定向的uri地址,现在我们登录成功,我们都知道要重定向去哪,然后呢,我们这个用户要进行认证,这个用户认证就是用户输入自己的账号密码,去我们这个认证服务器要进行认证,那认证通过以后呢,会跳转回来给我们一个叫authorization code。
05:03
叫授权码的方式,然后呢,我们这个客户端相当于浏览器跳回来会给我们一个授权码,然后客户端呢,拿着这个授权码和重新下的地址,然后呢要又去认证服务器,认证服务器我们一直说就是我们这个QQ服务器,或者我们说的是微博服务器,这是我们的社交网站服务器,然后呢,拿着我们这个叫授权码的方式,然后呢,他会在这儿来交换一个叫access token访问令牌,以后呢,我们这个客户端可以拿着访问令牌来访问任何请求,那这个图呢,看起来不清晰,我们只有将整个流程呢跑起来,我们才能看懂,那怎么跑起来呢?我们就来参照它下边的这些步骤,我们一步一步来做,首先引导用户,引导我们这个需要授权的用户到如下地址,想如果我们现在想要用社交登录功能,我们这个网站,我们想要用微博社交登录功能,那他说要引导用户到这个地址,那相当于我们现在点这个按钮,应该跳去这个地。
06:04
好,那们先来改我们网站的这些网页,我来一个一个做,那这呢有一个QQ来找一下,我们登录一下,来CTRLF来找个QQ,好,这是QQ的社交登录,那QQ里边呢,我们在图片里边专门还有一个微博,好,我们就来改成微博,那这个呢,我们就叫微博,我CTRLF9,我们把这个页面呢,重新来编译一下,我先来刷新一下我们这个页面来刷新,我们这儿呢,就有一个微博,我们这个图片大小呢,我们就设置一下这个span也不要内容了。那这个图片大小我们来死掉,来设置一个宽高,我们来看一下其他的这个宽高,我们这一块的宽高,这个图片呢,我们它的这个大小是18乘18,那我们的高度就给它设置为18,宽度呢,比如我们就设置一个50。来看一下Y的我们这个宽度来设置一个50PX,然后呢,还有我们的高度,高度来设置一个高度,比如我们就设置为18,好把这个大小呢,我们来设置好CTRLF9来页面重新编译一下。
07:11
我来在这儿刷新,好,我这儿呢有一个微博这个按钮,我们要点这个按钮,按照人家要求需要将用户引导到这个地址,那我将这个地址呢复制过来。好,相当于点这个按钮就去我们指定的超链接,指定的超链接呢就在这儿,好们超链接的地址那就变成这,然后呢,这个地址大家看我们叫API微博,然后呢,Author to,然后注意这有一个client ID,这要填我们这个your client ID,我们自己的client ID,还有一个redirect uri,相当于我们重定向的地址,我们把这两个呢先替换一下,因为我们之前在微博这,我们来申请了我们这个我的应用,好我在我的应用里边,在我的应用里边呢,我们刚才申请了一个这个鼓励mail shop在这里边来看应用信息,我们的这个ID,那就是我们的这个PK,这就是我们的client ID,我们应用的ID,好,我们把这个ID呢,我们放到这。
08:09
这是我们当前应用的ID,然后呢,接下来这块呢都不用管,还有一个redirect uri,我们相当于登录成功以后要重定向到哪,然后呢,我们之前配过把这个重定向的地址我们也复制过来,好CTRLC,我呢把这个重定向地址也复制到我们页面,把这一块改一下,那就按照人家的要求,这是我们做的第一步,我们先呢引导用户去这个页面,我来CTRLF9。我们来让页面编译一下,好,我现在来测试,我现在呢,先用我们的其他我们浏览器来进行测试,因为我这个浏览器微博已经登录成功了,那为了不引起我们一些整个流程的歧义,我们用其他浏览器,这个浏览器里边我们没登录过任何微博信息,好,我来点击微博,我们要做的第一件事,诶我们发现引导到了我们指定的这个页面,这就是我们要做的第一步,引导用户到这个授权页,那引导用户到这个授权页以后,接下来我们来看微博的这个文档,第二步,第二步呢,用户同意授权页面呢,就会跳到我们指定的地方,然后呢,他说还会带一个扣的扣的,诶我们先来让用户同意授权,那同意授权呢,就是用户输入自己的账号密码就行了,好,只要账号密码输对,到微博登录对,那就是同意了,好,我来输入我的密码,好我们来输入验证码。
09:36
来点击登录,那登录成功以后呢,我们接下来点击授权,那授权以后就会跳到我们指定的鼓励ma com这个页面,而且呢会给一个success,诶那确实呢,就跳到我们这个页面了,来看这一块,它如果我们用户同意授权页面呢,会跳转到我们之前指定的这个redire URL,就是指定的这个充电箱地址,但是呢,会给我们带一个code code能看到这呢,会带一个code,那这个code呢,是一个我们这个类似于UUID的这个码,然后拿到这个码应该怎么办?他说第三步我们要换取access token,那相当于我们第三步要换取token,要发送这个请求,那我把这个呢复制过来,然后这个请求呢,要填我们的client ID,然后我们的client secret,包括我们刚才拿到的这个uri地址重叠项UID地址,还有我们的code值,好我把这一块呢复制过来,因为我们。
10:37
要发这个请求,那我呢就用post曼,我来模拟发送这个请求,相当于只要引导用户去那个授权登录月,用户一登录成功就会跳回我们的网站,跳回我们网站呢,微博会给我们网站跳回来的时候带一个code的这个码,然后呢,要使用这个code的码,最终来换取一个,我们看微博这里边说要换取一个access token ton叫访问令牌,所以我们社交登录的核心三步,第一步引导用户到授权页地址,第二步登录成功拿到这个扣德码,第三步用这个扣德码换取access token,好,那我们接下来就来做我们这个第三步,我们来测试我们的社交登录,好,我们在这来创建一个专门的集合来测试我们这的社交登。
11:29
那么这个测试社交登录,我们接下来进入到了关键一步,我们相当于我们现在要换取我们的这个access token,我们这个地址呢,是这一块地址,我来复制过来。CTRLC好,我来复制过来,CTRLC拿到以后呢,我们发现它自动解析出我们要传递这么多的参数,第一个是c client ID client ID呢,那我们在这我们应用当时申请的时候,我们有一个ID,好,我把这个ID拿过来,好还有一个client secret,这个东西呢,肯定不能泄露,但是我们把这个secret拿来,先来做一个测试,然后呢,这块都不变,大写的呢,都是我们要动态替换的,还有要ED redirect uri,相当于我们重定向的U地址,重定向的uri地址就在这。
12:19
CTRLC,好,那么假设呢,重定向到这儿,然后呢,接下来还有一个叫code的,这个code的呢,那就是上一步我们用户呢,只要一登录成功,跳回我们网站,可以给我们一个扣德码,是这个,我们把这个拿来,我们要通过这个扣德码,那这一步的作用就是换取我们的a token,取一个名字叫换取,换取token,那翻译过来就是访问令牌,我们只有拿到这个访问令牌了,我们才可以相当于社交登录才能成功。好,我们来测试一下,我来发送这个请求走,那么这个请求呢,它这个man速的不支持,请求方式不支持,那么就来看一下我们这个请求方式是什么,们还是来参照它的这个文档,他说换取talking来发这个请求的,但这个请求呢,到底是什么方式来参照我们的这个文档,这个文档里边呢,我们来主要看奥two的这些API,我们来一直往下翻,我们这个奥two,我们来看我们这个奥two的这些文档,我们来还是参照它的这一块文档,那这块文档呢,下边有我们这个奥兔。
13:29
这奥里边。我们来看我们换取token,那就是这个我们发的请求是我们来看叫author to token author to token,它这有这个接口,来点进来看它接口的详细说明,来我发现呢,它是一个post方式,好那么就来改成post,好我们来重新换取走。好,我们发现呢,我们请求成功返回这么一个数据,这个数据里边呢,有一个access token,只要我们拿我们这个扣德码能换取到access token,那说明我们这个用户就是登录成功的,否则就是登录不成功的,那有了这个access token又能干什么呢?接下来假设我们这个第三方网站,这是我们的这个网站鼓励ma com,我们拿到这个用户已经授权成功,在微博登录成了以后,跳回我们网站有一个扣得码,拿这个网码换取到了access token以后,那相当于就可以为所欲为了,怎么为所欲为呢?我想要查用户的各种信息都能查,只要是微博为我们开放的,我们可以来参照一下,在微博的这个文档里边来看他到底开放了哪些API,在我的应用里边来点过来,我的应用在这儿。
14:45
大家注意,这有一个接口管理已有权限,那相当于我们已经有权限能访问这么些接口,然后随便看一个这status show status show这个接口是什么?它是根据微博ID获取单条微博内容,那我们就不获取微博内容了,我们看我们能获取一些用户的信息,我们这有一个用户普通读取接口,有一个user show,这user show是根据用户ID获取用户信息,我们要发这个请求,然后呢是get方式,好,我们把这个请求复制过来,我们用postman发,我们postman呢要发这个请求,然后我们再来看。
15:23
请求方式是get,好,没问题,Get,然后接下来再来往下翻,我们要传一个access token,看B选,这是true,那我们相当于我们就要拿到这个token to斯N是什么呢?就是上一步我们通过跳回来的这个扣玛,我们使用post曼带着这个扣德玛换回了一个X token,我们拿着这个东西我们来访问,好,X token是他,我们再来看我们的这个API,我们只需要传一个X token,其他都不用传。大家注意参数下边UID和我们这个screen name这个两个,二者必须选其一,而且只能选其一,所以我们就来传一个UID,我们想要查哪个用户,因为我们登录的呢,这个用户是六三是这个用户,我们之前返回token也有这个UID,所以呢,我想查他的信息,那给这一放,我来点一个send。
16:20
好,我们来看效果,那么整个效果呢全部出来了,这相当于就是我的微博的这个用户信息,我所在的省市区信息,包括我的昵称,我们呢都可以查出来,还有我的这些头像地址,我们可以拿着我们的这个头像地址,我来复制,包括我们的这个名字,域名等等这些信息,我们的性别以及我们当前的一些状态信息,我们这一块呢,相当于我们所有的我们微博的当前用户的详细信息,我们都可以通过他的这个access token我们获取到,所以我们说拿到了access token就可以为所欲为,那这呢只是获取到了用户信息,好,那在这来获取用户信息,比如我们还想获取一些其他的,我们再来测试一下,看我们的这个微博的这个文档里边,我们已开放的这个接口里边,我们这呢,有一个我们账户的信息接口,来看一下这个账户,账户呢,这有一个授权以后获取用户的UID,假设呢,我们现在只知道安。
17:21
This talking,我们不知道UID,我们还可以获取UID,我们把这个呢复制来,所有它开放的这个API我们都可以来进行访问,然后呢,参照它的文档,必须发get请求,好,必须带这么一个参数,好,那么就来带一个token叫。Token token是什么?就是我们上一次通过这个扣德玛换回来的这个access token好,我来复制过来。我们放到这儿,好,我们来send,那么现在呢,又能得到用户的IUID,所以我们只要有了token,那么就能查到用户的所有信息,包括他发的所有微博我们都能查到,只要我们微博呢开放了,来可以看一下,那么这一块呢,有没有微博的读取接口,那在这在这个读取接口里边呢,有一个public time拉,我们随便点进来看一下。
18:16
它是查什么的,返回我们最新的公共微博,现当返回我们当前这个用户发的这个最新的公共微博,好,我来复制一下,我们复制一下,我们来在这儿来做一个测试,我们这个呢是获取用户的UID,上一个是获取用户UID,发现呢,只要有了这个access con们想要做什么都可以,这是public,他好我们这个呢是来获取返回最新的公共微博C,好,我们在这来保存一下。然后我们来测试,想要获取最新的公共微博,我们需要干什么?首先发get请求没问题,然后呢,我们需要发一个access token,剩下的呢都不用带,因为它这一块必选是false,那我们把这个access token放在这access token的值,那就是我们之前获取到的这个access token,我来复制过来。
19:08
CTRLC我们在这儿呢,复制过来来看一下,好,我们会发现,诶这个时候呢,我们就能获取到我们这个用户发的我们这个最新的微博。当然这是我们这个公共微博,不是当前用户发的这个微博,当然我们这个置顶的这个微博信息,所以我们只要有了access token,我们就可以获取到微博为我们开放的所有API,当然哪些API开放了,全部参照我的应用里边已有权限这些东西来测试调用就行了。那这就是我们体会了这个社交登录,社交登录的三大步,首先第一步引导用户进入我们的这个微博的授权页,能看到我们在这儿,要进行微博登录的话,我们点它引导用户进我们的授权页,那进来以后,因为我之前登过了我们浏览器存了一些信息,所以现在直接跳回了我们的古mail,那只要用户登录成功以后,会给我们一个code,然后拿这个code要换取一个access token,但是问题就是我们的这个access token要拿code获取,我们这个code能用几次呢?我们可以来看一下我们这个code码呢,这有一个code码。
20:22
之前呢,还有一个扣德码,我拿之前的老扣德码,我再来换一次走,诶我发现呢,这就是错的,所以呢,我们这个扣德码换取token的操作只有一次,这就是我们的关键核心,我们在这来记录一下,在我们这个微博里边,它的核心就是使用code,使用咱们这个code换取access token。只能。有一次相当我们这个code只能用一次,我们这个code呢只能用一次,而X token你拿到了以后,你可以一直用着,虽然我们每一个token有这个过期时间,所以呢,我们下一次登录了,我们返回新的code了,我们每次呢都应该使用我们这个code换取来token,那就要换取来access token了,我们才可以继续访问,那如果我们拿着用户之前的老access token。
21:18
我们看用户之前老X token是上一次返回的,它是MYVX,那么这一次呢,返回的这还是MYVX,相当X token在一段时间内都是不变的。好我们在这儿再来说一个同一个用户的token,同一个用户的access token1段时间是不会变化的。即使我们这个多次获取,它都不会变化,即使多次获取,所以呢,我们关键的这一步就是使用code来换取token,有了token以后,我们想要用户的所有信息我们都能拿到,所以我们的第三方应用CSDN也好,我们的古励mail商城也好,我想获取当前这个社交登录过来的用户的一些详情,他的头像,他的微博等等这些信息我们都能拿到,所以我们的关键那就是我们要使用code换取token,当换取access token的另一个关键,我们发现我们要换取access token,那传我们这个应用的ID和应用的这个密码,这个密码呢是一定不能泄露的,所以呢,我们的这一块换取,我们不能在页面给它进行,比如页面有code的了,然后呢,我们在页面里面再放一个链接,把这个扣码带上,带上ID,带上secret,我们再来换取一个X token,以后我们在页面带着。
22:46
Token这些直接来访问,所以我们说这块呢,有两个信息要完全保密,一个是用户的access token,一个是我们当前应用的client secret,这两个要完全保密,所以换取access token应该是我们后台服务器,只要用户登录成功,返回了这个扣德码,那后台服务器呢,要根据这个扣得码换取一个用户的access token,然后后台服务器拿着access token可以访问到用户的详细信息,那这是我们体验的社交登录的整个流程,好,我们完整再来演示一遍,我先将所有的东西都来清空,在存储里边来清空掉所有的cookie,这是鼓励me的cookie,那我现在来进微博。
23:30
那将微博里边呢,之前所有存储的cookie呢,我们也都清掉,那在这来全部删除,那全部删除以后呢,我们这个微博那默认就是没登录状态,我可以来看一下,现在呢,我们微博都是没登录状态,好,那现在呢,重新一遍流程,那社交登录整个流程是这样,首先我们访问我们的网站,然后呢。我们来点击社交登录按钮,会引导到我们社交登录的授权页,那当我们输了账号密码信息以后,我们来点击登录就会跳回我们的网站页,我们网站页里边呢,会有一个扣德码,然后呢,我们网站要根据这个扣得再来换取access token,这是我们要做的第一步换取token。
24:14
好,我们将access token换取来以后,那么接下来再要做的,那就是我们根据这个access token就可以获取其他所有的信息,比如获取用户的信息,获取用户发的这些微博,只要微博给我们暴露的信息都可以从关键呢就是换取这个X斯token,而X token呢是一段时间有效,而么这个扣德码只有一次,只要换取完了,我们扣德码就作废了,那么整个社交登录的流程,那么下节课我们就来整合进我们的网站系统。
我来说两句