验证码是在许多 Web 应用程序中常见的安全特性,可以确保用户是人类而不是机器人。在前端开发中,我们可以使用 Deno 来生成验证码,该过程还可以让我们学习如何使用 Deno 中的一些库。
Step 1:了解 Deno
Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境,它放弃了 Node.js 中广泛使用的 npm 包管理器。Deno 自带了一些内置的标准库,这些标准库可以帮助我们轻松地操作文件、网络以及 Deno 本身所需的其它一些操作。
由于 Deno 是在 JavaScript 应用程序之上实现的,因此我们可以使用相同的工具和技术来构建应用程序,只需遵循 Deno 的一些规则即可。
Step 2:了解 CAPTCHA
我们将使用 CAPTCHA 来生成验证码。CAPTCHA 是完全自动公开图灵测试以区分计算机与人类的计算机程序。CAPTCHA 远程与不同应用程序和网站进行通信,以确保访问者是人类而不是机器人。
有许多库可以用于 CAPTCHA 生成,我们将排除用于生成验证码的图像库,而只专注于用 JavaScript 生成 CAPTCHA 的内容。
Step 3:生成随机数和文本
在 JavaScript 中,我们可以使用 Math 对象和其提供的方法来生成随机数。以下是一个简单的函数,我们可以使用它来生成我们的随机验证码数字:
function getRandomNumber() { return Math.floor(Math.random() * 10); }
现在,我们将生成一个由随机数字组成的字符串,该字符串的长度由我们指定的参数 len 决定。对于这个问题,我们可以使用类似下面这个的函数:
function generateString(len) { let result = ''; while (len--) { result += getRandomNumber(); } return result; }
现在,我们就可以使用 generateString 函数来生成我们的验证码文本。
Step 4:使用 Canvas 和 Deno 来生成 CAPTCHA
在 Deno 中,我们可以使用 Deno 的标准库以及第三方库来处理验证码。在本例中,我们将使用第三方库 canvas
来生成验证码。
在你的 Deno 应用程序项目目录下安装 canvas
库:
deno install --allow-read --allow-write --allow-env --allow-net --unstable https://deno.land/x/canvas/install.ts
现在,我们已经可以引入 canvas,并开始使用它来创建 CAPTCHA 图像:
-- -------------------- ---- ------- ------ - ------------ - ---- --------- ----- ------ - ----------------- ----- ----- --- - ------------------------ -- ------ ------------- - --------- ---- ------ --------------- -- ------------- --------------- -- ------- ----- ----------- - ------------------ -------------------- ----- ----------------- -- ------------ -------- - ----- ---- ------------ ------------- - ------- -- ---- ------------------------- --- ----
现在,我们已经可以生成一个基本的 CAPTCHA 图像了。要将其写入文件并将其发送到浏览器,我们可以使用以下代码:
-- -------------------- ---- ------- -- --------- ----- --- - ------------------ -- ------------- -- ---------- ----- ----------------------------- ----- -- ----------- ----- ------- - --- --------- --------------- ------------ --- ----- -------- - --- ------------- - ------- --- ----- ----------------- - ------- ------- ----- ------------- ---
总结
在这篇文章中,我们学习了如何使用 Deno 中的 canvas
库来生成 CAPTCHA。 我们还学习了如何使用随机数生成器来创建随机数以及如何将文本绘制到 Canvas 上。在将其写入文件和发送到浏览器之前,我们还完成了基本的 CAPTCHA 图像。
这篇文章希望能够指导您在 Deno 中使用 canvas 库创建自己的 CAPTCHA。虽然本文中使用的是 JavaScript,但 Deno 同样支持 TypeScript。如果您想深入学习 Deno 和相应的 TypeScript 语言,则可以访问 Deno 官方网站。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64716a05968c7c53b0f479f3