时间戳

首页 > 技术文章 > 阿里云市场的短信api实现短信验证登陆(未上线的项目，个人可以用，便宜3.5元100条。。。。) 加 javamail 邮箱验证登陆

阿里云市场的短信api实现短信验证登陆(未上线的项目，个人可以用，便宜3.5元100条。。。。) 加 javamail 邮箱验证登陆

mangoubiubiu 2020-04-27 17:15 原文

阿里云市场的短信api实现短信验证登陆：未上线的项目，个人可以用，便宜3.5元100条。。。。 加 javamail 邮箱验证登陆

准备工作：准备发邮箱短信的util类

发邮件Util类
依赖

   <dependency>
 <groupId>javax.mail</groupId>
 <artifactId>mail</artifactId>
 <version>1.4</version>
</dependency>

public static void sendEmain( String email,String yzm) {

		// TODO Auto-generated method stub

		try {
			// 1、创建Properties对象，封装邮件服务器的相关信息
			Properties props = new Properties();
			// 服务器地址
			props.setProperty("mail.smtp.host", "smtp.126.com");
			// 服务器需要鉴权
			props.setProperty("mail.smtp.auth", "true");

			// 2、创建Authenticator的实例，实现账户、密码的鉴权。
			Authenticator auth = new Authenticator() {
				protected PasswordAuthentication getPasswordAuthentication() {
					// 使用账号 以及 授权码登录至邮件服务器，此处采用 126邮件服务器 授权码
					return new PasswordAuthentication("xxxxxxxxxx@126.com", "xxxx(这里不密码 是126邮件服务器 授权码)");
				}
			};
			// 3、获得Session实例
			Session mailSession = Session.getInstance(props, auth);

			// 4、创建SMTPMessage，要提供session
			SMTPMessage msg = new SMTPMessage(mailSession);

			
			// 5、设置邮件标题，没有标题的邮件几乎都会被认为是垃圾邮件被系统退回。
			msg.setSubject("用户邮箱验证登陆，请勿回复");
			// 6、设置邮件内容
			msg.setContent("【学生综合素质管理系统】您的验证码为"+yzm+",60s内有效，请尽快验证。如非本人操作，请忽略本条邮件。" , "text/html;charset=UTF-8");

			// 设置接收者
			// 7、接收者类型由：TO(收件人)、CC(抄送)、BCC(密送)
			msg.setRecipient(RecipientType.TO, new InternetAddress(email));
			// 8、设置发送人
			msg.setFrom(new InternetAddress("xxxxxxx@126.com"));
			// 发送邮件
			Transport.send(msg);

		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}

	}

发短信Util类
发短信在阿里云市场买就完事了
我买的这一个在这里插入图片描述
然后在自己已买的服务里面看 找到这个AppCode在这里插入图片描述
在购买api的下方有说明文档
在这里插入图片描述
拿过来跑就完事了，修改appcoud就可以了 如果自定义模板的话好像要过了审核才可以 用，我的没过审核试了好几次 都失败。
在这里插入图片描述
这样发短信util类也有了

控制层

//发短信
		@RequestMapping(value = "/api/sendPhone")
		@ResponseBody
		public String doLoginSendPhone(String phone) {

			
		    service.sendPhone(phone);
			return "发送成功，请注意查收";

		}
	
		//发邮件
	@RequestMapping(value = "/api/sendEmail")
	@ResponseBody
	public String doLoginSendEmail(String email) {

		
	    service.sendEmail(email);
		return "发送成功，请注意查收";

	}
	//销毁验证码
	@RequestMapping(value = "/api/destroy")
	@ResponseBody
	public String doLoginDeleteSend(String check) {

		
	    service.delectSession(check);
		return "销毁成功";

	}
	
	//邮件或者短信登陆
	@RequestMapping(value = "/api/yzLogin")
	@ResponseBody
	public String doLoginDeleteSend(String check,String emailOrPhone,String yzm,HttpServletResponse response) {
		
		return service.loginByPhoneOrEmail(check, emailOrPhone, yzm, response);

	}

服务层

