编程语言
首页 > 编程语言> > Educoder Java生成验证码 第2关：用户登录时校验验证码是否正确

Educoder Java生成验证码 第2关：用户登录时校验验证码是否正确

作者：互联网

任务描述

本关任务：编写程序验证验证码是否正确。

相关知识

上一关我们已经学习如何生成验证码了，为了完成一整套的验证码使用流程我们还需要知道如何验证用户提交的验证码是否正确。

登录功能

我们经常在登录注册的时候填写验证码，本关我们就来实现登录功能。

首先我们来理解验证码校验的基本流程：

上图展示了一个用户填写验证码的基本流程，用户打开网页显示服务端生成的验证码，点击“看不清楚”标签可以重新生成，这个时候会从新请求服务端数据，服务端用Session来保存验证码信息。

当用户点击确认按钮的时候，我们就需要对用户通过表单提交的验证码进行校验了，这个时候服务端获取Session保存的验证码信息和用户提交的验证码数据进行校验如果两者一致则校验通过。

这就是一个完整的验证码流程了。

我们可以将验证码的流程总结为：前端表单登陆 => 后端获取到验证码校验 => 前端收到后端的响应。

借下来我们来实现这个过程。

前端实现

我们创建一个登录表单，代码如下：

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4. <title>登录</title>
  5. </head>
  6. <body>
  8. <form action="loginServlet">
  9. 用户名：
  10. <input type="text" name="username">
  11. <br>
  12. 密 码：
  13. <input type="text" name="password">
  14. <br>
  15. 验证码：
  16. <input type="text" name="verifycode" id="yzm">
  17. <!-- src填servlet的地址就能显示网络上的图片 -->
  18. <a href="javascript:reload()"><img id="yzmImg" src="code"/> </a>
  19. <br>
  20. <input type="submit" value="提交">
  21. </form>
  23. </body>
  25. <script type="text/javascript">
  26. //重新加载验证码
  27. function reload() {
  28. var img = document.getElementById("yzmImg");
  29. img.src = "code?" + new Date().getTime();
  30. }
  31. </script>
  32. </html>

效果如下：

后端校验

前端页面写好之后我们就可以验证在后端编写代码来验证，表单传递过来的参数是否正确了。

步骤如下：

  1. 接收用户传递的参数：username，password，verifycode；

  2. 判断验证码是否正确；

  3. 如果验证码正确则判断用户名和密码是否正确。否则提示客户端验证码错误；

  4. 用户名密码正确，回传给客户端“登录成功”。

校验验证码的核心代码如下：

标签：Educoder,Java,正确,登录,用户,验证码,校验,服务端
来源： https://www.cnblogs.com/Tim161718/p/16328683.html