day9---uni-captcha验证码[uni-app云开发入门到实战]原创

Hello，小伙伴们大家好，我是代码哈士奇。我们上个视频了解了一下，就简单了解一下这个配置中心哈。那我们接下来要讲什么呢？接下来我们给我们这个，呃，我先打开这个，打开上一次我们写的这个玩意哈。就是我们写了一个。我下啊，看看能不能跑通，我刚才刚才删东西了啊。他说我那个那个请求康未成功。稍等一下哈。那我们接着继续来看这个，我们这个这个视频要讲的是这个图形验证码哈，就是。它一个插件。呃，我们在这个登录的时候，一般都是要添加这个验证码的，对吧，啊对吧。

就我们那个上个视频，上个视频可到那个UNIUNID的东西啊。呃，我们继续我们给他加个功能哈，我们很我们看到我们有注册登录退出，获取用户信息，修改密码，修改头像啊，还有这个修改昵称这些东西对吧，那我们呃，让它更贴合实际运用一点，那就给它加个什么呢？加一个验证码功能吧，也就是我们这个视频上讲的UN布拉图哈，Cptha我们。首先呢，我们要引入这个插件啊，对吧，没有不引入怎么用对吧，我们这个名字叫什么？可的0509对吧，用的是二零，我找一下可的0509找到了。在这里，然后我们确定。好，可以看到我们这里面已经多了一个这个验证码，验证码这个模块哈。

那在这里我们看那可乐风科这个里边已经用到，那我们这里给我们这个云函数啊，就是。U分里面我们我们写的用户中心嘛。看一下这是我们上上个视频讲的这个就是对七的时候UID。那一块的啊。我们登录注册、退出，获取用户信息，修改密码，修改头像，修改昵称也都有了，那么给他加一个验证码。首先右键。管理公共模块。我们要使用那个。验证码模块，就要把验证码这个添加进来。好，我们一大更新完成了，在这里可以看它用法呀。它用法就是呃，创建验证码。和这个什么降奖验证码，还有这个刷新验证码。我们一般也是对吧，我们验证码我看不清啊，我要刷新一个或者我要。

较简啊对吧，还有我进来的时候，我就给他创建一个，他这里给给他提示有这个云端一体登录模板，大家可以看到，包括他的那个unma里面也是有的，它数据表使用的是open DB那个什么什么，这个我们就是我们的验证码表。大家看一下这个表。我们已经就是创建过了。Open这个看到了吧，他他他他是在这个创建收集表。这个ID里面的。呃。验证码，比方说这个不仅是图形验证码可以使用啊，这个是图形验证码，它还有手机验证码。邮箱验证码都会在这里面，嗯，它的验证码都会生成在这里面，导入就是入库嘛，入到这里就入到这个里面，数据表里面。好。呃，还是大家看一下这个数据表结构吧。

求财快了点，太快了不太好。它这个表结构就是手机卡，手机号码，邮箱设备有ID，还有验证码，验证码使用场景，验证状态，请用是客户的IP地址，创建时间和过期时间，验证码需要过期的码对吧，那我们看一下啊。这是我们写的这个看看。首先呢，像U。爱的一样，我们我们需要引入这个。等于这玩意对吧，那我们看一下哈。我们那个依赖就是我们有这个U布拉族，那就。一起。把那个改成。嗯，写的这就完事了，对吧。Require。我们写成这个就可以了，因为我们pack在Jason里面，它就是这样的，我们依赖就是这个对吧。

嗯。好，首先我们要创建个验证码，创建个验证码就是可以的，那我们就要在那个。呃，我们把这个验证码给放通一下哈，它需要放通，我们先先在这写哈。生成验证码就是呃，英文怎么说呢，C可以的。好，还是复制吧，我觉得复制最省事啊。我想把不写出来。然后我们要创建验证码，肯定是这个看到没有，看到这个没有。我们也，我们也可以在这里，在这里自己写啊，因为爱。来点黑暗E可以，它有提醒的对吧，它是一个。呃，对象啊，行，我谈一个对象嘛。然后传对象，传入什么呢？什么字段呢？使用场景。为防止这个不同的验证码混淆哈。啊，默认值是四啊，String，那我们可以改成什么呢？我们是登录对吧？我们登录消减，我们可以写成log对吧，我们是登录。

