I implemented this text messaging using 20 free items from www.laidx.com to test the code. That is to say, there are methods in my javaScript that link to the HTTP interface he provides.
This implementation has only front page, no background logic, and is inherently insecure. Because my random numbers are generated directly in the js method and are exposed directly to customers. When you write it, put the verification code generation in the background, a logic. (Just copy this jsp page directly for friends who want to implement it)
Other websites can also be easily found, as long as he gives you the address, account and token can be achieved. Usually this kind of website has to be registered to give you the address, account and token. The following code, you have accout and token, can be added to achieve this function.
<%@ 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>Good comrades!</h1>
<a href="NewFile.jsp">Jump</a>
<form action="login" method="post" id="myForm">
<table>
<tr>
<td>User name:</td>
<td>
<input type="text" id="userName" name="user_name" onblur="usernamecheck()">
<div id="userNameInfo"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" id="pwd" name="psw"></td>
</tr>
<tr>
<td>Cell-phone number:</td>
<td><input type="text" id="phone" >
<div id="userPhoneInfo"></div></td>
</tr>
<tr>
<td>Verification Code:<input type="text" id="authCode"></td>
<td><input type="button" class="btn btn-info btn-xm" id="btn" value="Get the authentication code" onclick="settime(this)" /></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Submission<input type="button" value="Submission" 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("Please input 1-16 Bit letters or numbers");
$("#userNameInfo").css("color","red");
}else{
$("#userName").css("border-color","green");
$("#userNameInfo").html("This username can be registered");
$("#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="*****The website gives you account value*******";
params.token="*****The website gives you token value**********";
params.mobile=$("#phone").val();
params.content="[Your verification code is:"+code_num+"，If you do not operate by yourself, please ignore it.";
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("Please enter the 11-digit mobile phone number.");
$("#userPhoneInfo").css("color","red");
flas = false;
}
}
function settime(obj) {
if(phone_check){
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.value="Free access to authentication codes";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value="Resend(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}else{
$("#phone").css("border-color","red");
$("#userPhoneInfo").html("Please enter the 11-digit mobile phone number.");
$("#userPhoneInfo").css("color","red");
}
}
function yanzheng(){
var autoCode=$("#authCode").val();
if(autoCode==code_num){
$("#myForm").submit();
}else{
alert("Verification code error");
}
}
</script>
</body>
</html>The logic is simple, that is, to generate a six-digit verification code, and then ask that website to randomly generate the verification code to the mobile phone. Just make a judgement when submitting. See if the input is the same as that generated randomly, ok ay.
I didn't empty the code_num at the end of the countdown. It would be reasonable to empty it if I really did. I have a headache and I'm too lazy to write.
If you have any questions, please leave a message.