短信验证码的“心跳”——倒计时按钮的那些事

IOS

2023-10-08 01:57:08

导读

在移动应用中，短信验证码登录已成标配，与传统账号密码登录相比，既简化了用户操作，也提升了账户安全性。然而，短信验证码的发送并非一帆风顺，运营商的资费与恶意访问风险始终是开发者需要考虑的问题。而倒计时按钮，正是开发者在两难中求取平衡的妙招。

短信验证码的由来与优势

短信验证码，顾名思义，就是通过短信渠道发送的一次性验证码，用于验证用户身份。它广泛应用于移动应用、网站注册、支付验证等场景，与传统的账号密码登录方式相比，具有以下优势：

便捷性： 无需记忆密码，直接通过短信接收验证码，即可完成登录或验证。
安全性： 即使密码泄露，也不影响账户安全，因为验证码是一次性的。
低成本： 相对于密码找回、重置等操作，短信验证码的成本相对较低。

倒计时按钮的必要性

然而，短信验证码也并非没有缺点。由于运营商会对短信发送收取费用，因此，为了防止恶意频繁访问，在设计短信验证码发送接口时，必须加入限制逻辑。最常见的限制手段就是倒计时按钮：

当用户点击发送验证码按钮时，按钮会进入倒计时状态，在倒计时期间无法再次点击。
倒计时结束后，按钮恢复可用状态，用户可以再次点击发送验证码。

倒计时按钮看似简单，却在提升用户体验和防范恶意访问方面发挥着至关重要的作用：

提升用户体验： 用户无需时刻关注短信验证码的发送状态，倒计时按钮会清晰地提示剩余等待时间，减少用户焦虑。
防范恶意访问： 通过限制验证码发送频率，可以有效防止恶意程序或黑客通过暴力破解等手段获取用户敏感信息。

倒计时按钮的技术实现

倒计时按钮的技术实现并不复杂，一般有两种方案：

JavaScript实现： 通过 JavaScript 操作 DOM 元素实现倒计时效果。
后端实现： 在后端代码中记录验证码发送时间，并通过前端定期轮询的方式实现倒计时效果。

方案选择

两种方案各有优缺点：

JavaScript 实现： 简单易用，无需后端配合，但存在跨域问题。
后端实现： 稳定可靠，不存在跨域问题，但需要后端提供支持。

一般来说，如果应用是单页面应用或跨域较少，可以使用 JavaScript 实现。如果应用是多页面应用或跨域较多，则推荐使用后端实现。

具体实现

以下以 JavaScript 实现为例，提供一个简单的倒计时按钮实现方案：

// 发送验证码按钮
const sendButton = document.getElementById('send-button');
// 倒计时元素
const countdown = document.getElementById('countdown');
// 倒计时时间（单位：秒）
const countdownTime = 60;

// 发送验证码
const sendCode = () => {
  // 禁用发送按钮
  sendButton.disabled = true;
  // 显示倒计时
  countdown.style.display = 'block';
  // 开始倒计时
  let time = countdownTime;
  const timer = setInterval(() => {
    time--;
    countdown.innerText = time;
    if (time <= 0) {
      // 倒计时结束
      clearInterval(timer);
      countdown.style.display = 'none';
      sendButton.disabled = false;
    }
  }, 1000);
};

// 点击发送验证码按钮
sendButton.addEventListener('click', sendCode);