首页 > 其他分享 >06 手机号 + 短信验证

06 手机号 + 短信验证

时间:2023-07-01 18:33:05浏览次数:48  
标签:code 短信 手机号 form 验证码 phone user 06 id

短信发送

启用阿里云短信服务

image

image

设置签名模板

image

image

image

设置accesskey

image

image

添加权限

image

代码开发

image

sdk帮助文档

image

image

在pom.xml文件导入依赖

        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
            <version>4.5.16</version>
        </dependency>

        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-dysmsapi</artifactId>
            <version>2.1.0</version>
        </dependency>

复制**SMSUtils.java**到utils包(自行创建)下。

手机号验证码登录

预准备

image

image

image

image

前端代码

image

image

基础工作

1)拷贝user.java到entity下,创建基本结构,再复制ValidateCodeUtils工具类。

image

2)修改front/api/login.js:加上下面的代码:

function sendMsgApi(data) {
  return $axios({
    'url': '/user/sendMsg',
    'method': 'post',
      data
  })
}

3)修改front/page/login.html的以下部分(注:第8、17、20行为修改处):

            methods:{
                getCode(){
                    this.form.code = ''
                    const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
                    if (regex.test(this.form.phone)) {
                        this.msgFlag = false
                        sendMsgApi({phone:this.form.phone});
                        this.form.code = (Math.random()*10000).toFixed(0)
                    }else{
                        this.msgFlag = true
                    }
                },
                async btnLogin(){
                    if(this.form.phone && this.form.code){
                        this.loading = true
                        const res = await loginApi({phone:this.form.phone,code:this.form.code})
                        this.loading = false
                        if(res.code === 1){
                            sessionStorage.setItem("userPhone",this.form.phone)
                            sessionStorage.setItem("userCode",this.form.code)
                            window.requestAnimationFrame(()=>{
                                window.location.href= '/front/index.html'
                            })                       
                        }else{
                            this.$notify({ type:'warning', message:res.msg});
                        }
                    }else{
                        this.$notify({ type:'warning', message:'请输入手机号码'});
                    }
                }
            }

代码开发

LoginCheckFilter类下面,修改代码:


        //4-1判断登陆状态,如果已登录,则直接放行
        if(request.getSession().getAttribute("employee")!=null){
            log.info("用户已登录,用户id为:{}",request.getSession().getAttribute("employee"));

            //存入id到线程当中
            Long empId=(Long)request.getSession().getAttribute("employee");
            BaseContext.setCurrentId(empId);

//            long id =Thread.currentThread().getId();
//            log.info("线程id为{}",id);

            filterChain.doFilter(request,response);
            return;
        }

        //4-2判断移动端登陆状态,如果已登录,则直接放行
        if(request.getSession().getAttribute("user")!=null){
            log.info("用户已登录,用户id为:{}",request.getSession().getAttribute("user"));

            //存入id到线程当中
            Long userId=(Long)request.getSession().getAttribute("user");
            BaseContext.setCurrentId(userIdId);

//            long id =Thread.currentThread().getId();
//            log.info("线程id为{}",id);

            filterChain.doFilter(request,response);
            return;
        }

UserController类下发送验证码的:

    /**
     * 发送手机短信验证码。因为前端发送的是json,所以要加上注解。
     * @param user
     * @return
     */
    @PostMapping("/sendMsg")
    public R<String> sendMsg(@RequestBody User user, HttpSession session){
        //获取手机号
        String phone = user.getPhone();

        if(!StringUtils.isEmpty(phone)){
            //生成随机的的4位验证码
            String code= ValidateCodeUtils.generateValidateCode(4).toString();
            log.info("code={}",code);

            //调用阿里云提供的短信API服务完成发送短信
            SMSUtils.sendMessage("瑞吉外卖","",phone,code);
            //需要将生成的验证码保存到session
            session.setAttribute(phone,code);
            return R.success("手机短信验证码发送成功");
        }
        return R.error("短信发送失败");
    }

注意:这里要在阿里云上申请对应签名的模板,签名+模板一起审核通过才能用。

登录:

image

