关于安全:验证码适老化实践代码

撰写背景

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

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

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

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），以减少验证码的对比度。以及，为验证码输入框和验证码图片增加了圆角和暗影成果，使它们看起来更加好看。最初是，应用了一个 <span> 元素，用于显示用户输出的验证码是否正确。

结语

每个人都会随着工夫的流逝，缓缓发现，本人变成了以前看不懂的人。老年当初面临的问题，就是咱们当前会面临的问题。看着爷爷奶奶们有点艳羡地看着咱们应用手机，是有点心酸的。然而他们在应用手机时，我又会放心他们被坑骗，毕竟他们对网络世界的扁平和歹意还不够理解。

验证码可能阻挡一些来自网络的歹意，然而本人自身却也带着一些让他们不适应的元素，所以心愿社会企业家们可能在这一方面花点精力，尽管可能不能带来很大的收益，但总归是千里之行; 始于足下，积少成多。

收费的验证码：注册体验