这里我定义了2个存验证码的session 感觉定义一个就可以了

  /**
     * 用户发邮件发送验证码
     */
	@Override
	public void sendEmail(String email) {
		//生成验证码
		Integer yzm=yzmUtils.getlinkNo();
		//发邮件
		EmailUtil.sendEmain(email, String.valueOf(yzm));
		//存session
		ConstantUtils.getRequest().getSession().setAttribute(ConstantUtils.EMAIL_YZM, String.valueOf(yzm));
	}
    /**
     * 60s后清除session 前端带过来1 就是邮箱 ，2就是手机 
     */
	@Override
	public void delectSession(String check) {
     //前端带过来1 就是邮箱
     if("1".equals(check)){
    	 //移除邮箱session
    	ConstantUtils.getRequest().getSession().removeAttribute(ConstantUtils.EMAIL_YZM);
        }else {
    	 //移除短信session
        ConstantUtils.getRequest().getSession().removeAttribute(ConstantUtils.NOTE_YZM); 
    	 
     }
		
		
		
		
	}
    /**
     * 用户短信或者邮件登陆
     */
	@Override
	public String loginByPhoneOrEmail(String check, String emailOrPhone,String yzm, HttpServletResponse response) {
 
		
		 String checkYzm="";
		 User u=null;
	     //前端带过来1 就是邮箱 校验
	     if("1".equals(check)){
	    	 checkYzm=(String)ConstantUtils.getRequest().getSession().getAttribute(ConstantUtils.EMAIL_YZM);
  	 
	    	 u= mapper.findByEmail(emailOrPhone);
	    	   
	    
	 		boolean checkYzmFlag=checkYzm!=null&&!"".equals(checkYzm);
	 		
	 		
	    	  if(!checkYzmFlag){
	    		  
	    		  return"尚未点击发送按钮，或者验证码已经失效";
	    		  
	    	  }else if(!checkYzm.equals(yzm)){
	    		  
	    		  return"验证码输入错误，请仔细检查";
	    	  }else if(u == null){
	    		  
	    			return "该用户不存在";
	    	  //登陆成功
	    	  }else{
	    		// 登录成功，将用户的信息存放在session中
	  			ConstantUtils.getRequest().getSession().setAttribute(ConstantUtils.SESSION_USER, u);

	  			// 进行加密
	  			String secret = MD5Utils.convertMD5(u.getUserId() + "_" + u.getPwd());
	  			// addCookie(cookie名字,存活时间,cookie的值,request,response)

	  			CookieUtils.addCookie(ConstantUtils.LOGIN_COOKIE, 7*24*60*60, secret, ConstantUtils.getRequest(),
	  					response);   
	  			
	    	  }
        
	     //发短信校验
	        }else {		
	        	
	       	 checkYzm=(String)ConstantUtils.getRequest().getSession().getAttribute(ConstantUtils.NOTE_YZM);
	      	 
	    	 u= mapper.findByPhone(emailOrPhone);
	    	   
	    
	 		boolean checkYzmFlag=checkYzm!=null&&!"".equals(checkYzm);
	 		
	 		
	    	  if(!checkYzmFlag){
	    		  
	    		  return"验证码已失效，请重新发送";
	    		  
	    	  }else if(!checkYzm.equals(yzm)){
	    		  
	    		  return"验证码输入错误，请仔细检查";
	    	  }else if(u == null){
	    		  
	    			return "该用户不存在";
	    	  //登陆成功
	    	  }else{
	    		// 登录成功，将用户的信息存放在session中
	  			ConstantUtils.getRequest().getSession().setAttribute(ConstantUtils.SESSION_USER, u);

	  			// 进行加密
	  			String secret = MD5Utils.convertMD5(u.getUserId() + "_" + u.getPwd());
	  			// addCookie(cookie名字,存活时间,cookie的值,request,response)

	  			CookieUtils.addCookie(ConstantUtils.LOGIN_COOKIE, 7*24*60*60, secret, ConstantUtils.getRequest(),
	  					response);   
	  			
	    	  }
	        	
	        	
	        	
		    	 
	    	 
	     }
	     return "登陆成功";
			
		
	}
    /**
     * 发短信
     */
	@Override
	public void sendPhone(String phoneNumber) {
		
		//生成验证码
				Integer yzm=yzmUtils.getlinkNo();
				//发邮件
			    PhoneUtil.sendPhoneMsg(String.valueOf(yzm), phoneNumber);
				//存session
				ConstantUtils.getRequest().getSession().setAttribute(ConstantUtils.NOTE_YZM, String.valueOf(yzm));
		

	}

持久层

就是根据手机号和邮箱号查。。。

前端jquery

//邮件短信校验开始

//邮箱手机号校验开始


        var emailPhonestand=false;
		　var emailStandard =/^([1-9][0-9]{4,}\@qq\.com)|((\w+((-\w+)|(\.\w+))*)\+\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)$/;
			var phoneStandard = /^1[3456789]\d{9}$/;
		
		
$("#emailPhone").blur(function(){
		if (!this.value) {

			$("#emailPhoneTips").text("*请输入邮箱号或手机号");
			
			//输入的校验方式 不等于手机号格式并且不等于邮箱格式
	 	} else if (!phoneStandard.test(this.value)&&!emailStandard.test(this.value)) {
	    	$("#emailPhoneTips").html ("*请输入正确的邮箱号或者手机号");
		
		}else{
			
			emailPhonestand=true;
		}	
	
	
	
}).focus(function (){
	
	$("#emailPhoneTips").text("");
	
	
})

