13-cookie和session/18-尚硅谷-书城项目-谷歌验证码的使用

那么这个原理说了，我们来看看怎么使用这个谷歌验证码来解决表单重复提交，那么大家注意验证码这种需求啊，是非常常见的，所以呢，我们一般情况下也不需要自己来写，怎么办呢？我们使用第三方的就可以了，在这里呢，我们使用谷歌提供了这个验证码方案，哎，谷歌提供的，那这个东西怎么用啊，大家看一下啊，谷歌验证码capture是吧？使用步骤如下，大概怎么做？第一导入谷歌验证码的架包，导入这个价包，那这个价包在哪呢？在咱们今天。笔记里面谷歌验证码看见吗？你找这个价包，哎，上面这个啊，给它复制过来，呃，咱们在这里整一个整一个目录啊。哎，在下面也行。在这里也可以啊，等它粘贴进来，粘贴进来好了以后记住把这个添加到。

内裤当中是吧，呃，咱们写成模块的就行了，因为只有模块用它嘛。名字呢，就随意你参谋吧，随便取个名字点击OK，大家看这个价包就添加进来了，这第一步添加架包。好，第二步怎么办呢？在web点餐没有中去配置用于生成验证码的程序。用于。用于生成验证码的程序，你得配置才能用这个东西来怎么配，大家请看一下，在这个价包里面呢，人家有这样的类。有看见吗？就有它，就有它哎。我们去把它的这个犬类名拿过来就行了啊，复制一下，配置一下，我们我们配置一下啊。

我把上面这个复制一份。给他配置一份，呃，咱们说。来看它能不能提示出来哈，我复制这个完整的。看看能不能提示，不能提示咱们就手写有啊啊撬回车有是吧，有的话就把它放上来，放上来放上来就可以了啊这个地方呢，大家注意看，要改改改成点JPG，就这样的一个路径啊，看着才像是一个图片。那么大家注意看到哈，那这样子呢，你访问这个它就会帮你生成验证码，并且生成验证码图片，而且这个验证码还会保存到session育种。哎，筛序中我们可以做个实验，看一下就知道了啊，大家继续看，就反过这个地址，这个地址是跟在公孙云的后面啊。

来在公众屏的后面走走，好，我没有重启这个是因为没重启啊。呃，重新部署一下，咱们加了价包，这个也配置也改了，但是还没有重启，它不生效。啊，重新部署了，来刷新一下，诶，他说出错了，他说类找不到啊，类找不到。我们看一下，我们听得到这里，买来之后稍等哈。这个咱们要feed一下，咱们还没有用到这个，打包的时候把它放进去。好，把这个包放进来就可以了，再来。重新部署一下。好了好了以后呢，咱们来看一下哈，刷新这个验证码是不是出来了，你每一次刷新大家看就会生成这个验证码，生成验证码诶这是咱们的第二步哦，验证码已经可以出来了哦，那接下来第三步怎么办？

第三步。在。大家看一下哈，在表单中使用image标签啊去。什么呢？显示验证码图片并使用它啊在表单里面，那大家注意看一下哈，我们到我们的注册里面，就这个加上这个验证码。Input。Chest啊，这个验证码的输入框，然后再来个image，呃，这个地址到哪呀，地址就到它吧。好，那我们来看下效果哈。我们法问瑞机的JP，大家看验证码是不是出来了，丑是吧，丑不着急调整一下，首先这个你要换行啊，这是一个，第二个这不用太长。

这太长了。呃，咱们就说。80个像素。然后这个验证码也不要太大。下来。呃，因为马在这里是大啊，宽度，宽度咱们说100个像素高度28个像素差不多吧。大家看一下差不多吧，你要是觉得长了，再再调一下就行了啊，再再调一下就行了，呃，比如说咱们调的这个50。这没出来是吗？50。

呃，50个像素这个还不够的话，你可以再调一下啊，这东西再调一下走诶进来了吧，进来了啊，呃，差不多了啊，这个时候呢，大家看这个已经应用了，然后第四步是什么。我给你截个图哈，大概这个东西我们调成60吧，差不多就行了啊。好。OK，呃，这个地方就是运动马的使用。大家注意一下啊，验证马的使用，那么第四步。干嘛？在服务器获取谷歌生成的验证码和客户端发送过来的。发送过来的验证码比较实用，这是最后一步了，最后一步了来吧，呃，我们到六七的策略里面，大家看这个地方怎么做呀。

按照我们刚刚分析这个步骤去做就行了，123就这几个步骤是吧，这里的我们先获取一下request.get session.get a to。啊，问题是这个key是多少，我们要获取什么呀？你看啊，获取session中的验证验证码，那这个P是多少，大家注意，只有保存进去才知道，那这个东西在哪呢？大家看到哈，谁保存的呀，是不是。谷歌的这个价包里面写的谁能保存的呀，那就从这里面找呗，怎么找呢？大家看这里有一个常量类，这个常量类当中啊，人家有一个，呃，Op s在哪。哎，用这个。

咱们用这个常量就行了，用它啊，咱们复制一下OK。走。Al enter啊，它会自动的提示进来，好，那么大家注意看啊，这样就获取了。我们管那个叫做token吧。好走，这个是获取生成的验证码，获取完以后大家注意马上删除，马上上这个验证码，免得他还要用第二次。记住啊，诶这个是删除验证码，那删除完了以后，除了你看啊。删除完之后干啥呀，你是不是得获取表单中的这个表单项目信息啊，也就验证码嘛，是吧。来Co等于快速点getter Co。

哎，获取了，获取了以后大家看保存到数据库之前要比较一下，比较说抽Ken如果不等于空，并且token.equals忽略这个大小写扣的这个地方，那么我们才把它保存到数据库，允许它操作。啊，这个延迟咱们就不要了。哎，就这样子啊，好保存到数据库，然后这边呢，如果是else的情况呢。请不要重复提交表单，哎，请不要重复提交表单，好，这个时候咱们来看一下哈，重新部署一下，我们听一下。我们在这里打上这个断点，大家看一下这个效果啊。呃，打断点的话得怎么办呢？是不是得用debug启动啊。

对吧，第二个启动。稍等啊稍等。走。好，启动了啊，我们这边刷新一下ZWT168这个验证码是多少啊，是PFC24啊，我们点击提交。平常过来了，我们从服务器里面获取这个验证码。因为大家看这是空是吧，空说没创建成功，来我们再重新放过去，再来一次啊。再回来刷新刷新刷新，这样应该没问题了，来，再来一下。呃，ZWT168这是什么？5EGPF点击登录应该就好了哈，走大家看看这个这验证码是什么，5EGPF是不是没问题啊，筛选中的，然后呢，接下来咱们删掉筛选中的客户端发过来的呢，你看这两个值是不是一样。

一样，然后呢，比较啊，这里比较运动码是不是没问题啊，哎，没有问题，好给他放过去。出来了，这个时候你说用户如果还要再回退，大家看是不是还有这些东西再次提交，那就不同了，走这时候大家看一下，由于第一次已经删了，得到now，你看到吗？就跟我们这里说的一样，之后再取呢，就是now now的话再往下看啊，再往下看客户端发过来，这是有值。超的服务器的这个呢，客户端的有值，那有值一个not一个有值比较肯定，就不要重复提交啊。大家看见了吗？诶，他就阻止了这个表单重复提交，这就是谷歌验证码的使用啊，谷歌验证码的一个使用，好，我把这个东西大拿过来。