验证码适老化实践代码

撰写背景

最近在和奶奶视频的时候，在引导她注册抖音，让她有时间看看外面更加精彩的世界，而不是围绕着我们的一日三餐，但是注册的时候，要让她滑动滑块验证码去得到短信验证码（要我说，这真的很无语，直接发送手机验证码不行吗？），但是她的手指没有那么灵活，老是滑不到合适位置，我只能说等我五一回去再给注册了。

因为这件事，我突然想到，是不是可以设计一个适配老人的验证码，说干就干！

当然，我也只是简单的从几个方面去做适配，而不会太深入，毕竟只是个小菜鸟啦。

ok，我们开始吧。

我们可以从哪几个方面去做适配？

老人的认知和技术水平不同，会导致他们在使用最新的APP的时候，会碰到不会使用、看不清图片、触摸不灵敏等问题，因此，我们可以从几个方面去做优化：

1.使用简单的验证码： 这是最基础的一步。对于老年人来说，图形、语音或文字验证码都可能很难理解。所以，我们在设计验证码的时候，需要尽量使用简单的、易于识别的验证码，这样他们就能更容易地完成验证过程。举个例子，使用简单的数学问题或选择题等（可能即使这样，对于老人来说，也是过于困难了，因为他们可能理解不了。）相反的例子就是12306那种，各种奇葩问题和图形，完全是隔绝了老人使用的可能性。

2.增加可访问性选项： 老年人的问题可能是多种多样的，比如眼神不好，或者听力不行，因此，我们如果能为老年人提供可访问性选项，如语音验证码或通过邮件或短信收到验证码等，那么久可以使他们更容易地完成验证过程。

3.增加反馈机制： 这个是很必要的。如果我们在设计验证码的时候，为老年人提供明确的反馈，告诉他们他们是否已经正确地输入验证码，那么可以帮助他们避免犯错和挫败感（老是输错，可能也是不行的，哎）。

4.优化验证码设计： 这个是上面所有方案的基础。对于老年人来说，使用明亮的颜色、更大的字体、更清晰的字体等设计元素可以使验证码更容易识别和使用。这样，才能让上面所有的建议都变得可行。

具体代码示例

列举完之后，我们就来看看具体代码吧。

1. 使用简单的代码

a. 数学问题验证码示例：

var a = Math.floor(Math.random() * 10);
var b = Math.floor(Math.random() * 10);
var answer = a + b;
var userAnswer = prompt("What is " + a + " + " + b + "?");
if (userAnswer == answer) {
  alert("You are human!");
} else {
  alert("Wrong answer.");
}

b. 选择题验证码示例：

<div class="captcha">
  <p>What color is a banana?</p>
  <label><input type="radio" name="captcha" value="yellow">Yellow</label>
  <label><input type="radio" name="captcha" value="red">Red</label>
  <label><input type="radio" name="captcha" value="blue">Blue</label>
</div>

<style>
  .captcha p {
    font-size: 20px;
    font-weight: bold;
  }
  .captcha label {
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
  }
</style>

如果有其他合适的，也可以补充~

2. 增加可访问性选项

a. 语音验证码示例

// 生成随机数字验证码
$code = rand(1000, 9999);

