JavaWeb中使用验证码登录的功能实现

最新推荐文章于 2024-09-22 19:59:31 发布

牛奶味的辣椒水

最新推荐文章于 2024-09-22 19:59:31 发布

阅读量3.1k

点赞数 4

分类专栏：网站中的模块功能实现文章标签： ajax web javascript

本文链接：https://blog.csdn.net/qq_41469636/article/details/108667553

版权

网站中的模块功能实现专栏收录该内容

1 篇文章 1 订阅

订阅专栏

在日常生活使用App或者浏览网页什么的，经常需要我们去进行登录验证身份，可选择的登录方式有很多，在此讲解一下使用手机验证码登录的大致逻辑和部分实现。

思路：

首先，我们必须使用到登录相关的界面（在此使用layui做一个简单的登录界面）

齐次，获取验证码(本文内的电话全使用一个随机的号码测试)

之后，我们需要进行相应的逻辑功能实现（有的在前端界面就可以实现，有点需要使用到后端程序）

最后，当验证码正确时，允许登录，并通过手机号码从数据库查询用户信息用于用户的其他界面的操作。

1.简单的前端界面

页面视图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>手机短信登录</title>
		<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="static/css/login.css"/>
	</head>
	<body>

		<div class="login-box">
			<form class="layui-form" action="">
				<legend>手机号登录</legend>
				<div class="layui-form-item">
					<div class="layui-inline iphone">
						<div class="layui-input-inline">
							<i class="layui-icon layui-icon-cellphone iphone-icon"></i>
							<input name="userPhone" class="layui-input" id="phone" type="tel" placeholder="请输入手机号" autocomplete="off" lay-verify="required|phone">
						</div>
					</div>
					<div class="layui-form-mid layui-word-aux" id="tip" style="color:red !important;">请输入手机号</div>
					<div class="layui-inline veri-code">
						<div class="layui-input-inline">
							<input name="pnum" class="layui-input" id="pnum" type="text" placeholder="请输入验证码" autocomplete="off" lay-verify="required" maxlength="6">
							<button class="layui-btn" id="find" type="button">验证码</button>
						</div>
					</div>
				</div>
				<div class="layui-form-item login-btn">
					<div class="layui-input-inline">
						<button class="layui-btn" onclick="return false" lay-filter="login" lay-submit="">登录</button>
					</div>
				</div>
			</form>
		</div>

		<script src="static/js/jquery3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		//使用layui
		layui.use([ 'form' ,'layer'], function() {
			var form = layui.form;
			var layer = layui.layer;
		});
	</script>

	</body>
</html>

因为只是一个短信验证的功能，于是只做一个简单的登录模板。

在做出登录模板之后，我们需要对模板内容进行一些简单的处理，例如对手机号码进行一个简单的判断（可以使用正则表达式）

以下代码只在js部分进行增加内容样式，页面html部分未进行修改

视图：

代码：

<script type="text/javascript">
		//使用layui
		layui.use([ 'form' ,'layer'], function() {
			var form = layui.form;
			var layer = layui.layer;
			//表单验证
			form.verify({
				phone : [ /^1[35897][0-9]{9}$/, '请填写正确的手机号格式!' ]
			});
		});
	    </script>

现在我们就可以开始获取输入框中的电话号码进行短信验证了。

视图：

代码：

<script type="text/javascript">
		//使用layui
		layui.use([ 'form', 'layer' ], function() {
			var form = layui.form;
			var layer = layui.layer;
			//表单验证
			form.verify({
				phone : [ /^1[35897][0-9]{9}$/, '请填写正确的手机号格式!' ]
			});

			//获取到发送短信验证的按钮
			$("#find").click(function() {
				alert('OK，输入正确，可以发送短信');
				//使用ajax请求Servlet
				$.post('UserServlet/sendMsg.do', {
					'userPhone' : inputPhone
				}, function(res) {
					alert(res);
				}, 'json');
			});
		});
	</script>

使用ajax将前端的电话号码传递到后端，后端获取内容。

UserServlet内容

package com.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.service.UserService;
import com.util.JsonTool;
import com.util.ResultModel;

