仿洛谷的图形验证码系统

Chinese_good_FaFa · 2024-06-23 23:23:25 · 科技·工程

仿洛谷的图形验证码系统

谷团总负责人 sunny_town 永耀出品。

功能性：★★★☆☆

易用性：★★★★☆

安全性：★★☆☆☆

创新性：★★★☆☆

关于

这是一款验证码系统，目前还不支持 Markdown 的 ![图片描述](图片链接)，但支持 HTML 嵌入，不喜勿喷。

使用

随机位置、文字颜色、背景颜色、干扰项！

每次刷新图片都会变！

普通版

链接：https://piccaptcha.api.gutuan.icu/，目前也提供验证版，其网站名称为 https://piccaptcha.api.gutuan.icu/yanzheng。

趣味版

什么？想要一点趣味？好好好！https://piccaptcha.api.gutuan.icu/qw 就是趣味！（该链接纯娱乐，不信你点开看看）验证版https://piccaptcha.api.gutuan.icu/qw/yanzheng。

当然，为了防止恶意滥用验证码，我在右下角加了一个小小的水印，里面写着 此验证码由sunny_town提供，应该不介意吧？

嵌入到HTML

可通过HTML的 <iframe> 调用。

<iframe> 部分：

<iframe src="https://piccaptcha.api.gutuan.icu/" style="width: 320px; height: 200px; border-width: initial; border-style: none; box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 8px;"></iframe>

检测消息部分：

<div class="message" id="message"></div>

<script>
  window.addEventListener('message', (event) => {
    // 验证消息来源
    if (event.origin === 'https://piccaptcha.api.gutuan.icu') {
      const messageElement = document.getElementById('message');
      const message = event.data;

      if (message === 'ok') {
        // 可以改成其他的
        messageElement.innerText = '恭喜，验证成功！';
        messageElement.style.color = 'green';

      } /*不通过，可删可不删*/else if(message === 'notok') {
        // 可以改成其他的
        messageElement.innerText = '咋啦？记得区分大小写哦~';
        messageElement.style.color = 'red';

      }
    }
  });

</script>

原理

你的网站创建子窗口验证码平台，然后子窗口向父窗口发送消息 ok（通过）或 notok（不通过），父窗口再根据消息内容进行处理。