JS实现图片验证码功能——用户输入验证码
 
https://www.jb51.net/article/183736.htm
 
https://www.cnblogs.com/huaji666/p/8257710.html

前言
 
什么是图片验证码？
 先参考一个某宝注册时的form表单（我们在一些网站注册的时候，经常需要填写以下图片的信息）
 
 
为什么要写图片验证码？
 
这种图片验证方式是我们最常见的形式，它可以有效的防范恶意攻击者采用恶意工具，调用“动态验证码短信获取”接口进行动态短信发送, 导致接入用户短信被刷，造成账号余额损失。同时这种动态发送方式会朝许多无关的手机用户，发送很多验证码短信，导致手机用户被骚扰，甚至引起用户投诉。这种恶意攻击究其原因是攻击者可以自动对接口进行大量调用。
 
如果网站在用户进行“动态验证码短信发送” 操作前，要求用户输入图片验证码,确认用户是真实有效后，服务器端再发送动态短信到用户手机上。这一种流程就可以有效的解决恶意攻击问题。
 
正确的加入图片验证码的方式是在短信验证码发送前，先让用户填写图片验证码，再发送短信验证码。
 
思路流程
 
1.H5请求后台获取4位数的验证码；
 
2.后台生成随机数和绘制图片返回给前端，并将随机数存入session中；
 
3.此时H5页面展示验证码图片（每点击一次图片向后台请求一次&#

爬虫--实现图片验证码全自动输入
 
爬取网站：豆瓣（https://accounts.douban.com/login）
 
爬虫思路：1. 使用selenium, 对图片验证码进行截图操作，
 
                  2. 接入打码平台--云打码，传输图片，返回验证码
 
 
 
一. 爬虫代码如下：
 
import time
from selenium import webdriver

from PIL import Image
from io import BytesIO    # 以IO的形式转换为二进制

import YDM_test


class DouBan(object):
    def __init__(self):
        self.url = 'https://accounts.douban.com/login'
        self.headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36'}

    def run(self):
        # 创建chrome对象, 发送get请求
        chrome = webdriver.Chrome('/home/python/Desktop/chromedriver')
        chrome.get(self.url)

        # 获取输入框元素, 输入账号密码
        time.sleep(1)
        chrome.find_element_by_id('email').send_keys('your_count@163.com')
        chrome.find_element_by_id('password').send_keys('your_pwd')

        # 截图打码  --> 重点
        screen_shot = chrome.get_screenshot_as_png()      # 获取全屏截图的对象
        screen_image = Image.open(BytesIO(screen_shot))   # 以IO的形式转换为二进制
        screen_image.save('00_screen_image.png')

        # 对验证码图片区域进行截图，保存
        code_image_el = chrome.find_element_by_id('captcha_image')   # 获取验证码图片对象

        height = code_image_el.size['height']
        width = code_image_el.size['width']

        left = code_image_el.location['x']
        top = code_image_el.location['y']
        right = left + width
        bottom = top + height

        # 验证码图片--区域位置信息
        cut_info = (left, top, right, bottom)
        print(cut_info)

        # 截图操作,保存截图
        cut_image = screen_image.crop(cut_info)
        cut_image.save('00_cut_image.png')

        # 全自动打码--云打码平台
        code = YDM_test.image_decode('00_cut_image.png')

        chrome.find_element_by_id('captcha_field').send_keys(code)

        # 点击登陆
        chrome.find_element_by_name('login').click()

        # 退出浏览器
        time.sleep(3)
        chrome.quit()


if __name__ == '__main__':
    db = DouBan()
    db.run()


 
 
 
二. 云打码SDK接口文件 --> YDM_test.py
 
import http.client, mimetypes, urllib, json, time, requests

######################################################################

class YDMHttp:

    apiurl = 'http://api.yundama.com/api.php'
    username = ''
    password = ''
    appid = ''
    appkey = ''

    def __init__(self, username, password, appid, appkey):
        self.username = username  
        self.password = password
        self.appid = str(appid)
        self.appkey = appkey

    def request(self, fields, files=[]):
        response = self.post_url(self.apiurl, fields, files)
        response = json.loads(response)
        return response
    
    def balance(self):
        data = {'method': 'balance', 'username': self.username, 'password': self.password, 'appid': self.appid, 'appkey': self.appkey}
        response = self.request(data)
        if (response):
            if (response['ret'] and response['ret'] < 0):
                return response['ret']
            else:
                return response['balance']
        else:
            return -9001
    
    def login(self):
        data = {'method': 'login', 'username': self.username, 'password': self.password, 'appid': self.appid, 'appkey': self.appkey}
        response = self.request(data)
        if (response):
            if (response['ret'] and response['ret'] < 0):
                return response['ret']
            else:
                return response['uid']
        else:
            return -9001

    def upload(self, filename, codetype, timeout):
        data = {'method': 'upload', 'username': self.username, 'password': self.password, 'appid': self.appid, 'appkey': self.appkey, 'codetype': str(codetype), 'timeout': str(timeout)}
        file = {'file': filename}
        response = self.request(data, file)
        if (response):
            if (response['ret'] and response['ret'] < 0):
                return response['ret']
            else:
                return response['cid']
        else:
            return -9001

    def result(self, cid):
        data = {'method': 'result', 'username': self.username, 'password': self.password, 'appid': self.appid, 'appkey': self.appkey, 'cid': str(cid)}
        response = self.request(data)
        return response and response['text'] or ''

    def decode(self, filename, codetype, timeout):
        cid = self.upload(filename, codetype, timeout)
        if (cid > 0):
            for i in range(0, timeout):
                result = self.result(cid)
                if (result != ''):
                    return cid, result
                else:
                    time.sleep(1)
            return -3003, ''
        else:
            return cid, ''

    def report(self, cid):
        data = {'method': 'report', 'username': self.username, 'password': self.password, 'appid': self.appid, 'appkey': self.appkey, 'cid': str(cid), 'flag': '0'}
        response = self.request(data)
        if (response):
            return response['ret']
        else:
            return -9001

    def post_url(self, url, fields, files=[]):
        for key in files:
            files[key] = open(files[key], 'rb')
        res = requests.post(url, files=files, data=fields)
        return res.text

