登陆时短信验证码的原理,实现

登陆时需要发送短信验证码或者其他的验证方式来校验是否是本人操作,达到安全性的目的,
本文主要以个人思考的实现方式做讲解,来看看常用的短信验证码的前台界面的实现:
效果如图:
效果
点击获取验证码时,倒计时,暂时设定倒计时的时间为180秒,
思路:

  1. 当点击【获取验证码】按钮时,发送请求到后台,根据自己的规则生成4位,6位或者8位数字,在用一个标识作为key,将随机数存到session中,我这里是用用户名作为key。
  2. 发送验证码成功之后,前端开始倒计时,当倒计时的时间 = 0时,发送请求到后端,将用户名作为参数传人,从用户名在session查找,得到发送验证码时保存到session中的随机数,然后从session中清除。
  3. 假如在倒计时中,用户已经输入了验证码,此时停止倒计时,将输入的验证码和用户名作为入参,传人后台,从session保存的验证码做比对,校验是否正确,
  4. 假如验证码正确,将倒计时框置为不可用,假如错误,停止倒计时,提示【验证码有误,请重新输入】。
  5. 验证码正确,提交表单是定义一个标识,可以提交表单

    代码实现如下:
    发送验证码:

function getVlidCode(){
   
    var username = $("#username").val();//将用户名作为session存储的key
    if (flagT){
        $.ajax({
            type:"GET",
            async: false,
            data:"username="+username,
            url:projectName+"/userAction/getVerifYCode.do",
            success:function(date){
   
                if (date == 1) {
                    chengeviyfValue();
                }
            }
        });
    }
}

定时器,每1000毫秒执行一次:

function chengeviyfValue
  • 1
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的示例,使用Vue实现阿里云验证码登录的代码: ``` <template> <div> <input type="tel" v-model="phone" placeholder="请输入手机号码"> <button @click="sendCode" :disabled="isSending">{{ buttonText }}</button> <input type="text" v-model="code" placeholder="请输入验证码"> <button @click="login" :disabled="!code || isLoggingIn">登录</button> </div> </template> <script> import { sendVerificationCode, loginWithVerificationCode } from '@/api/auth' export default { data() { return { phone: '', code: '', isSending: false, isLoggingIn: false, countdown: 60, buttonText: '获取验证码' } }, methods: { async sendCode() { if (!this.phone) { return this.$message.error('请输入手机号码') } this.isSending = true try { await sendVerificationCode(this.phone) this.countdown = 60 this.buttonText = `${this.countdown}秒后重新发送` const timer = setInterval(() => { this.countdown-- this.buttonText = `${this.countdown}秒后重新发送` if (this.countdown === 0) { clearInterval(timer) this.isSending = false this.buttonText = '获取验证码' } }, 1000) } catch (err) { this.isSending = false this.$message.error(err.message) } }, async login() { if (!this.code) { return this.$message.error('请输入验证码') } this.isLoggingIn = true try { await loginWithVerificationCode(this.phone, this.code) this.$message.success('登录成功') // 跳转到首页 } catch (err) { this.isLoggingIn = false this.$message.error(err.message) } } } } </script> ``` 在此示例中,我们使用了 `sendVerificationCode` 和 `loginWithVerificationCode` 两个方法来发送验证码和登录。您需要根据您自己的实际情况来实现这些方法,这些方法通常会与您的后端API进行交互。 此外,您需要在阿里云控制台中创建一个模板,并将其与您的应用程序集成。您需要使用阿里云提供的SDK来发送验证码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值