//倒计时

   var wait =60;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value = "发送";
            wait = 60;
   //如果时间过完 销毁session里的验证码
	//发短信
	var check="";
	//邮箱或者手机
   var emailPhone=$("#emailPhone").val()
	if(phoneStandard.test(emailPhone)){
		check="2";
	//发邮箱	
	}else{
		
		check="1";
	
	}
	
	 $.ajax({
		   //指定请求地址的url
		   url:"${ctx}/user/api/destroy",
	      //指定
		   type:"post",
		   data:"check="+check,
		  //预期服务器返回的数据类型
		   dateType:"text",
		   //服务器响应成功时候的回调函数
		   success:function(result){
            
           //    alert(result);
	    			
	    		},error:function(xhr, textStatus, err){//服务器响应失败时候的回调函数
 	    			alert(xhr);
	    			alert(textStatus);
	    			alert(err)
	    			
			   
		   }
		  	   
	   })
	

  

        } else {
            o.setAttribute("disabled", true);
            o.value = "重新获取(" + wait + ")";
            wait--;
            setTimeout(function() {
                time(o);
            }, 1000);
        };
    }
    document.getElementById("btn").onclick = function() {
      
           var value=$("#emailPhone").val();
          //置空验证码
          $("#yzm").val("");
        //如果校验成功
        if(emailPhonestand){
        	
        	//发短信
        	if(phoneStandard.test(value)){
        		
        		
        		 $.ajax({
					   //指定请求地址的url
					   url:"${ctx}/user/api/sendPhone",
				      //指定
					   type:"post",
					   data:"phone="+value,
					  //预期服务器返回的数据类型
					   dateType:"text",
					   //服务器响应成功时候的回调函数
					   success:function(result){
		                 
		                //    alert(result);
				    			
				    		},error:function(xhr, textStatus, err){//服务器响应失败时候的回调函数
			  	    			alert(xhr);
				    			alert(textStatus);
				    			alert(err)
				    			
						   
					   }
					  	   
				   })
        		
        
        	//发邮箱	
        	}else{
        	
        	
        		 $.ajax({
					   //指定请求地址的url
					   url:"${ctx}/user/api/sendEmail",
				      //指定
					   type:"post",
					   data:"email="+value,
					  //预期服务器返回的数据类型
					   dateType:"text",
					   //服务器响应成功时候的回调函数
					   success:function(result){
		                 
		                //    alert(result);
				    			
				    		},error:function(xhr, textStatus, err){//服务器响应失败时候的回调函数
			  	    			alert(xhr);
				    			alert(textStatus);
				    			alert(err)
				    			
						   
					   }
					  	   
				   })
				  
        	
        	}
        	
        	
        	time(this);	
        	
        }

          
    };
//登陆开始
$("#yzBtn").click(function(){
	  //邮箱或者手机
	   var emailPhone=$("#emailPhone").val()
	   //验证码
	    var yzm=$("#yzm").val()
	var check="";
	  //手机
	if(phoneStandard.test(emailPhone)){
		check="2";
	//发邮箱	
	}else{
		
		check="1";
	
	}
 
	 $.ajax({
		   //指定请求地址的url
		   url:"${ctx}/user/api/yzLogin",
	      //指定
		   type:"post",
		   data:"check="+check+"&emailOrPhone="+emailPhone+"&yzm="+yzm,
		  //预期服务器返回的数据类型
		   dateType:"text",
		   //服务器响应成功时候的回调函数
		   success:function(result){
                if(result=="登陆成功"){
                	
                	window.location = "${ctx}/student/msg/list";
                }else{
                	$("#emailOrPhoneTip").text("*"+result);
                	
                }
           
	    			
	    		},error:function(xhr, textStatus, err){//服务器响应失败时候的回调函数
 	    			alert(xhr);
	    			alert(textStatus);
	    			alert(err)
	    			
			   
		   }
		  	   
	   })
	
	
	
	
})

html

	<!-- 面板二开始-->
							<li class="mt-tabpage-item">


								<form class="form-horizontal" method="post"
									action="/taobao/identity/login.action" role="form">
									<div class="form-group">
										<div class="col-sm-8">
											<input class="form-control" value="" placeholder="手机号/邮箱"
												type="text" id="emailPhone" name="loginName" />
										</div>

									</div>
									<div class="form-group" style="margin-top: -20px;">
										<div class="col-sm-8">
											<span id="emailPhoneTips" style="font-size: 12px; color: #F66495;"></span>
										</div>

									</div>





									<div class="form-group">
										<div class="col-sm-8">
											<div class="input-group">
												<input type="text" id="yzm" class="form-control" placeholder="请输入验证码">
												<span class="input-group-btn">
													<input  id="btn" class="btn btn-default" type="button" value="发送">
												</span>
											</div>
											<!-- /input-group -->
										</div>
									</div>

									<div class="form-group" style="margin-top: -20px;">
										<div class="col-sm-8">
											<span id="emailOrPhoneTip"
												style="font-size: 12px; color: #F66495;"></span>
										</div>

									</div>

									<div class="form-group">
										<div class="col-sm-8">
											<span style="color: red;"></span>
										</div>
									</div>

									<div class="form-group">
										<div class="col-sm-8">
											<div class="btn-group btn-group-justified" role="group"
												aria-label="...">
												<div class="btn-group" role="group">
													<button id="yzBtn"type="button" class="btn btn-info">
														<span class="glyphicon glyphicon-log-in"></span>&nbsp;登录
													</button>
												</div>
												<div class="btn-group" role="group">
													<button type="button" class="btn btn btn-danger">
														<span class="glyphicon glyphicon-edit"></span>忘记密码
													</button>
												</div>
											</div>
										</div>
									</div>
								</form>
							</li>

							<!-- 面板二结束-->

推荐阅读