技术:Java-Web基础|生成图片算法验证码(二)

2023-11-03 15:09:07 浏览数 (3)

1 验证码

1.1 什么是验证码?

我搜索百度,从百度百科中拿出来一段话:

验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Humans Apart”(全自动区分计算机和人类的图灵测试)的缩写,是一种区分用户是计算机还是人的公共全自动程序。可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上用验证码是现在很多网站通行的方式,我们利用比较简易的方式实现了这个功能。这个问题可以由计算机生成并评判,但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题,所以回答出问题的用户就可以被认为是人类。

1.2 验证码的历史

验证码这个词最早是在2002年出现在卡内基梅隆大学。

1.3 验证码的作用

防止恶意破解密码、刷票、论坛灌水、刷页。

1.4 验证码的分类

验证码整体来说分为五类,他们分别是

  • 静态图片内容验证码:一般都是输入一些随机码,形式上还可以有计算
  • Gif动画验证码:动态展示一些随机码,形式上还可以有计算
  • 手机短信验证码:发送短信随机验证码
  • 手机语音验证码:语音验证码,也可以让你读出一些随机码或计算结果
  • 视频验证码:点击视频中的一些随机码,计算结果

了解了验证码之后,我们开始手工实现一些验证码,当然你也可以使用一些已经封装好的工具来实现这个功能,例如Hutool、Google、Baidu、阿里等大佬们封装好的一些工具类直接实现验证码。

2 实现一个验证码

如果我们想要实现一个验证码,那么就得先要了解下验证码的实现原理以及代码实现。

2.1 验证码的原理

网页之间实现验证码大体上有如下步骤:

1)生成一个随机数

2)将随机数写入图片

3)将图片返回到网页

4)用户获取到图片信息,输入图片内容

5)用户提交内容,服务端验证内容的准确性

整体的流程,使用一张图可能会更形象些,大家可以在这图里面体会下。

这里简单使用“静态图片内容验证码”来作为一个实验例子,来实现我们需要的验证码功能。

2.1 生成一个算法验证码

这里同技术:Java-Web基础|生成图片验证码(一)的逻辑是一样的,这里我就简单的只写这个算法逻辑吧。

生成一个随机码的步骤大体如下:

1)创建一个类RandImagesVerifCode

2)编写一个名叫randomString(String baseString, int length)的方法

3)测试实验

完整的代码如下:

代码语言:javascript复制
package com.liuyc.tooljdk.image;

import java.util.concurrent.ThreadLocalRandom;

/**
 * <p> Picture Verification Code </p>
 *
 * @author Aion.Liu
 * @version v1.0.0
 * @description TODO
 * @since 2022/9/1 22:24
 */
public class RandImagesVerifCode {


    public static void main(String[] args) {
        Map<String, Object> resultMap = RandImagesVerifCode.randomCalculateString();
        System.out.println("需要写入Redis的数据:"   resultMap.get("result"));
        // System.out.println("需要展示到页面的数据:"   resultMap.get("checkCode"));

        // 参考上一个章节的内容
        String base642 = RandImagesVerifCode.produceImage(resultMap.get("checkCode").toString());
        System.out.println("需要回显到页面的数据:"   base642);

    }

    /**
     * 获取100以内计算格式的验证码
     *
     * @return
     */
    public static Map<String, Object> randomCalculateString() {
        Random random = new Random();
        int intTemp;
        int intFirst = random.nextInt(100);
        int intSec = random.nextInt(100);
        String checkCode = "";
        int result = 0;
        switch (random.nextInt(6)) {
            case 0:
                if (intFirst < intSec) {
                    intTemp = intFirst;
                    intFirst = intSec;
                    intSec = intTemp;
                }
                checkCode = intFirst   "-"   intSec   "=?";
                result = intFirst - intSec;
                break;
            case 1:
                if (intFirst < intSec) {
                    intTemp = intFirst;
                    intFirst = intSec;
                    intSec = intTemp;
                }
                checkCode = intFirst   "-? ="   (intFirst - intSec);
                result = intSec;
                break;
            case 2:
                if (intFirst < intSec) {
                    intTemp = intFirst;
                    intFirst = intSec;
                    intSec = intTemp;
                }
                checkCode = "?-"   intSec   "="   (intFirst - intSec);
                result = intFirst;
                break;
            case 3:
                checkCode = intFirst   " "   intSec   "=?";
                result = intFirst   intSec;
                break;
            case 4:
                checkCode = intFirst   " ?="   (intFirst   intSec);
                result = intSec;
                break;
            case 5:
                checkCode = "? "   intSec   "="   (intFirst   intSec);
                result = intFirst;
                break;
        }
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("checkCode", checkCode);
        resultMap.put("result", result);
        return resultMap;
    }

}

