验证码适老化实践代码

撰写背景

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

由于这件事，我突然想到，是不是可以规划一个适配白叟的验证码，说干就干！

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

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 = "example@example.com"
receiver = "user@example.com"
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），以增加验证码的对比度。以及，为验证码输入框和验证码图片增加了圆角和暗影作用，使它们看起来更加漂亮。最终是，运用了一个元素，用于显现用户输入的验证码是否正确。

结语

每个人都会随着时刻的消逝，渐渐发现，自己变成了以前看不懂的人。晚年现在面对的问题，便是咱们今后会面对的问题。看着爷爷奶奶们有点羡慕地看着咱们运用手机，是有点心酸的。可是他们在运用手机时，我又会担心他们被欺骗，究竟他们对网络世界的扁平缓歹意还不够了解。

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

打个小广告：滑动验证码免费用