然后还有这这些都是非必填的设备ID，如果不上传，它自动获取图片宽度，图片高度，先把变颜色长度啊到六个字符。那我们都不写，你要你要想设置的话，比如说我要设置赛的话。你设3S21是吧，你可以设置成六，然后包括这个三种条数啊，还有这个估计时间你也可以设置，它都是这样设置的啊，看到了它这个类型number就是。吧，数字并就是怎么说大家也都知道的。那我们就还是以四个444位验证码哈。那我们这个I。等于它，然后呢。我们你返回这玩意儿就可以了。

这里呢，由于我们。验证码是需要那个进行核验的，对吧。我们首先要放通这个创建验证码哈。所以我把这个。呃，云函数给更新一下。首先上传啊，这个网有没上传啊上传。下传完了之后，我们上传我们的云函数。替换掉。好，可以可以看到我们这个已经替换成功了哈，我们在这个我们的页面里边继续写哈。具体写写什么呢？在昵称底下。呃，加一个验证码菩验证码，我我也是老省事了，复制一下。叫什么叫？啊，验证码。英文英文不好，我再来复制一下啊，复制一下。或者直接写成扣的吧，反正写成扣就完事了，对吧。

然后这个改成验证码。好，这输入框就搞定了，那我们还要挨个校验是吧，那校验的话。呃，我们先在大家就是度校验一下，不和这个中路结合。也也也同样复制吧，是不是。在这个。WiFi是吧，V。V Fi小验码小燕，我们这注册改成小小验验证码好。那这个时候我们就要就要要给我们云函数了，对吧，首先是创建，创建这个创建的话，我们是默认页面载入的时候就给它创建一个。哎，我们因因为它这个是图形验证码，肯定要需要这个图片对吧。那我们要写一个。

出这个路径啊，先这样写好，在这里呢，我们要写了，我们要写什么呢。把他给。缩写，这是我们之前写的。我们需要这个获取验证码，对吧，获取验证码。C2也可以直接复制过来吧。要对应一点比较好看是吧。我们同样的也是用这个类似点2EQ，就是我们这里已经接好了一个。封装就是对可的这个尤海请求。好，我们我们用我们请求的是可以的，就是团建验证码这个玩意儿对吧。因为我什么什么都不需要传入，当然你也可以传入参数，就比如说我登录的时候，我传入这个登录参数，在这里传入一个登录就可以了啊。啊，我们这里不写。看他那个结果是什么哈。啊，这里下一个吧，下一个下一个获取验证码。

总他是他什么，他是可是吧，可瑞特。验证码。创建验证码对吧。那好，我们。不保存。他这个图片占了一大部分。创建验证码。进程中可以获看到这个验证码获取成功，它是一个什么？它是一个贝斯64的数据，那贝斯64的数据我们同样可以直接给我们的src对吧。它是re点的什么。就这个。验证码的配色64，验证码配色64嘛，虽然我不能用。不会说，但是我知道啥意思啊，那我们就要赋值了，对吧，我们的这个src就等于I这个反正对吧。那好，我们删除，我们同样创建验证码，可以看到我们验证码已经出来了，对吧，虽然这呃有点丑，你可以设定验证码的这个长度和宽度哈，我们这里图片它只是一个图片的宽度和长度而已，这样你自己设置就可以了，验证码我们已经获取成功了，对吧。

车验证码，呃，已经实现了，那我们下一步就要实行什么呢？验证码。可以。下验证码哈，我要我们要教下验证码，我也复制过来啊，我特别讨厌英语单词啊，咱英文大一定要好好学学英语啊，这考研什么的都非常重要，包括你四六级是吧？那好，我们来看一下那验证码怎么写啊。要验证码，我需要传入这个。呃，这个它的它的这个类型啊，就是用来干什么，用来登录注册还是干啥的，还有这个验证码，验证码你肯定要传的，你不传验证码怎么验证啊，还有就是这个I这ID我们也不传，让他自己写，呃，从那个con获取，他自己会获取的啊。那个我们我们写，我们肯定不要考虑的，对吧。

