JavaWeb手机短信验证，使用Bmob进行手机短信验证，JavaScript实现手机短信验证

一、功能介绍
给网站增添手机短信验证码的功能，打破常规地用JS生成随机的验证码，不仅提高了系统的安全性，也使得开发的系统具有些新意。

二、使用第三方平台

这里推荐使用Bmob后端云提供的短信功能。

1.没有Bmob账号的需要注册个账号，登录成功后需要进行实名验证可以正常使用里面的功能。

2.实名成功后，点击左上角的创建应用

这里写图片描述

3.填写应用名称，并选择相应的应用类型，选择开发版（免费），点击确认即可。
这里写图片描述

4.获取应用密钥和下载SDK
选择你要开发的应用，进入该应用
这里写图片描述

5.在跳转页面，进入设置/应用密钥，点击复制，即可得到Application ID
这里写图片描述

4.Bmob里有相应的SDK与开发文档，具体看个人的选择，我选用的是JavaScript的。
获取Application ID和REST API Key后，下载SDK。

5.安装BmobSDK

（1）把下面这行代码加入你的页面中，其中，”bmob-min.js”为SDK文件：

<script src="./js/bmob-min.js"></script>

（2）然后加入这行代码进行初始化

Bmob.initialize("你的Application ID", "你的REST API Key");

三、代码

该完整代码是发送验证码到手机与验证用户输入的验证码是否正确：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>用户注册界面</title>
<script type="text/javascript" src="./jquery/jquery-3.3.1.min.js"></script>
<script src="./js/bmob-min.js"></script>
<script type="text/javascript">
    Bmob.initialize("你的Application ID", "你的REST API Key");

    //发送验证码
    $(function(){
        $("#getCode").click(function(){      
            var myphone = $("#phone").val();
            alert(myphone);
            Bmob.Sms.requestSmsCode({"mobilePhoneNumber": myphone } ).then(function(obj) {
                  alert("smsId:"+obj.smsId); //
                }, function(err){
                  alert("发送失败:"+err);
                }); 
        });  

        //验证码验证
        $("#submit").click(function(){
            var myphone = $("#phone").val();
            var code = $("#checkCode").val();
            alert(myphone);
            alert(code);
            Bmob.Sms.verifySmsCode(myphone, code).then(function(obj) {
                  alert("msg:"+obj.msg); //
                }, function(err){
                  alert("发送失败:"+err);
                });  
        });

    }); 


</script>
</head>
<body>
    手机号:<input type="text" id="phone" name="phone"/><button id="getCode">获取验证码</button><br>
    输入验证码：<input type="text" id="checkCode"/><br>
    <button id="submit">注册</button>
</body>
</html>

上面代码亲测有效，可以具体参考开发文档哈，看过了你就知道怎么做了，很简单，就几行代码就实现了手机短信的发送与验证了。

四、调试
对于JavaScript的调试，个人比较推荐谷歌浏览器，按F12，调出开发者工具再进行调试就可以了。这对JavaScript的调试有一定的帮助。

JavaWeb手机短信验证，使用Bmob进行手机短信验证，JavaScript实现手机短信验证

猜你喜欢