@WebServlet("/UserServlet/*")
//此处继承的是自己封装的封装类，使得可以在一个servlet中实现多种“行为”
public class UserServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;
	UserService userService=new UserService();
	
	
	//  UserServlet/sendMsg.do
	protected void sendMsg(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置编码格式
		request.setCharacterEncoding("utf-8");
		//获取数据
		String userPhone=request.getParameter("userPhone");
		//检查数据
		System.out.println("检查：userPhone="+userPhone);
		//layui中渲染模板的特定格式，虽然此处没用到，不是必须，但是暂时还是使用这个封装类
		ResultModel resultModel=userService.sendMsgToPhone(userPhone);
		//将结果返回给ajax的回调函数
		//JsonTool也是封装工具类（用途是将数据转化为json格式，并且将数据传递到前端）
		JsonTool.sendJsonStr(response, JsonTool.objectToJson(resultModel));
	}


}

Service内容

package com.service;

import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.NameValuePair;
import org.apache.commons.httpclient.methods.PostMethod;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;

import com.util.ResultModel;

public class UserService {

	// 因为判断手机号是否是已经注册过的用户
	// 在前端ajax表单验证的时候判断
	// 此方法不需要连接数据库
	public ResultModel sendMsgToPhone(String userPhone) {
		try {
			ResultModel resultModel=new ResultModel();
			// 请求地址
			String reqPath = "https://106.ihuyi.com/webservice/sms.php?method=Submit";
			// 去连接这个支持发送短信平台网站
			HttpClient client = new HttpClient();
			PostMethod method = new PostMethod(reqPath);

			client.getParams().setContentCharset("GBK");
			method.setRequestHeader("ContentType", "application/x-www-form-urlencoded;charset=GBK");

			int mobile_code = (int) ((Math.random() * 9 + 1) * 100000);

			String content = new String("您的验证码是：" + mobile_code + "。请不要把验证码泄露给其他人。");
			System.out.println(content);

			NameValuePair[] data = { // 提交短信
					new NameValuePair("account", "******"), // 查看用户名 登录用户中心->验证码通知短信>产品总览->API接口信息->APIID
					new NameValuePair("password", "**********"), // 查看密码 登录用户中心->验证码通知短信>产品总览->API接口信息->APIKEY
					// new NameValuePair("password", util.StringUtil.MD5Encode("密码")),
					new NameValuePair("mobile", userPhone), new NameValuePair("content", content), };
			method.setRequestBody(data);
			client.executeMethod(method);

			String SubmitResult = method.getResponseBodyAsString();

			// System.out.println(SubmitResult);

			Document doc = DocumentHelper.parseText(SubmitResult);
			Element root = doc.getRootElement();

			String code = root.elementText("code");
			String msg = root.elementText("msg");
			String smsid = root.elementText("smsid");

			System.out.println(code);
			System.out.println(msg);
			System.out.println(smsid);

			if ("2".equals(code)) {
				System.out.println("短信提交成功");
				resultModel.setCode(2);
				System.out.println("短信发送成功，请查看手机");
				resultModel.setData(mobile_code);//接受到的验证码
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

}

Service层中使用到了第三方(互亿无线)的内容(当然要添加相应的依赖)，只需会复制粘贴以及使用即可。需要注意的地方是上面打星号的内容，那个地方是需要修改的。

视图：

代码：

<script type="text/javascript">
		//使用layui
		layui.use([ 'form', 'layer' ], function() {
			var form = layui.form;
			var layer = layui.layer;
			//表单验证
			form.verify({
				phone : [ /^1[35897][0-9]{9}$/, '请填写正确的手机号格式!' ]
			});

			//获取到发送短信验证的按钮
			$("#find").click(function(){
				  $('#pnum').removeAttr('readonly');//让输入框可以输入
				  //获取填写的手机号
				  var inputPhone=$("#phone").val();
				  //判断填写的是不是一个手机号号码
				  if(/^1[35897][0-9]{9}$/.test(inputPhone)){
					  alert('OK，输入正确，可以发送短信');
					  //使用ajax请求Servlet,目的获取到你手机上接收到的6位数的验证码
					  $.post('UserServlet/sendMsg.do',{'userPhone':inputPhone},function(res){
						    console.info(res);
					  },'json');
				  }else{
					  alert('手机号码格式不正确')
				  }
			});
		});
	</script>

然后我们为按钮定义一个函数（当未输入正确的验证码时，登录键禁用，当单击验证码按钮后，验证码键禁用）

然后为发送验证码的按钮设置倒计时功能，避免资源被持续占用

代码：

<script type="text/javascript">
		//设置按钮的状态
		function fun_changebtn(selector, flag, content) {
			if (flag) {
				//启用
				$(selector).removeAttr('disabled');
				//改变颜色
				$(selector).attr('class', 'layui-btn layui-bg-green')
			} else {
				//禁用
				$(selector).attr('disabled', 'disabled');
				$(selector).attr('class', 'layui-btn layui-bg-gray')
			}
			$(selector).html(content); //按钮显示的内容
		}
		
		function fun_tip(color,content){
			$("#tip").html('<span style="color:'+color+';">'+content+'</span>');
		}

		//使用layui
		layui.use([ 'form' ,'layer'], function() {
			var form = layui.form;
			var layer = layui.layer;
			//表单验证
			form.verify({
				phone : [ /^1[35897][0-9]{9}$/, '请填写正确的手机号格式!' ]
			});
			//禁用登录按钮，只有填入正确信息后才会改变按钮状态
			fun_changebtn('.login-btn button',false,'禁用,填写短信验证');
			
			$("#phone").change(function(){
	    	    fun_changebtn('#find', true, '验证码'); //启用按钮
	    		$('#pnum').val('');
	    		fun_tip('green','请重新点击验证码按钮');
	    		fun_changebtn('.login-btn button',false,'禁用,填写短信验证');
			});
			
			//获取到发送短信验证的按钮
			$("#find").click(function(){
				  $('#pnum').removeAttr('readonly');//让输入框可以输入
				  //获取填写的手机号
				  var inputPhone=$("#phone").val();
				  //判断填写的是不是一个手机号号码
				  if(/^1[35897][0-9]{9}$/.test(inputPhone)){
					  alert('OK，输入正确，可以发送短信');
					  var mobile_code='';
					  //使用ajax请求Servlet,目的获取到你手机上接收到的6位数的验证码
					  $.post('UserServlet/sendMsg.do',{'userPhone':inputPhone},function(res){
						    console.info(res);
						    if(res.code==2){
						    	mobile_code=res.data;
						    }
					  },'json');
					  
					  var myTimer; //使用计时器实现倒计时功能
					  
					  //将用户输入的验证码和Servlet返回给我们mobile_code的比较
					  $("#pnum").keyup(function(){
						     var inputCode=$(this).val();
						     if(inputCode.length==6){
						    	  if(inputCode == mobile_code){
						    		 //清除这个计时器
							    	 clearInterval(myTimer);
						    		  //验证码验证成功
						    		  fun_tip('green','短信验证成功!'); //显示提示信息
						    		  $('#pnum').attr('readonly','readonly');//输入框不让输入
						    		  fun_changebtn('#find', false, '<i class="layui-icon">&#x1005;</i>');//禁用验证码按钮
						    		  fun_changebtn('.login-btn button', true, '登录');
					                  return;
						    	  }else{
						    		  //验证码验证失败
						    		  fun_tip('red','验证码输入错误!'); //显示提示信息
						    		  $('#pnum').removeAttr('readonly');//让输入框可以输入
						    	  }
						     }
					  });
					  
					    //禁用按钮
					    fun_changebtn('#find', false, '验证码');//禁用验证码按钮
					    var second=15;
					    //创建一个计时器，每个1秒中执行一次函数
					    myTimer=setInterval(function(){
					    	console.info(second);
					    	$('#find').html(second+"s");
					    	if(second==-1){
					    		//清除这个计时器
					    		clearInterval(myTimer);
					    		fun_tip('red','重新点击按钮发送短信验证!'); //显示提示信息
					    		fun_changebtn('#find', true, '验证码'); //启用按钮
					    		$('#pnum').val('');
					    		$('#pnum').attr('readonly','readonly');
					    		mobile_code='';
					    	}
					    	second--;
					    },1000);
					  
				  }else{
					  fun_tip('red','手机号格式不正确!');
				  }
			});
			
		});
	</script>

至此，验证码功能可以实现。