V2V1。啊，Y它是这个对吧，那我们同样的是登录哈，我们这先给它固定的是登录，然后它需要我们的验证码对吧，验证码那我们就就给到这里传入一个验证码。我们从这里插入哈。那这里我们我们还把这个呃，云函数给更新一下。等他这个安装依赖这个时候呢，我们写一下这个页面页面的这个。就客户端的东西啊，我们创建验证码肯定要这个验证码是吧，验证码的话我们写成直接写成WiFi吧，Fi或者写成WiFi的。选WiFi吧。WiFi我们要调用的是这个WiFi这个这个东西对吧。我发验证码就是验证码，还有一步就是我们在这里也要放松一下啊，放松一下这个教学验证码。

如果不放松的话，它是让你这个token的，就是你必须得登录，还得有效的登录。那我们在这里同时再更新一下。在这里呢，我们写我们需要传入什么呢？很明显我们需要传入一个这个。验证码是吧，就是他我们要传入验证码，那我们就在这里写验证码嘛。他是什么？他是。呃，扣的是吧，我写的是Z4点扣的，我记得如果没错的话，就是四点扣的。啊，就是空的验证码。把这个我先删掉啊，等一下看一下结果哈。我们来试一下。验呃，我们首先创建验证码啊，叫D9AP是吧，我们输入D。9AP，呃，第9AP大小写应该没啥关系吧，先试一下，然后验证码。好，验证码交检通过了，这验证码质检，质检通过代表着我们可以执行我们的操作了，对吧，比如说我要。

给登录对吧，我们看一下它这个交点成功返回的是什么，它返回的结果里面是扣的是零，也就是说它是扣到零的，是零的时候代表成功那。对吧，那我们可以修改一下我们的策略，让它和这个分路结合一下，那怎么结合呢？那这就继续啊，首先。嗯，可以看到我们这个设验证码。我们给它移走啊，我们移到这个灯笼里边来哈，我们移到登录里边来。来了，然后这个。这玩意儿和这个用户名密码一起传哈，我们就不再写。那这里我们可以，我们我们不用res。啊，我们从因为214也没问题，也是没问题的。它是等于零的时候，它才那个等于零的时候。就检通过对吧，它不等于零的时候肯定是检失败，等于零的时候检通过我们才让他执行。一个玩意儿对吧。

才能解出这个玩意儿，不然的话它就返回这个。验证码校验的结果会告诉你验证码校验失败对吧。那好了，那我们看一下这样这样这样是是是可以还是不可以。我们先上传部署一下。由于我们这个登录需要验证码了，那我们这个客户端的登录也需要改一下，它也需要传入一个验证码这块。也是这个这个玩意儿哈，我们直接就给它整体复制过来了，也是需要一个验证码对吧。那好。我们来测试一下。首先。现在我们要创建一个验证码是吧，我们要登录了，我输入代码还是齐。啊，代码还是其一好，我把密码输错，我看看什么啊。如果我不输验证码，他会怎么，怎么那个说呢，我登录一下，他都告诉我验证码不可不可为空对吧，那我这个验证码我也看不懂啊，应该是1G1GPM是吧，等一下再给大家讲那个刷新验证码。

啊，什么。1GPM是吧，应该是的，那我再登录一次。他我验证码错误了，那我重新创建验证码试试看，这叫NDN。Ne，不因大家使用创建验证码，呃，如果你验证码看不懂，还是要使用创新验证码，至于为什么，等下看一下数据库，你刷新和创建它那个操作是不一样的哈。那我们登录。他告诉我密码错误了，我们验证码通过了，对吧，那我还有那个验证码，我不改验证码呢，那我们输入一下试试看。到验证码测试，因为我们验证码也验证过了是吧，按这个时候我们就要加个逻辑，当他登录之后，不论失败成功，就要把验证码给他刷新一下，那我们再次创建一个验证码哈。叫什么叫G1，那我们来登录一下。

哦，可以看到我们自动成功了，因为我们这个教研验证码还是有用的，是吧，是吧，那好。那我们这个创建验证码校验验证码结合登录也完成了，那我们要进行一个非常重要的步骤，就是刷新验证码，刷新验证码来了。好。验证码我们也在这里面写哈。同样的用他这个写大家都差不多是吗？他需要那个传入什么呢？他需要传入那个。用于防止也是这个使用场景啊，就是我在什么地方使用对吧，它是refresh refresh，那我就给它改成refresh，就是就是刷新嘛。它也是refresh。那锁就已经改好了，除了这个玩意儿不需要参数之外，那个刷新验证码也也也已经改好了啊。那我们这里上传部署一下。