######################################################################

# 用户名
username    = '注册的用户账号'

# 密码
password    = '账号密码'

# 软件ＩＤ，开发者分成必要参数。登录开发者后台【我的软件】获得！
appid       = 4999   # 对应的在平台中创建的软件id

# 软件密钥，开发者分成必要参数。登录开发者后台【我的软件】获得！
appkey      = '需要在云打码平台中创建获取'

# 超时时间，秒
timeout     = 30


# 封装调用接口--image_decode()
def image_decode(filename, codetype=3000):
    # 检查
    if (username == 'username'):
        print('请设置好相关参数再测试')
    else:
        # 初始化
        yundama = YDMHttp(username, password, appid, appkey)

        # 登陆云打码
        uid = yundama.login()
        print('uid: %s' % uid)

        # 查询余额
        balance = yundama.balance()
        print('balance: %s' % balance)

        # 开始识别，图片路径，验证码类型ID，超时时间（秒），识别结果
        cid, result = yundama.decode(filename, codetype, timeout)
        print('cid: %s, result: %s' % (cid, result))
        return result

######################################################################

if __name__ == '__main__':
    image_decode('00_cut_image.png')

 
 
 
 ------------------END-------------------------
 
 

登录时候输入验证码，验证码图片从服务器获取方法
 
小验证码图片 源码分享：http://pan.baidu.com/s/1skK7jRJ
 
展示效果：
 
登录时候输入验证码，验证码图片从服务器获取方法 - wangyue.123.com - moonstak
 
 
jsp页面：
 
<%@ page language=“java” import=“java.util.*” pageEncoding=“utf-8”%>
 
 
 验证码: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191206111354505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd5dWUyM2NvbQ==,size_16,color_FFFFFF,t_70) 
 

 ${param.result eq 0 ?"验证码填写错误":"验证码填写正确"} 
java后台代码：
 
public void doPost(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 
//判断类型是获取验证码图片 还是验证提交的验证码
 String type = request.getParameter(“type”);
 int trueFlag = 0; //代表是否验证通过 1验证码正确 0验证码错误
 if(“form”.equals(type)){
 String authCode = (String)request.getSession().getAttribute(“authCode”);
 String code = request.getParameter(“code”);
 if(authCode.equals(code)){
 trueFlag = 1;
 }else{
 trueFlag = 0;
 }
 }else if(“generateAuthCode”.equals(type)){
 response.setHeader(“Pragma”, “No-cache”);
 response.setHeader(“Cache-Control”, “no-cache”);
 response.setDateHeader(“Expires”, 0L);
 
  int width = 60; int height = 20;
  BufferedImage image = new BufferedImage(width, height, 1);

  Graphics g = image.getGraphics();

  Random random = new Random();

  g.setColor(getRandColor(200, 250));
  g.fillRect(0, 0, width, height);

  g.setFont(new Font("Times New Roman", 0, 18));

  g.setColor(getRandColor(160, 200));
  for (int i = 0; i < 155; i++)
  {
    int x = random.nextInt(width);
    int y = random.nextInt(height);
    int xl = random.nextInt(12);
    int yl = random.nextInt(12);
    g.drawLine(x, y, x + xl, y + yl);
  }

  String sRand = "";
  for (int i = 0; i < 4; i++) {
    String rand = String.valueOf(random.nextInt(10));
    sRand = sRand + rand;

    g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
    g.drawString(rand, 13 * i + 6, 16);
  }
  //将验证码保存服务器session中
  request.getSession().setAttribute("authCode", sRand);
 
  g.dispose();
  try
  {
   //将图片写入输入流
    ImageIO.write(image, "JPEG", response.getOutputStream());
  }
  catch (Exception localException1)
  {
  }
 
}
 try{
 //跳转回页面
 response.sendRedirect(request.getContextPath()+"/index.jsp?result="+trueFlag);
 }catch(Exception e){
 
}
 }