如何在游戏陪玩app源码开发中，实现发送短信验证码登录

最新推荐文章于 2024-09-19 15:23:21 发布

云豹科技程序猿

最新推荐文章于 2024-09-19 15:23:21 发布

阅读量360

点赞数

分类专栏：游戏陪玩约单源码文章标签： ajax

原文链接：https://blog.csdn.net/aaqia/article/details/120506754

版权

游戏陪玩约单源码专栏收录该内容

158 篇文章 0 订阅

订阅专栏

本文详细介绍了游戏陪玩App源码中实现短信验证码登录的步骤，包括前端用户输入手机号和验证码，点击获取验证码时通过Ajax调用后端接口发送短信，验证码存储在Redis数据库中，以及用户提交登录时验证手机号和验证码的一致性。通过这种方式确保了用户信息安全。

摘要由CSDN通过智能技术生成

为了保证用户在游戏陪玩app源码中的信息安全，在登录系统时，一般都需要进行验证，其中通过短信验证码形式进行验证是目前比较常见的，那么在游戏陪玩app源码开发时，应该如何实现短信验证码登录呢？

游戏陪玩app源码前台代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, ser-scalable=no">

        <link rel="stylesheet" type="text/css" href="css/reset.css"/>

        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>

        <title></title>

        <style type="text/css">

            html { background: #efefef; }

            p { position: relative;height: 1rem;width: 90%; margin: 0 auto;border-bottom: 1px solid lightgray; }

            p input { outline: none;text-indent: 0.4rem;font-size: 0.3rem;height: 100%;width: 100%;background: rgba(0,0,0,0); }

            p span { display: inline-block;font-size: 0.3rem;color: gray;position: absolute;top: 0.35rem;right: 0.3rem; }

            div { width: 80%;height: 1rem;line-height: 1rem;text-align: center;background: #D81E06;color: #fff;font-size: 0.3rem;margin: 0.5rem auto 0;border-radius: 0.1rem; }

            i { width: 100%;text-align: center;display: inline-block;color: gray;margin-top: 0.4rem; }

            i wet { color: blue; }

        </style>

    </head>

    <body>

        <form id="form1">

        <p style="padding-top: 2rem;">

            <input type="number" value=""  id="phone" name="phone" placeholder="请输入手机号" />

        </p>

        <p>

            <input type="number" id="code"  name="code" placeholder="请输入验证码" />

            <span id="sendSms">获取验证码</span>

        </p>

        <div id="login">登录</div>

        <i>点击登录，即表示已阅读并同意<wet>《车友援服务协议》</wet></i>

        </form>

     

    </body>

    

    <script>

         $(function() {
            $("#sendSms").click(function() {
                $.ajax({
                    type: 'get',

                    url: 'http://localhost:8080/api/customer/sengCodeNum',

                    data: {
                        "phoneNum":$("#phone").val()

                    },

                    dataType: 'json',

                    success: function(res) {
                        if (res.code == 0) {
                            alert("验证码已发送到手机")

                            //这里写作业2

                        }else{
                            alert("发送失败")

                        }

                    },

                })

当完成获取验证码操作时，验证码会发送到游戏陪玩app源码的redis库中。
在这里插入图片描述

})

         

            $("#login").click(function() {
                $.ajax({
                    type: 'post',

                    url: 'http://localhost:8080/api/customer/customerLogin',

                    data: {
                        "phoneNum":$("#phone").val(),

                        "codeNum":$("#code").val()

                    },

                    dataType: 'json',

                    success: function(res) {
                        if (res.code == 0) {
                            alert("登录成功")

                        }else{
                            alert("验证码不对")

                        }

                    },

                })

            })

        });

    </script>

</html>

这是游戏陪玩app源码后台的发送验证码和登录

@RestController
@CrossOrigin(origins = "*")//注意： *是来自于所有的域名请求
@RequestMapping("/api/customer")
public class CustomerController{
@Autowired(required = false)
private CustomerService customerService;

@Autowired
private JedisPool jedisPool;
        //发送验证码
    @RequestMapping("/sengCodeNum")
    public Map sendCodeNum(String phoneNum) {
        Map map = new HashMap();
        //1.在发送验证码之前，随机撞见一个6位数的验证码
        int randomNum = new Random().nextInt(999999);//0-999999
        if (randomNum < 100000) {
            randomNum = randomNum + 100000;
        }
        //1.1在发送验证码之前 需要向redis中查询该手机 有没有验证码存在，如果存在，就直接从redis中读取，而不从阿里云发送，可以节省成本
        //查询pcode这个key在不在
        Boolean b = jedisPool.getResource().exists("phoneNum");
        if (b) {
            map.put("code", 0);
            map.put("msg", "验证啊已存在，情趣短信中查询");
            return map;
        } else {
            //2.接受到前端传过来的手机号：phoneNum  对其调用 阿里云的发送短信的工具类，去发送验证码
            ALSMSUtil.sendMsg(phoneNum, randomNum);
            //3.再送之后，将手机号当做redis key，验证码当做redis value 存入到redis数据库中
            String setex = jedisPool.getResource().setex(phoneNum, 120, String.valueOf(randomNum));
            System.out.println("setex = " + setex);
            jedisPool.getResource().persist(phoneNum);//注意：这里设置成-1 在线上环境测试要删除
            //4.将验证码发送给前端
            if ("OK".equals(setex)) {
                map.put("code", 0);
                map.put("msg", "发送成功");
                //map.put("data",randomNum);//线上不能把验证码发送前端，容易被人利用
                return map;
            } else {
                map.put("code", 500);
                map.put("msg", "发送失败");
                return map;
            }
        }
    }

    //校验手机号和验证码
    @RequestMapping("/customerLogin") //  /api/customer/customerLogin
    public Map customerLogin(String phoneNum,String codeNum){
        Map map = new HashMap();
        //1.根据前端传来的手机号和验证码来和redis中的数据做对比
        String redisCodeNum = jedisPool.getResource().get(phoneNum);//redis中的验证码
        if(codeNum.equals(redisCodeNum)){
            map.put("code",0);
            map.put("msg","发送成功");
            return map;
        }else{
            map.put("code",500);
            map.put("msg","发送失败");
            return map;
        }
    }
}