可以看到啊，上传完成了，那我们客户端就要给这个。加一个刷新验证码是吧，我们可以在这个图片图片上给图片加一个点击图片刷新验证码，我们也可以在这里加一个按钮刷新验证码。他是refresh是吧，Refresh，那我也写成refresh算了，反正也没跟他重名的，对吧。那变成refresh。一开始这样读的，我也不知道咋读哈，英文不好，第一次强调英文不好啊，大家不要纠结这个，那好，我们。呃，也用的是这个刷新验证码是吧，验证码同样呢，我们也要再放松一下。不然的话，等会你就知道房东会告诉你啊，你没有登录，没有脱坑验失败是吧。我这里。三那这里我们不要传播任何参数。是吧，那好，来了他现在的马。因为我们创建个验证码，他刷刷新验证码有用没有啊。

哦，他告诉我。看看什么，看请求是怎么错误的哈。It's not，哦，等一下我看一下这个地方。啊，不好意思，这个这个地方，因为我因为我那个。复制的是验证码的，没有删干净哈，抱歉。嗯，好，那我们再试一下刷新一下，不然老师请分钟是吧，我们先看一下控制台，打开找到控，进入控制台创建验证码，然后我们刷新。刷新刷新刷新啊，不好意思点成校验了，刷新验证码。他告诉我验证码刷新成功了。同样的他他和这个。验证码是一模一样的，这个返回数据返回结构哈，都是code的，和message还都一样是吧，那样我们也好改了，我们也是让我们的这个。

呃，什么src是吧，重新指向这个玩意儿。啊，这就可以了，我们来试一下。创建验证码和这个。刷新验证码啊，这就可以了是吧，他这边也都有数据，那这个时候。呃，我们这个图像也加一个哈，就是我们点击图像，大家是不是在网上操作的时候，一般点击图像也可以刷新验证码，那也那就给我我们那个图像也加一个发信验证码，那等一下，嗯，那好是吧，我们也成功了。那至于这个为什么刷新和创建数据一样，为什么我不我们不创建呢哈。他之前。就是。我记得有一，有一个是有有有一次他那个。就是创建的时候刷新会重新创建，现在不知道这个东西还有有没有啊看一下。我们那个。WiFi。扣的。

那我们我们我们现在啊，我们现在我们试一下啊，试一下我创建一个验证码先。他叫这个NBXS。我找一下那个NBSS啊。应该在下一页吧，NB改它是根据这个啊NBXS，记住这这是几个数据啊，12344个是吧。那我们刷新一下看看。刷新什么7B7B7DKR可以看到哈，刷新完之后呢，这个玩意儿这个黑是吧，就是我们同一个设备啊，同一个设备。它的状态啊，就是变成二了是吧，你作废了，就是我们刷新之后，下一个验证码会被作废掉，然后这底下我们重新创建了一个这个玩意儿是吧。

他就会作废此前的验证码。是不是爽是吧，那我们创建呢，那我们再重新创建一个，看看它它是什么样子，我没有做过测试，大家一起来看吧。可以看到它又多了一个，也多了一个那个，呃，就是n zu是吧，很明显这个7DKK它也没有被作废啊，所以大家要区分，如果区区分那个刷新验证码和创建验证码的区别，如果你刷新的话，上个验证码会作废，如果你不刷新的话，上个验证码还是可以验证的哈，那我们可以试一下上验证码可不可以，很明显我们这里是TTKK。它已经是不一样了是吧，那我们试一下啊，看能不能成功代码哈士奇啊哈士奇一，那我们验证码，验证码它是有时效的。啊，我们同样登录成功了，所以大家一定要注意刷新验证码和创建验证码的区别。啊，那这个是这个这这个。码呢，我同样也会再打包一份发给大家，那个那这个视频就讲到这里，我们验证码讲完了。

呃，之所以要讲验证码，也是为了我们后边这个实这个实间做准备啊，你想想呃，一个登录登登录的时候啊，我们登录的时候要要基本上都是要输验证码的是对吧，所以我们就先讲验证码，所为这们会做准备，下个课程我们讲什么呢？我们我们讲一下这个。手机短信啊，手机短信以及这个邮箱发送，还有这个。呃，这个一键登录这三个玩意儿，这三个玩意儿哈，后边再我们也会讲这个微信登录和这个QQ登录哈。啊，我们这个视频到此结束了，谢谢大家。