html短信验证登录

  最近在做项目中遇到了一个问题,做的是一个后台管理。都知道,后台是需要一定安全性的,所以一定要有登录这个功能的。然而登录这个功能,又有一个不可或缺的因素,那就是验证登录。不论是图形验证也好,还是什么其他的验证也好。总结起来就是,要想登录,就得验证。

    而我们正好需要的是一个手机短信验证,自己在网上搜了搜资料,之后又写了一些 test 。花了两个小时终于做好了。现在就和 大家分享一下短信验证的步骤。

   1、首先呢。短信验证是需要找到运营商,先整理好API接口的,这个我们可以在网上找这方面的运营商。我自己目前用的是一个秒滴短信的API接口。

 

 

 

 

 

 

 

 

 

2、我们就以秒滴短信为例吧,来看看秒滴短信是怎么申请的。

 

 

 

 

 

 

 

 

 

这一步很简单,就是点击左边的配置管理,里边有一个验证码短信模板,之后我们可以设置自己需要的模板,然后就是提交审核,这个嘛,就得等着运营商的审核啦。一般10分钟就能好,如果没有信息,那肯定是你提交的不是时候啦。

3、这一步完成,我们离成功就不远了,接下来我们可以看到在网站上方那个欢迎登陆旁边有一个开发者文档,那么我们点击进入就可以看到详细步骤啦。下方也有DEMO,我们也可以直接进行下载。

 

 

 

 

 

 

 

 

 

4、由于我使用的是java开发的,所以在此就先以java为例了,如果想了解PHP的,也可以下载PHP。下载后的文件为一个压缩包,文件名为:javaHttpApiDemo;内部有两个package;分别名为:httpApiDemo和huiDiao;第二个包名倒是很接地气哈。第一个包内部文件很多,但是我们只需要common内部的文件即可,我们可以将其copy到我们的项目当中,huidaiao这个包内也是有一个entity包,这个包内我们只需要MoNoticeReq和MoNoticeResp,两个即可,这两个是短信验证的entity,倘若想要其他的语音验证之类,可以留下其余的。在huidiao包中我们只需要留下MoNotice和RespCode这两个即可。所有这些全部copy到项目之中。

5、这些整理完了之后我们就可以开始test了。

 

 

 

 

 

 

 

 

 

忽略我的图片处理技术哦,在这里边我们需要在平台获取我们自己的ACCOUNT SID和AUTH TOKEN进行一定的配置。然后就可以输入我们的phone,运行,我们就可以看到手机收到了我们自己写的短信。

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
以下是一个简单的HTML文件,包含一个登录按钮和弹出短信验证窗口的功能: ```html <!DOCTYPE html> <html> <head> <title>Login</title> <style> .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 30%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } </style> </head> <body> <button onclick="openModal()">登录</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeModal()">×</span> <h2>短信验证</h2> <p>请输入您收到的验证码:</p> <input type="text" id="verificationCode" /> <br /><br /> <button onclick="verifyCode()">验证</button> </div> </div> <script> function openModal() { var modal = document.getElementById("myModal"); modal.style.display = "block"; } function closeModal() { var modal = document.getElementById("myModal"); modal.style.display = "none"; } function verifyCode() { var code = document.getElementById("verificationCode").value; // 在这里可以编写验证验证码的逻辑 console.log("验证码为:" + code); closeModal(); } </script> </body> </html> ``` 这个HTML文件包含一个按钮,当点击按钮时,会弹出一个模态框用于进行短信验证。在模态框中,用户需要输入收到的验证码,并点击验证按钮。你可以在`verifyCode()`函数中编写验证验证码的逻辑。在这个例子中,我们只是简单地将验证码打印到控制台,并关闭模态框。你可以根据自己的需求修改代码。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哇呜哦~~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值