秒滴云短信验证登录小demo

短信验证登录demo

<a class="click_login_head" data-href="/member" data-method="offset" data-type="auto">登录</a>

layui.use('layer',function(){var $ =layui.jquery,layer = layui.layer;//触发事件var active={offset: function(othis) {var type = othis.data('type'), text = othis.text();var str='<div class="layer-wrap">' +'<div class="login-box flip-box out flip">' +'<p class="tip-title">手机验证码登录</p>' +'<p class="phone"><i class="icon-phone">' +'</i><span class="ml30">|</span>' +'<input type="phone" name="login_username" placeholder="请输入手机号" required class="phone" maxlength="11" id="phone">' +'</p><p class="code"><i class="icon-password">' +
'</i><span class="ml30">|</span><input class="psw-input" type="password" id="code" name="code" placeholder="请输入动态密码"  maxlength="6">' +
'<input type="button" class="login-get-code get-code fr" id="btn" value="获取动态码"  ></p>' +'<p class="login-reg mt40">新手机号将自动注册</p>' +'<input type="hidden" id="ceshi" value="1">' +'<button class="btn-login" id="lo">登录</button>' +'<a href="javascript:void(0)" class="flip-code">' +'<img src="../../resource/images/code.png" alt=""></a></div></div>';layer.open({type: 1, offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset, id: 'layerDemo' + type //防止重复弹出, title: '', content: str, scrollbar: false, shade: 0.3 //不显示遮罩, area:['420px','475px']});}};$('.head .wrap .click_login_head,.click_register_head').on('click', function(){var othis = $(this), method = othis.data('method');active[method] ? active[method].call(this, othis) : '';});}

这里使用了一个layui的弹出窗口，layui的CSS比较好看所以用上了，主要部分是获取动态码和登录那，下面为登录窗口：

下面是JavaScript代码

<script type="text/javascript">
//这里是计时器，把活动动态码按钮的改成倒计时var InterValObj; //timer变量，控制时间var count = 60; //间隔函数，1秒执行var curCount;//当前剩余秒数function sendMessage() {curCount = count;$("#btn").attr("disabled", "true");//发送验证码$("#btn").val(curCount + "秒后可重新发送");InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO}//timer处理函数function SetRemainTime() {if (curCount == 0) {window.clearInterval(InterValObj);//停止计时器$("#btn").removeAttr("disabled");//启用按钮$("#btn").val("重新发送验证码");} else {curCount--;$("#btn").val(curCount + "秒后可重新发送");}}var  sms = "";//发送验证码$(document).on('click','.login-get-code',function(){var phone = $("#phone").val();if (phone != "") {sendMessage();$.ajax({url : "sendSMS",  //发送请求  目标地址type : "post",  //POST方式传输datatype:"json",data : {  //发送到服务器的数据"phone" : phone},success : function(result) {console.log(".........................");alert("发送成功");sms = result.data;}});} else {alert("请输入手机号");return false;}});//点击登录$(document).on('click','.btn-login',function(){console.log("sms:"+sms);var code = $("#code").val();if (code == "") {alert("请输入验证码");} else {if (sms == code) {window.location.href = "success.jsp";} else {alert("验证码错误");};};});
</script>

从秒滴云官网注册账号认证然后配置相应文件 https://api.miaodiyun.com

Config文件配置

public class Config
{/*** url前半部分*/public static final String BASE_URL = "https://api.miaodiyun.com/******";/*** 开发者注册后系统自动生成的账号，可在官网登录后查看-修改为自己的。*/public static final String ACCOUNT_SID = "*fb****54b**44d4****0**2****cbe2";/*** 开发者注册后系统自动生成的TOKEN，可在官网登录后查看-修改为自己的。*/public static final String AUTH_TOKEN = "****************************f";/** * 响应数据类型, JSON或XML*/public static final String RESP_DATA_TYPE = "json";
}

HttpUtil文件配置

public class HttpUtil
{/*** 构造通用参数timestamp、sig和respDataType** @return*/public static String createCommonParam(){// 时间戳SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");String timestamp = sdf.format(new Date()); //格式化时间// 签名   加密的参数值直接进行加密处理：DigestUtils.md5Hex(),括号中放入我们需要加密的参数即可String sig = DigestUtils.md5Hex(Config.ACCOUNT_SID + Config.AUTH_TOKEN + timestamp);return "&timestamp=" + timestamp + "&sig=" + sig + "&respDataType=" + Config.RESP_DATA_TYPE;}/*** post请求** @param url*            功能和操作* @param body*            要post的数据* @return* @throws IOException*/public static String post(String url, String body){ System.lineSeparator()：(换行符) 剔除了平台无关性，写一次代码跑通在Linux上和Window上都能够运行。System.out.println("url:" + System.lineSeparator() + url);System.out.println("body:" + System.lineSeparator() + body);String result = "";try{OutputStreamWriter out = null;BufferedReader in = null; //BufferedReader 是缓冲字符输入流。它继承于Reader。//BufferedReader 的作用是为其他字符输入流添加一些缓冲功能。URL realUrl = new URL(url);URLConnection conn = realUrl.openConnection();// URL 引用的资源的通信链接// 设置连接参数conn.setDoOutput(true);conn.setDoInput(true);conn.setConnectTimeout(5000);//设置连接主机超时 单位：毫秒conn.setReadTimeout(20000); //设置从主机读取数据超时 单位：毫秒conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");// 提交数据  将写入的字符编码成字节后写入一个字节流out = new OutputStreamWriter(conn.getOutputStream(), "UTF-8");out.write(body);out.flush();// 读取返回数据in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));String line = "";boolean firstLine = true; // 读第一行不加换行符 readLine，读取一个文本行，从字符输入流中读取文本，缓冲各个字符，从而提供字符、数组和行的高效读取。while ((line = in.readLine()) != null) //readLine，读取一个文本行，从字符输入流中读取文本，缓冲各个字符，从而提供字符、数组和行的高效读取。{if (firstLine){firstLine = false;} else{result += System.lineSeparator();}result += line;}} catch (Exception e){e.printStackTrace();}return result;}/*** 回调测试工具方法** @param url* @param reqStr* @return*/public static String postHuiDiao(String url, String body){String result = "";try{OutputStreamWriter out = null;BufferedReader in = null;URL realUrl = new URL(url);URLConnection conn = realUrl.openConnection();// 设置连接参数conn.setDoOutput(true);conn.setDoInput(true);conn.setConnectTimeout(5000);conn.setReadTimeout(20000);// 提交数据out = new OutputStreamWriter(conn.getOutputStream(), "UTF-8");out.write(body);out.flush();// 读取返回数据in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));String line = "";boolean firstLine = true; // 读第一行不加换行符while ((line = in.readLine()) != null){if (firstLine){firstLine = false;} else{result += System.lineSeparator();}result += line;}} catch (Exception e){e.printStackTrace();}return result;}
}

Controller层

@RestController
public class MemberController {@PostMapping("/sendSMS")public JsonResult getSMS(String phone){String code = GetMessageCode.getCode(phone);/*String code = "123456";*///测试时使用蚊子再小也是肉！System.out.println("code="+code);return new JsonResult(0,"验证码发送成功",code);}
}

效果：

秒滴云短信验证登录小demo相关推荐

java WEB调用秒嘀科技短信验证接口（实现短信验证登录）
java WEB调用秒嘀科技短信验证接口(实现短信验证登录) 前言注册秒嘀云账号登录秒嘀云官网代码前言短信验证登咱就不多说了,为什么推荐用秒嘀的呢,应为他会送你10元钱,对于新手来说10元钱 ...
Springboot+redis+榛子云短信验证服务进行登录
Springboot+redis+榛子云短信验证服务进行登录前言最近在做尚医通的医院预约挂号管理系统时,做到了使用阿里云的短信验证服务,但是现在阿里云的短信验证服务审核听说非常严格,主要是我没有专 ...
工厂如何实现无线wifi短信验证登录？工厂上网实名认证系统
工厂如何实现无线wifi短信验证登录?工厂上网实名认证系统工厂提供公共的无线wifi上网服务,需对用户进行实名认证.手机短信实名认证以其用户体验.综合成本等优势,成为工厂无线上网认证的首选方案. 一 ...
榛子云短信验证平台与springboot集成的短信验证
登录 - 榛子云短信用户系统 (zhenzikj.com) 上面是登录榛子云短信验证平台的入口,此平台的短信大概为3.1分一条短信. 如何与spring boot进行集成呢,我以注册为例来慢慢讲解 1 ...
七丶青龙nvjdc部署教程+短信验证登录对接傻妞
青龙nvjdc部署教程+短信验证登录对接傻妞Nolanjdc 没有服务器的先自行购买,这里推荐腾讯云2H4G8M首年70–点击购买青龙面板安装教程傻妞机器人安装教程 XDD安装教程 QQ交流:10 ...
Vue与Node.js实现手机短信验证登录
手机短信使用的第三方平台是联容云,注册就送8块钱体验费,足够自己用用了,注册完自己建一个应用就能拿到需要使用的配置了,如图注册完之后1就可以使用了. Node.js后端使用了Express框架 &q ...
springboot整合阿里云短信验证服务
导入上面jar包 <dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sd ...
Springboot实现短信验证登录
一.介绍使用短信验证登录也是现在实际项目中普遍使用的一种登录, 二.实际的操作流程 1.用户在前端页面输入手机号码之后,点击发送验证码 2.前端将手机号传给后端 3.后端生成一个6为的随机数通过短信 ...
阿里云短信验证解决方案(java版)(redis存储)
阿里云短信验证解决方案(java版)(redis存储) 参考文章: (1)阿里云短信验证解决方案(java版)(redis存储) (2)https://www.cnblogs.com/Amos-Tur ...

秒滴云短信验证登录小demo

秒滴云短信验证登录小demo相关推荐

最新文章

热门文章