分步骤解析:

1、public static Map, Object> randomCalculateString()

这里是随机生成100以内的加减法,至于获取的结果是算术方式还是结果,我们随机,当然,你也可以按照自己的方式来优化修改这个方法,让它来拥有你想要的计算方式。参数的用途已经写在了代码中。

2、public static String produceImage(String resultCode) throws IOException

这个步骤比较简单

1)生成一张图片,将验证码写入图片,这里其实是将上述的表达式写入图片,而计算的结果写入redis,用于后期校验

2)将图片写入到流中并返回

执行后的结果如下:

需要写入Redis的数据:94

需要回显到页面的数据(图片转码后):

代码语言:javascript复制
data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAyAMMDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4 Tl5ufo6erx8vP09fb3 Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3 Pn6/9oADAMBAAIRAxEAPwD3p5XW5iiELMjqxaQdExjGfrn9PyWWaOAKZGC7mCL7knAFMe2We2kgucTI5bIIxwTkDj0GOfbNfPni/VPG1xe L5r281/RNO0nc lXELTW9tIFmjhCMwQtK0i4ZTvwG3HhWJAB9Eh1YsFYEqcMAehxnB/Aj86jUTblO/Chm3B1BYjPGCDgD8CcYzzXnXwR8Tan4o8E3FzqpWS4t7xrcTqgXzFEaEZA4yAQOABgDqcmvR/MQ7cHdliuVGRkZznHTofx4oAPNTzvKz8 3cAR1HTj1/pkeoqOe6jgiEpw0e/azh1ATnBJJI6Hj19q57xp4kvPDn/CPfY44H/tLW7bT5vOUnbHJu3FcEYbgYJyPaunUtltwAGflwc5GO/pzmgBaaN/mNnb5eBj1zzn n61znjjWjofgPV9Y8 WxuLa2doH2hysxG2MEDcCC7KOcjnJxjI8K1vxL8bND0OLWdYvWsrEshRpUs0cs3IXy8bycZJUjIwcjg4APpqmuxXbhGbJwcY49 TWJ4MXVv8AhENMl125luNVngWa5aWEQsrON2woOFKghTwMlSSASa0dS1bTdGt1uNU1C0sYGcIsl1MsSlsE4BYgZwCcexoAuUzy187zcvu27cbztx9OmffrWBJ438GyoUfxVoZB/wCojF/8VWlaatY6zZm40bULS iWVUaS1mSVQcqWBIJGdpzjryKALrq7PGUk2qrZcbc7xgjHtyQfwo2v527zPk24KEd/UH/PbpznO1868NLYeHI9NbUC4AOou6xKvc4QEsewHHXOeMHy/wCBXjDX/GFx4in17UpLx4EtUiBRUVATMThVAGTxk4ycD0FAHslNCYlZ9zcqBtzwMZ5Hvz gpsasCzuqeYSRlR1UE7f0P5k15N8bfHGseENBtLLTW z3esNKHuUlLNbogQER8DBbcPm/h bHJBAB6q9wiwxC5zC8wC7QTwxwNoYd f0J7U/a4u9w3FGTBy3CkHjA9TuPP yK8S8G IvEnhb4tXXw91DWJdfhlw8d3esweN/IExwSzHaQNuMnBww7hvant2MYiEjsjOWcmRgwBycKRgjBwPpQBYorzv4ua74v8OeGJ9U8PS6bbWduiG4uJdz3G5pFUCNCpTHPJYnIY4AIBNz4Tapqut/DzTdT1S7 1z3LXDvK4w 7z5Bj0xjgAABQAAMdADsljkSZAr5gEe0qxyQRjBB6njOcnsPepHkCbchjuYKNqk/njoPek3P523y/3e3IcHvnoR/L8enGYreWZ5GjlQBkVd5CkKWIzlSeo6j1GPegCWV41ULJIEDnYMttJJ7A tKsYQ5Bb7oXlieB9e/PXvTZ2jSFzNII48YZi 3GeOvaoIYWtrjBlldHyANoIGAMbm 8TgYBPGAAeeSAW6KKKACvM/i7caBqNvo/hjWPE8ejpeXsc1yoLbpIFDDBwCqguUw0mFG0tzsxXplcN4v F/hrxfrNjqestemeEiIJFNhZk3bhGwwTtyXOVIIDHnAG0A6jStPstF0u0sdJt4YNLt4SI44cnjggjruzliTySTnkk1JqFu99pd1BHNcxfaIDGHgfypY9wILIxHyuAcjPQgdOaswQR20CQRAiNBhQWJwPTJpxfEqptbkE7scDGOPrz hoA8R8f AP7L/4Rf8A4q3xXefavEFpa/6XqXmeTu3fvI/lG2QY4btk16N4c8FyeG7 e8HibxDqxeIxpb6pf bEuSpzjb97K4z6MRit2707Tru4hlvLW3nlSRHhM6BtsibirKD0YbmII561cLqpUMwBY4UE9TjPH4A0AC7igLgBscgHIB tePfFb/iqPiN4M8D7We2kl 33sTnaksQJ4DA7gwSOccY 8OfT2KuY07wXY2Xji/8AGJkuBql/bi3mh81WhVQEAK/IGziJep7mgDoXWG0s324gijRjmNQNg6kgY/HpWB4z0jVNY0OC206w8PX9ys6u8euQNJAAFYFlVckPkjHsWrpAwLlecgA9DjnPf8KbEzvCjSJ5blQWTOdp7jPegDyEeBvGBLA EvhWMHAJ0 XnjqPl/D8K7jwFoupaHoc9tqmn6JYzvdNIsWjRskJTaqhiG/i X8guec10cW IETzBmkkbYDgcckKOBnge/epVBVFUsWIGCxxk /FAC18//sy/8zT/ANun/tavbdW0eDVPLaeW9AiBIS1u5Ldjx03Rsp544Jxx071z2j/DTwf4dvItT0bSrq0ucoA0N7cqSpZTh1MnK5AJVgRxyKAO0r54/aXtdmo Hbz7RO3mxTxeSz5jTYUO5V7Md Ce4VfSvoVU2sWLMxPqe2SenTv/ACzWT4n8MaX4u0ObSNXg823k5Vl4eJx0dD2YZP5kEEEggHhuoWr3n7WiRR3EsDLPDKXifaSEtFcrn0YKVI7gkd6 iW3FTtIDY4JGQD9K4/wR8NdA8BNdPpcc01xcABru6dXlC/3BhQFXIB45J6/dGOsecRyrGySfNjDKhYfiR0/HHX64AOC Nsg/4VNrseG3bbds7TjH2iPv0z7Uz4JzMvwl0NTBLtDTKHGCDmeTnAOcA8Hjv6ZNdN4h8K6L4mxb6xFe3EUqBDAl5cRwsFO4bkRwmc85YZ4HoKZ4b8HeHfCMskOhwy2nmKXa3 2zSIc4Bfy3crn5QN2M8YzQB0Lbgp2gFscAnAJqNZ1yVk Rl2hsghcnoAxAB544qQsqlQWALHABPU9f6GopbcSyKxY7cFXQ8q64PGOnUjn2xQBNRUZMonUBQ0TDBI4Kn1PqD nvniSgAooooAad/mrjb5e07vXPGMe3X9KSVPNiePeyblK7kOCM9wfWiOTfu RlKsVIYdfceo/z1yKSVGKs8Sx eEYRs44BPY98ZAz9KAFYyCRAqIYznexYgj0wMc/mKfRRQAVGzRPJ5LgFsBwrDrg9R9Dj6ceop0e/y18zbvwN23pnvinUAMSVJGkVTkxttYY6HAP8iKasYgjAiDbUU4jUjnvgZ6egGQOfycRtk8xpSFwF2HG3OevTOe3WhQsQCmQksxxuPJJycD6c/gKAHKwdAwzgjIyCD R6VGrNGyo5Zy7NhwvA5yAfw4z7epFLLIYgrFR5eT5jlgAigE5/MAfjT1VUGFUKMk4AxyTk0ARLdIyBmV48vsw6EYb0z09s9Cehp/lR d5vlr5m3bvxzjrjPpQ0saEhpFBGMgn1OB Z4FBcqx3bVTgBi3JJOMY/L86AGSzOjFUhd2C7h2Dc8gH19jjPr1ISNPInEaLthKfKiIAqEHnn1O4cf7JqVi2V2gEZ bJxgY7evOKdQBXZEiYRwjynlfeWSLIJBBbJAwCRxk057WGS4juGT97H91gSOxHPr1PXpk tSJv2nzNucnG30zx mKZNHM 0xT WRnIKBgf84/InvggAAPs8aJGksg3Y /uIB7ksckfmaawnjkeRWMqsUAiOBs5wxz34Oce3vUkUSQoVjXClmYjPdiSf1Jp9AEQ8uBgpZsyucbmLZOCcDPQYB46VLRTUkEm7AYbWKncpH5Z6j3oAZIWMHmLBvlVSyRsQDux0z0B5xn3p0sscEZklkWNB1ZzgD8acu4D5iCcnoMcdqWgCBbpGuZIADuQgEgg9QTzgkjp3x7U8SgBjIpiAfaC5Hzc4BGD3J tSVTltofNYqqszK2YcAKxYHJbAzg4xzxx0zigC5RSISyKxUqSMlTjI9uKKAFooooAKKKKACiiigApGVXGGUEZBwR3HIoooAHRXRkdQysMFSMgiloooAY0Ub798atvXa2RncOeD6jk/nTmVWGGAIyDyO45FFFDDoLRRRQAUUUUAFFFFABRRRQAUUUUAFJtAYtgbiME45x/kmiigBaKKKAP/2Q==

