关于javascript:行为验证码验证类型的讲解

57次阅读

共计 5400 个字符，预计需要花费 14 分钟才能阅读完成。

前言

最近在开发行为验证码，常常涉及到对于验证类型的相干内容。但应用起来不太纯熟，空闲之余，总结一下我对行为验证码验证类型的了解。

验证类型概述

滑动拼图

翻新行为式验证，轻松一滑实现拼图，体验极佳，秒速通过验证。简洁高效，在保障用户极致体验的同时，抵挡机器危险。实用于谋求用户体验的场景。

# 生成背景图
  basemap1 = Image.open(bg).convert("RGBA")  # 背景图
  if basemap1.size != size:  # 须要裁切或拉伸
      basemap1 = Graphics.crop(basemap1, size[0], size[1])
  puzzle1 = Image.open(url_absolute(img)).convert("RGBA")  # 方块图，蒙板
  # 旋转角度
  if rotate == 2:
      angle = randint(0, 360)
  elif rotate == 1:
      angle = choice([0, 90, 180, 270])
  else:
      angle = 0
  # angle = 45
  if angle: puzzle1 = puzzle1.rotate(angle, resample=Image.Resampling.BILINEAR)
 
  puzzle1.putalpha(ImageEnhance.Brightness(puzzle1.split()[3]).enhance(alpha))  # 设置透明度，0- 1 之间
  # 产生随机地位
  img_size = puzzle1.size  # 滑动图片尺寸
  spacing = 0  # 滑动图片在底图地位周围间距，临时应用 0，小图片中的图案自身有 20px 边距
  # 随机地位
  x = randint(img_size[0] + spacing, size[0] - img_size[0] - spacing)
  y = randint(spacing, size[1] - img_size[1] - spacing)
  basemap1.paste(puzzle1, (x, y), puzzle1)  # 拷贝
 
  # 方块滑动图
  # basemap2 = Image.open(url_absolute(bg)).convert("RGBA")
  basemap2 = Image.open(bg).convert("RGBA")
  if basemap2.size != size:  # 须要裁切或拉伸
      basemap2 = Graphics.crop(basemap2, size[0], size[1])
  puzzle2 = Image.open(url_absolute(img)).convert("RGBA")
  if angle: puzzle2 = puzzle2.rotate(angle, resample=Image.Resampling.BILINEAR)  # 旋转
 
  basemap2 = basemap2.crop((x, y, x + img_size[0], y + img_size[1]))  # 裁切
  puzzle2.paste(basemap2, (0, 0), puzzle2)
  # 替换成长条形滑动块
  strip = Image.new('RGBA', (img_size[0], size[1]), (255, 255, 255, 0))
  strip.paste(puzzle2, (0, y), puzzle2)  # 拷贝

文字点选

程序点击图中文字，全新行为验证，安全性极高，保障验证平安。进步机器辨认难度的同时，保障实在用户可读。实用于平安要求较高的业务场景。

def random_character(self, length=None, type=[0, 1, 2, 3], repeat=False):
  """
  生成随机字符
  :param length: 生成的字符长度，几个字符
  :param type: [0] 数字，[1] 大写字母，[2] 小写字母，[3] 特殊字符
  :param repeat: 是否容许反复字符
  :return [("A", 1, "大写字母"), ("8", 0, "数字"), ("a", 2, "小写字母"), ("", 3," 高跟鞋 ") ...]"""
  if length is None: length = self.str_count
  # length = 10
  # type = [0]
  string = "".join(dict([(key, {
      0: "2345678923456789",
      1: "ABCDEFGHJKLMNQRTY",
      2: "abcdefghijkmnqrty",
      3: "",
  }[key]) for key in type]).values())
 
  r = []
  for i in range(length):
      if repeat:  # 容许反复
          s = choice(string)
          t = Inference.char_type(s)
          r.append((s, t[0], t[1]))
      else:
          anti = 0  # 避免死循环，尝试肯定次数后容许字符反复
          while True:
              anti += 1
              s = choice(string)
              t = Inference.char_type(s)
              st = "".join([it[0] for it in r])
              if s not in st or anti > 30:
                  r.append((s, t[0], t[1]))
                  break
  # 替换 n 个字母为图形字符
  if 3 in type:
      index = sample([i for i in range(length)], randint(0, length))  # 随机一组索引值：[0, 3, 1]
      icon_char = sample(self.icon_str, len(index))  # 随机取出 n 组特殊字符
      x = 0
      for i in index:
          # r = Inference.char_replace(r, i, icon_char[x][1])
          r[i] = (icon_char[x][1], 3, icon_char[x][2])
          x += 1
  return r

语序点选

依据中文语义，按程序顺次点击图中文字，语义理解能力联合行为轨迹。实用于平安要求较高的业务场景。

上面举例说说的烦扰点与烦扰线的制作：

# 噪线
  for i in range(line_count):
      x1 = randint(0, size[0])
      x2 = randint(0, size[0])
      y1 = randint(0, size[1])
      y2 = randint(0, size[1])
      draw.line((x1, y1, x2, y2), fill=Word.get_random_color())
 
  # 噪点
  for i in range(point_count):
      draw.point([randint(0, size[0]), randint(0, size[1])], fill=Word.get_random_color())
      x = randint(0, size[0])
      y = randint(0, size[1])
      draw.arc((x, y, x + 4, y + 4), 0, 90, fill=Word.get_random_color())

