接收短信消息接口API，使用ajax跨域无刷新实现根据手机号码发送6位短信验证码

应用场景：登录验证，注册账号，密码找回，绑定手机号等功能

1. 本接口采用的是聚合数据接口：https://www.juhe.cn/docs/api/id/54

2. 首先，注册账号申请快递单号接口：获取申请的key
在这里插入图片描述

3. 短信模板申请
3.1. 因为等会需要短信模板的ID，所以需要先申请短信模板：https://www.juhe.cn/sms（申请完后需要等大概5分钟，系统会审核你的模板）
在这里插入图片描述

3.2 审核通过后会产生一个短信模板ID，记住他，等会会用。（申请页面底部）
在这里插入图片描述

4. 接口参数查看（主要是这四个参数需要传到服务端）
在这里插入图片描述

参数简单说明：
mobile：接收的手机号
tpl_id：短信模板ID（第三步申请那个）
tpl_value：变量名和变量值（说人话就是手机号收到的数据，我们设置的是6位数验证码）
key：短信API申请的key（第二步申请的key）
dtype：根据自己需求设置，等会不会设置。

5. 代码实现

使用Jquery的ajax请求（因为服务端没有主动设置开放CROS资源共享）浏览器默认同源策略，需要跨域访问，此时用：dataType：“jsonp” 即可

复制我代码运行可能会失败，因为默认免费只有10条短信发送，用完需要买。需要你们自己去申请。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发送短信API</title>
    <input type="text" placeholder="请输入需要找回的手机号码" id="phone">
    <button id="btn">找回密码</button>
</head>
<body>
</body>
</html>
<!-- Jquery请保证在1.12及以上 -->
<script src="./jquery-1.12.4.js"></script>
<script>
    /**
     * 生成随机的6位数验证码
     */
    function numRandom(){
        var num="";
        for(var i=0;i<6;i++){
            num+=Math.floor(Math.random()*10)
        }
        return num;
    }
    /**
    * 点击找回密码发送短信
    */
    $('#btn').on('click',function(){
        //短信模板Id（需要申请，详情看上面申请步骤）
        var $model_Id = "124717";
        //您的验证码是#code# 随机的6位数
        var $tpl_value = "%23code%23%3D" + numRandom();
        //获取AppKey（需要申请）
        var $AppKey = "df82a97af149f6f1e3a69dd6ccec4e63";
        $.get({
            url:"http://v.juhe.cn/sms/send",
            data:{
                mobile:$('#phone').val(),
                tpl_id:$model_Id,
                tpl_value:$tpl_value,
                key:$AppKey
            },
            dataType:"jsonp",
            success:function(obj){
                console.log(obj);
            }
        });
    });
</script>

获取到的数据结果，此时就发送短信成功了，可以看到已经收到短信了。
在这里插入图片描述

注意保存返回的状态和sid：可以存储到数据库
还有生成的随机号码一起返回到数据库：方便验证用户输入的是否和收到的验证码是否匹配

接收短信消息接口API，使用ajax跨域无刷新实现根据手机号码发送6位短信验证码

猜你喜欢