您的位置：首页 > 理论基础 > 计算机网络

http接口实现短信发送验证码

2017-03-11 15:53 435 查看

我实现这个短信发送用的是www.laidx.com这个网站提供的免费的20条来测试这个代码。也就是我的javaScript里面有方法链接到他提供的HTTP接口。

这个实现只有前台页面，没有后台逻辑，本质上不安全的。因为我的随机数直接在js方法中生成了，直接暴露给客户。你们写的时候把这个验证码生成放到后台来进行，一个逻辑。（只为了实现的朋友直接拷贝这个jsp页面就能实现了）

其他网站也可以，随便找，只要他给你地址，account和token就能实现了。一般这种网站都要注册才能给你地址，account和token。下面的代码你有accout和token后加进去就能实现这个功能了。

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jQuery-2.2.0.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>同志们好</h1>
<a href="NewFile.jsp">跳转</a>
<form action="login" method="post" id="myForm">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" id="userName" name="user_name" onblur="usernamecheck()">
<div id="userNameInfo"></div>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" id="pwd" name="psw"></td>
</tr>
<tr>
<td>手机号：</td>
<td><input type="text" id="phone" >
<div id="userPhoneInfo"></div></td>
</tr>
<tr>
<td>验证码：<input type="text" id="authCode"></td>
<td><input type="button" class="btn btn-info btn-xm" id="btn" value="获取验证码" onclick="settime(this)" /></td>
</tr>
<tr>
<td></td>
<td></td>

4000
</tr>
<tr>
<td>提交<input type="button" value="提交" onclick="yanzheng()"></td>
<td></td>
</tr>
</table>
</form>
<script type="text/javascript">
var regUser=/^[a-zA-Z0-9]{1,16}$/;
var regPhone=/^[0-9]{11}$/;
var code_num="";
var phone_check = false;
function usernamecheck(){
if(!regUser.test($("#userName").val())){
$("#userName").css("border-color","red");
$("#userNameInfo").html("请输入1-16位字母或者数字");
$("#userNameInfo").css("color","red");
}else{
$("#userName").css("border-color","green");
$("#userNameInfo").html("该用户名可以注册");
$("#userNameInfo").css("color","green");
code_num="";
for(var i=0;i<6;i++)
{
code_num+=Math.floor(Math.random()*10);
}
alert(code_num);
}
}

$("#btn").on("click", function (){
var params = {};
params.account="*****网站给你的account值*******";
params.token="*****网站给你的token值**********";
params.mobile=$("#phone").val();
params.content="【短信来了】您的验证码为："+code_num+"，如非本人操作，请忽略。";
params.type=0;
$.ajax({
type:'post',
url:'http://120.24.161.220:8800/SMS/Send',
data:params,
dataType:'json',
success:function(data){
alert();
},
});
})
function phonecheck(){
var phone = $("#phone").val();
if(regPhone.test(phone)){
$("#phone").css("border-color","");
$("#userPhoneInfo").html("");
$("#userPhoneInfo").css("color","");
flas = true;
phone_check = true;
}else{
$("#phone").css("border-color","red");
$("#userPhoneInfo").html("请输入是11位手机号");
$("#userPhoneInfo").css("color","red");
flas = false;
}

}
function settime(obj) {
if(phone_check){
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.value="免费获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}else{
$("#phone").css("border-color","red");
$("#userPhoneInfo").html("请输入是11位手机号");
$("#userPhoneInfo").css("color","red");
}
}
function yanzheng(){
var autoCode=$("#authCode").val();
if(autoCode==code_num){
$("#myForm").submit();
}else{
alert("验证码错误");
}
}
</script>
</body>

</html>

逻辑很简单，就是自己生成一个6位数的验证码，然后叫那个网站把随机生成的验证码到手机上。提交的时候做个判断就行了。看输入跟随机产生的是不是一样，就ok了。

我没有在倒计时结束后把code_num清空，真正做的话要清空下才合理。头好疼，懒得写了。

有问题请留言赐教。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 短信验证码 http

相关文章推荐

新的分享

章节导航