// 使用文字转语音API生成语音验证码
$text = "Your verification code is $code";
$url = "https://texttospeech.googleapis.com/v1/text:synthesize?key=YOUR_API_KEY";
$data = [
  "input" => [
    "text" => $text,
  ],
  "voice" => [
    "languageCode" => "en-US",
    "ssmlGender" => "FEMALE",
  ],
  "audioConfig" => [
    "audioEncoding" => "MP3",
  ],
];
$options = [
  "http" => [
    "header" => "Content-type: application/json",
    "method" => "POST",
    "content" => json_encode($data),
  ],
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
$file = fopen("captcha.mp3", "w");
fwrite($file, $result);
fclose($file);

// 播放语音验证码
echo '<audio src="captcha.mp3" autoplay></audio>';

b. 邮件验证码示例

import random
import smtplib
from email.mime.text import MIMEText

# 生成随机数字验证码
code = str(random.randint(1000, 9999))

# 发送邮件验证码
sender = "[e-mail]"
receiver = "[e-mail]"
message = MIMEText("Your verification code is " + code)
message["From"] = sender
message["To"] = receiver
message["Subject"] = "Verification code"
smtp = smtplib.SMTP("smtp.example.com")
smtp.login(sender, "password")
smtp.sendmail(sender, receiver, message.as_string())
smtp.quit()

其实这块用的比较少，因为实际上，老人不一定会使用邮件（除了那些还没退休的哈哈哈）
3. 增加反馈机制

<label for="captcha">验证码：</label>
<input type="text" name="captcha" id="captcha" required>
<span id="captcha-feedback"></span>

<script>
document.getElementById("captcha").addEventListener("input", function() {
  var feedback = document.getElementById("captcha-feedback");
  if (this.value == "1234") {
    feedback.textContent = "验证码正确";
    feedback.style.color = "green";
  } else {
    feedback.textContent = "验证码错误";
    feedback.style.color = "red";
  }
});
</script>

上面的代码还是很基础的，实际运用过程中，可能还需要在用户输入错误的验证码后，提供更具体的错误提示，帮助他们找到错误的原因。当然，针对老人，我们害可以考虑为验证码增加声音或震动效果，提供更加直观的反馈。（这个可能更加重要，下次有机会补充一下代码）。

4. 使用更明亮、更大的字体等

<label for="captcha">验证码：</label>
<input type="text" name="captcha" id="captcha" required>
<img src="captcha.php" alt="验证码" id="captcha-image">
<button type="button" id="captcha-refresh">刷新</button>
<span id="captcha-feedback"></span>

<style>
#captcha {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #333;
  background-color: #eee;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
}

#captcha-image {
  display: block;
  margin: 16px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

#captcha-refresh {
  background-color: #fff;
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  margin-left: 8px;
}

#captcha-feedback {
  font-size: 14px;
  font-weight: bold;
  margin-top: 8px;
  display: block;
}
</style>

<script>
var captchaImage = document.getElementById("captcha-image");
var captchaRefresh = document.getElementById("captcha-refresh");
var captchaFeedback = document.getElementById("captcha-feedback");

// 为刷新按钮添加点击事件，重新加载验证码图片
captchaRefresh.addEventListener("click", function() {
  captchaImage.src = "captcha.php?" + new Date().getTime();
});

// 为验证码输入框添加输入事件，检查用户输入的验证码是否正确
document.getElementById("captcha").addEventListener("input", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "check_captcha.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      if (this.responseText == "1") {
        captchaFeedback.textContent = "验证码正确";
        captchaFeedback.style.color = "green";
      } else {
        captchaFeedback.textContent = "验证码错误";
        captchaFeedback.style.color = "red";
      }
    }
  };
  xhr.send("captcha=" + this.value);
});
</script>

可以看到，我们是使用了24像素的字体大小、加粗的字体、以及更大的字母间距，使验证码更易于识别。颜色的话，使用了明亮的背景色（#eee）和暗色的字体颜色（#333），以增加验证码的对比度。以及，为验证码输入框和验证码图片添加了圆角和阴影效果，使它们看起来更加美观。最后是，使用了一个<span>元素，用于显示用户输入的验证码是否正确。

结语

每个人都会随着时间的流逝，慢慢发现，自己变成了以前看不懂的人。老年现在面临的问题，就是我们以后会面临的问题。看着爷爷奶奶们有点羡慕地看着我们使用手机，是有点心酸的。但是他们在使用手机时，我又会担心他们被欺骗，毕竟他们对网络世界的扁平和恶意还不够了解。

验证码能够阻挡一些来自网络的恶意，但是自己本身却也带着一些让他们不适应的元素，所以希望社会企业家们能够在这一方面花点精力，虽然可能不能带来很大的收益，但总归是积少成多，集腋成裘。

免费的验证码：注册体验