字体辨认

点击与其它字符不同字体的文字，用户仅需一次点击，即可进行平安验证。实用于平安要求超高的业务场景。

# 字体辨认
if type in (10, 11, 12):  # 789 生成成语 / 固定字符
    str_count = 1
    str_inter = numeric(str_inter, 2, 20)  # 烦扰字符不能少于 2
    v_font = sample(ttf, 2)  # 随机选出两种字体
 
string = []
for i in range(str_count + str_inter):
 
    if type in (10, 11, 12):  # 字体辨认，只应用两种字体
        font_file = v_font[0] if i == 0 else v_font[1]
    else:  # 随机字体
        font_file = choice(ttf)
 
    font = ImageFont.truetype(url_absolute(font_file), size=font_size)
 
    # 成语 / 应用固定字符，前 n 个字符应用成语字符
    random_char = idiom[i:i+1] if idiom else ""
 
    # 随机字符串及补充固定字符时追加烦扰字符
    if random_char == "":
        head = randint(0xb0, 0xf7)
        body = randint(0xa1, 0xfe)
        random_char = bytes.fromhex(f'{head:x} {body:x}').decode("gb18030")
 
    # print(random_char, font_file)
 
    # 随机地位
    anti = 0  # 避免字体设置过大或者图片设置过小，导致死循环，尝试肯定次数后容许字符重叠
    while True:  # 避免文字重叠
        anti += 1
        x = randint(0, size[0] - font_size)
        y = randint(0, size[1] - font_size)
        find = True
        for s in string:
            if abs(x - s[1]) < font_size and abs(y - s[2]) < font_size:
                find = False
                break
        if find or not string or anti > 20: break
 
    # 创立文字图片，可旋转
    str_bg = Image.new("RGBA", (font_size, font_size), (255, 255, 255, 0))  # 文字用空白图层
    str_draw = ImageDraw.Draw(str_bg)
    str_draw.text((0, 0), random_char, Word.get_random_color(), font=font)  # 增加文字
    angle = randint(-75, 75) if rotate else 0  # 是否随机角度
    str_bg = str_bg.rotate(angle, resample=Image.Resampling.BILINEAR, expand=0)  # 随机旋转
 
    basemap.paste(str_bg, (x, y), str_bg)  # 图片与文字合并
 
    # 保留随机字符及地位
    string.append([random_char, x, y, -angle])  # 字符、x、y、角度 (正负转换，转用 CSS 顺时针旋转模式)

空间推理

依据提醒，点击对应的元素。逻辑解题能力联合图形符号等元素辨认能力。实用于平安要求超高的业务场景。

上面举例几种验证形式：

def send_color2differ(self):
        """请点击一个色彩不一样的字符"""
        color = self.color_name(2)  # 获取 2 组带中文名称的色彩 [('蓝色', '#0000FF'), ]
        data = []
        for i in range(self.str_count):
            # data/ 在图片上生成的数据
            data.append({"str": self.string[i][0],  # 字符内容
                "X": self.coord[i][0],  # x 地位
                "Y": self.coord[i][1],  # y 地位
                "color": color[0][1] if i == 0 else color[1][1],
                "angle": self.angle[i],
                "icon": True if self.string[i][1] == 3 else False,  # 是否为图形字符
            })
        # hint/ 操作阐明文字
        hint = f'请点击一个 <i> 色彩不一样 </i> 的 <i>{self.string[0][2]}</i>'
        str = [(data[0]["str"], data[0]["X"], data[0]["Y"], data[0]["angle"]), ]
        return {"data": data, "str": str, "hint": hint}
 
def send_color2capital(self):
        """请点击蓝色字母对应的大写"""
        direc = choice([1, 2])  # 随机一种形式，大写 to 小写 / 小写 to 大写
        color = self.color_name()  # 获取 n 组带中文名称的色彩 [('蓝色', '#0000FF'), ]
        self.string = self.random_character(type=[direc])
        data = []
        for i in range(self.str_count):
            # data/ 在图片上生成的数据
            data.append({"str": self.string[i][0],  # 字符内容
                "X": self.coord[i][0],  # x 地位
                "Y": self.coord[i][1],  # y 地位
                "color": color[i][1],
                "angle": self.angle[i],
                "icon": True if self.string[i][1] == 3 else False,  # 是否为图形字符
            })
 
        data[0]["str"] = data[1]["str"].swapcase()
        # hint/ 操作阐明文字
        hint = f'请点击 <i>{color[0][0]} 字母 </i> 对应的 <i>{" 大写 "if direc == 1 else" 小写 "}</i>'
        str = [(data[1]["str"], data[1]["X"], data[1]["Y"], data[1]["angle"]), ]
        return {"data": data, "str": str, "hint": hint}

总结

以上便是本文的全部内容，相干代码我曾经放上 Github 了，https://github.com/KgCaptcha，这里我做了一个示例：https://www.kgcaptcha.com/demo/。

正文完
javascript
发表至： javascript
2023-03-09
 0
前端培训中级阶段2-事件event-事件冒泡捕获-20190620期
关于javascript:面试官说说Event-Loop事件循环微任务宏任务
关于javascript:前端面试每日-31-第554天
关于javascript:React系列九深入理解setState