我们可以使用任意编写一个Html,然后将返回的数据写入img标签的src中,

代码语言:javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAyAMMDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4 Tl5ufo6erx8vP09fb3 Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3 Pn6/9oADAMBAAIRAxEAPwD3p5XW5iiELMjqxaQdExjGfrn9PyWWaOAKZGC7mCL7knAFMe2We2kgucTI5bIIxwTkDj0GOfbNfPni/VPG1xe L5r281/RNO0nc lXELTW9tIFmjhCMwQtK0i4ZTvwG3HhWJAB9Eh1YsFYEqcMAehxnB/Aj86jUTblO/Chm3B1BYjPGCDgD8CcYzzXnXwR8Tan4o8E3FzqpWS4t7xrcTqgXzFEaEZA4yAQOABgDqcmvR/MQ7cHdliuVGRkZznHTofx4oAPNTzvKz8 3cAR1HTj1/pkeoqOe6jgiEpw0e/azh1ATnBJJI6Hj19q57xp4kvPDn/CPfY44H/tLW7bT5vOUnbHJu3FcEYbgYJyPaunUtltwAGflwc5GO/pzmgBaaN/mNnb5eBj1zzn n61znjjWjofgPV9Y8 WxuLa2doH2hysxG2MEDcCC7KOcjnJxjI8K1vxL8bND0OLWdYvWsrEshRpUs0cs3IXy8bycZJUjIwcjg4APpqmuxXbhGbJwcY49 TWJ4MXVv8AhENMl125luNVngWa5aWEQsrON2woOFKghTwMlSSASa0dS1bTdGt1uNU1C0sYGcIsl1MsSlsE4BYgZwCcexoAuUzy187zcvu27cbztx9OmffrWBJ438GyoUfxVoZB/wCojF/8VWlaatY6zZm40bULS iWVUaS1mSVQcqWBIJGdpzjryKALrq7PGUk2qrZcbc7xgjHtyQfwo2v527zPk24KEd/UH/PbpznO1868NLYeHI9NbUC4AOou6xKvc4QEsewHHXOeMHy/wCBXjDX/GFx4in17UpLx4EtUiBRUVATMThVAGTxk4ycD0FAHslNCYlZ9zcqBtzwMZ5Hvz gpsasCzuqeYSRlR1UE7f0P5k15N8bfHGseENBtLLTW z3esNKHuUlLNbogQER8DBbcPm/h bHJBAB6q9wiwxC5zC8wC7QTwxwNoYd f0J7U/a4u9w3FGTBy3CkHjA9TuPP yK8S8G IvEnhb4tXXw91DWJdfhlw8d3esweN/IExwSzHaQNuMnBww7hvant2MYiEjsjOWcmRgwBycKRgjBwPpQBYorzv4ua74v8OeGJ9U8PS6bbWduiG4uJdz3G5pFUCNCpTHPJYnIY4AIBNz4Tapqut/DzTdT1S7 1z3LXDvK4w 7z5Bj0xjgAABQAAMdADsljkSZAr5gEe0qxyQRjBB6njOcnsPepHkCbchjuYKNqk/njoPek3P523y/3e3IcHvnoR/L8enGYreWZ5GjlQBkVd5CkKWIzlSeo6j1GPegCWV41ULJIEDnYMttJJ7A tKsYQ5Bb7oXlieB9e/PXvTZ2jSFzNII48YZi 3GeOvaoIYWtrjBlldHyANoIGAMbm 8TgYBPGAAeeSAW6KKKACvM/i7caBqNvo/hjWPE8ejpeXsc1yoLbpIFDDBwCqguUw0mFG0tzsxXplcN4v F/hrxfrNjqestemeEiIJFNhZk3bhGwwTtyXOVIIDHnAG0A6jStPstF0u0sdJt4YNLt4SI44cnjggjruzliTySTnkk1JqFu99pd1BHNcxfaIDGHgfypY9wILIxHyuAcjPQgdOaswQR20CQRAiNBhQWJwPTJpxfEqptbkE7scDGOPrz hoA8R8f AP7L/4Rf8A4q3xXefavEFpa/6XqXmeTu3fvI/lG2QY4btk16N4c8FyeG7 e8HibxDqxeIxpb6pf bEuSpzjb97K4z6MRit2707Tru4hlvLW3nlSRHhM6BtsibirKD0YbmII561cLqpUMwBY4UE9TjPH4A0AC7igLgBscgHIB tePfFb/iqPiN4M8D7We2kl 33sTnaksQJ4DA7gwSOccY 8OfT2KuY07wXY2Xji/8AGJkuBql/bi3mh81WhVQEAK/IGziJep7mgDoXWG0s324gijRjmNQNg6kgY/HpWB4z0jVNY0OC206w8PX9ys6u8euQNJAAFYFlVckPkjHsWrpAwLlecgA9DjnPf8KbEzvCjSJ5blQWTOdp7jPegDyEeBvGBLA EvhWMHAJ0 XnjqPl/D8K7jwFoupaHoc9tqmn6JYzvdNIsWjRskJTaqhiG/i X8guec10cW IETzBmkkbYDgcckKOBnge/epVBVFUsWIGCxxk /FAC18//sy/8zT/ANun/tavbdW0eDVPLaeW9AiBIS1u5Ldjx03Rsp544Jxx071z2j/DTwf4dvItT0bSrq0ucoA0N7cqSpZTh1MnK5AJVgRxyKAO0r54/aXtdmo Hbz7RO3mxTxeSz5jTYUO5V7Md Ce4VfSvoVU2sWLMxPqe2SenTv/ACzWT4n8MaX4u0ObSNXg823k5Vl4eJx0dD2YZP5kEEEggHhuoWr3n7WiRR3EsDLPDKXifaSEtFcrn0YKVI7gkd6 iW3FTtIDY4JGQD9K4/wR8NdA8BNdPpcc01xcABru6dXlC/3BhQFXIB45J6/dGOsecRyrGySfNjDKhYfiR0/HHX64AOC Nsg/4VNrseG3bbds7TjH2iPv0z7Uz4JzMvwl0NTBLtDTKHGCDmeTnAOcA8Hjv6ZNdN4h8K6L4mxb6xFe3EUqBDAl5cRwsFO4bkRwmc85YZ4HoKZ4b8HeHfCMskOhwy2nmKXa3 2zSIc4Bfy3crn5QN2M8YzQB0Lbgp2gFscAnAJqNZ1yVk Rl2hsghcnoAxAB544qQsqlQWALHABPU9f6GopbcSyKxY7cFXQ8q64PGOnUjn2xQBNRUZMonUBQ0TDBI4Kn1PqD nvniSgAooooAad/mrjb5e07vXPGMe3X9KSVPNiePeyblK7kOCM9wfWiOTfu RlKsVIYdfceo/z1yKSVGKs8Sx eEYRs44BPY98ZAz9KAFYyCRAqIYznexYgj0wMc/mKfRRQAVGzRPJ5LgFsBwrDrg9R9Dj6ceop0e/y18zbvwN23pnvinUAMSVJGkVTkxttYY6HAP8iKasYgjAiDbUU4jUjnvgZ6egGQOfycRtk8xpSFwF2HG3OevTOe3WhQsQCmQksxxuPJJycD6c/gKAHKwdAwzgjIyCD R6VGrNGyo5Zy7NhwvA5yAfw4z7epFLLIYgrFR5eT5jlgAigE5/MAfjT1VUGFUKMk4AxyTk0ARLdIyBmV48vsw6EYb0z09s9Cehp/lR d5vlr5m3bvxzjrjPpQ0saEhpFBGMgn1OB Z4FBcqx3bVTgBi3JJOMY/L86AGSzOjFUhd2C7h2Dc8gH19jjPr1ISNPInEaLthKfKiIAqEHnn1O4cf7JqVi2V2gEZ bJxgY7evOKdQBXZEiYRwjynlfeWSLIJBBbJAwCRxk057WGS4juGT97H91gSOxHPr1PXpk tSJv2nzNucnG30zx mKZNHM 0xT WRnIKBgf84/InvggAAPs8aJGksg3Y /uIB7ksckfmaawnjkeRWMqsUAiOBs5wxz34Oce3vUkUSQoVjXClmYjPdiSf1Jp9AEQ8uBgpZsyucbmLZOCcDPQYB46VLRTUkEm7AYbWKncpH5Z6j3oAZIWMHmLBvlVSyRsQDux0z0B5xn3p0sscEZklkWNB1ZzgD8acu4D5iCcnoMcdqWgCBbpGuZIADuQgEgg9QTzgkjp3x7U8SgBjIpiAfaC5Hzc4BGD3J tSVTltofNYqqszK2YcAKxYHJbAzg4xzxx0zigC5RSISyKxUqSMlTjI9uKKAFooooAKKKKACiiigApGVXGGUEZBwR3HIoooAHRXRkdQysMFSMgiloooAY0Ub798atvXa2RncOeD6jk/nTmVWGGAIyDyO45FFFDDoLRRRQAUUUUAFFFFABRRRQAUUUUAFJtAYtgbiME45x/kmiigBaKKKAP/2Q==" />

</body>
</html>

打开网页后调试下结果如下结果。

现在,我们便完成了网页验证码的开发以及回显示到网页中啦。


我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

0 人点赞