提交了两项数据。

    /**
     * 移动端用户登录
     * @param map 用来对应数据
     * @return
     */
    @PostMapping("/login")
    public R<String> login(@RequestBody Map map, HttpSession session){
        log.info(map.toString());
        //获取手机号
        String phone=map.get("phone").toString();

        //获取验证码
        String code=map.get("code").toString();

        //从Session中获取保存的验证码
        Object codeInSession =session.getAttribute(phone);

        //进行验证码比对(页面提交的验证码和session中保存的验证码比对)
        if(codeInSession!=null&&codeInSession.equals(code)){
            //如果能比对成功,说明登录成功
            LambdaQueryWrapper<User> queryWrapper=new LambdaQueryWrapper<>();
            queryWrapper.eq(User::getPhone,phone);//根据手机号查对应的值

            User user = userService.getOne(queryWrapper);
            if(user==null){
                //判断当前手机号对应的用户是否为新用户,如果是新用户就自动完成注册
                user=new User();
                user.setPhone(phone);
                user.setStatus(1);
                userService.save(user);
            }
            //存user就好进入移动端界面
            session.setAttribute("user",user.getId());
            //不知道为啥传入不了user
            return R.success("登陆成功");
        }
        return R.error("登录失败");
    }

标签:code,短信,手机号,form,验证码,phone,user,06,id
From: https://www.cnblogs.com/rose24/p/17519709.html

相关文章

  • [ABC306] C/D 题解
    C.Centers 参考算法统计,排序\(\rmSyx\)给你\(3\timesN\)个数,其中\(\rmSyx\)可以保证:\(1\simN\)之间的所有数都出现了\(3\)次,请你将\(1\simN\)之间的数每个出现在第\(2\)个位置的下标进行排序,并从小到大输出原数。用\(\rmmap\)记录数出现的次数,......
  • 算法学习day03链表part01-203、707、206
    packageSecondBrush.LinkedList.LL1;/***203.移除链表元素*删除链表中等于给定值val的所有节点。*自己再次概述一下这个过程:*1.移除元素,要采用设置虚拟节点的方式,因为那样不需要考虑头结点问题*2.设置两个虚拟指向*3.移除元素就是遍历链表,然后碰到目标值......
  • 手机号码归属地
    全国手机号段城市列表-手机号段网(uutool.cn) 最新手机号段归属地数据库(2023年6月版)503112行-曾祥展-博客园(cnblogs.com)......
  • 20230630巴蜀暑期集训测试
    T1BS5656最大值Max期望/实际:\(17/17\)考场没思路,打暴力。将每个数分开看,dp预处理出对于每个数,再某些位置被加最终值得概率。再次dp,合并每个数的信息。T2BS5657染色Paint期望/实际:\(0/0\)部分分没调完。答案有下界,分析可得答案必过一条中轴线,分别处理两个方向......
  • 【leetcode】【206】【反转链表】
    c++第一个方法#include<algorithm>#include<iostream>#include<memory>#include<vector>//Definitionforsingly-linkedlist.structListNode{intval;ListNode*next;ListNode():val(0),next(nullptr){}Li......
  • day06 6.1 Java基础
    day066.1Java基础【一】Python和Java中的字节与字符串的关系【1】Java中字节数组与字符串之间的转换关系字节数组的创建方式一importjava.lang.reflect.Array;importjava.util.Arrays;publicclassDemo01{publicstaticvoidmain(String[]args){//......
  • 【JUC进阶】06. 轻量级锁
    目录1、前言2、轻量级锁2.1、什么是轻量级锁2.2、工作原理2.2.1、回顾MarkWord2.2.2、工作流程2.3、解锁3、适用场景4、注意事项5、轻量级锁与偏向锁的对比6、小结1、前言前面一节我们讲到了偏向锁。当偏向锁被撤销,或其他线程竞争的时候,偏向锁会撤销并且升级为轻量级锁。轻量级锁(L......
  • 【算法题】2706. 购买两块巧克力
    题目:给你一个整数数组prices,它表示一个商店里若干巧克力的价格。同时给你一个整数money,表示你一开始拥有的钱数。你必须购买恰好两块巧克力,而且剩余的钱数必须是非负数。同时你想最小化购买两块巧克力的总花费。请你返回在购买两块巧克力后,最多能剩下多少钱。如果购买任意......
  • 前端Vue自定义登录界面切换tabs 账号登录验证码登录模版 支持手机号校验邮箱校验验证
    前端Vue自定义登录界面切换tabs账号登录验证码登录模版支持手机号校验邮箱校验、验证码发送, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13298效果图如下:cc-loginTabs使用方法<!--selIndex:选中序列 tabs-arr:tabs数组 @tabClic......
  • 数据结构和算法-2023.06.30
    动态链表的生成和初衷......