基于Python实现原生的登录验证码详情

目录
  • 1、概述
  • 2、验证码实现的演进过程
    • 2.1 路由及页面
    • 2.2 视图函数中验证码的推导
      • 2.2.1 图片发送到前端
      • 2.2.2 引入动态图片
      • 2.2.3 内存管理模块图片
      • 2.2.4 完整图片验证码
    • 2.3 登录验证中使用验证码
    • 2.4 前端页面点击自动刷新
  • 3、效果展示
  • 4、小结

1、概述

在前面的文章中,我有分享了vue+drf+第三方滑动验证码接入的实现(文中也留了分享图片验证码功能的实现),即本文将要分享的是基于 python 实现原生的登录验证码

通常的验证码,人眼看上去更像是一张小图片

html 语法中,嵌入一张图片一般用 img 标签实现,而 img 标签对应的 src 一般有以下几种写法

  • 图片的本地路径
  • 图片的url
  • 图片的二进制数据(base64编码)

其中前两种方法都需要外部具有实际存在的图片,第三种方法则是将图片进行编码后填充到 img 标签的 src

2、验证码实现的演进过程

2.1 路由及页面

为了实现验证码的功能,需要开设一个 url 单独处理验证码功能,修改全局路由

urlpatterns = [
    ......
    url(r'^login/', views.login, name='login'),
    # 图片验证码
    url(r'^get_code/', views.get_code, name='gc'),
    ...
]

然后修改前端登录页面 login.html 的验证码部分

...
<div class="form-group">
    <label for="">验证码</label>
    <div class="row">
        <div class="col-md-6">
            <input type="text" name="code" id="id_code" class="form-control">
        </div>
        <div class="col-md-6">
            <img src="/get_code/" alt="" width="430" height="35" id="id_img">
        </div>
    </div>

</div>
<input type="button" class="btn btn-success" value="登陆" id="id_commit">
...

2.2 视图函数中验证码的推导

2.2.1 图片发送到前端

前端界面实现了一个简单的包含验证码的登录框,首先定义一个视图函数将后端的测试图片以二进制的形式发送到前端进行测试

def get_code(request):
    # 直接获取后端现成的图片二进制数据发送给前端
    with open(r'static/img/test.jpg','rb') as f:
        data = f.read()
    return HttpResponse(data)

2.2.2 引入动态图片

为了操作图片,主要利用的是 pillow 模块

pip3 install pillow

主要用到了 Image ImageDraw ImageFont

  • Image:生成图片
  • ImageDraw:在图片上定义内容
  • ImageFont:控制字体样式

因此,利用 pillow 模块动态产生图片的方法为

import random
from PIL import Image, ImageDraw, ImageFont

def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

def get_code(request):
    # 利用pillow模块动态产生图片
    # img_obj = Image.new('RGB',(430,35),'green')  # RGB组合、图片尺寸、颜色
    img_obj = Image.new('RGB',(430,35),get_random())  # 通过色值指定颜色
    # 先将图片对象保存起来
    with open('xxx.png','wb') as f:
        img_obj.save(f,'png')
    # 再将图片对象读取出来
    with open('xxx.png','rb') as f:
        data = f.read()
    return HttpResponse(data)

2.2.3 内存管理模块图片

上面将图片对象保存在读取有些麻烦,文件存储繁琐 IO 操作效率低 ,可以借助于内存管理器模块实现

其中又分为 BytesIO StringIO 两种

  • BytesIO:临时存储数据,返回的时候数据是二进制
  • StringIO:临时存储数据,返回的时候数据是字符串

内存管理对象就相当于上面的文件句柄

import random
from PIL import Image, ImageDraw, ImageFont

def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

def get_code(request):
    img_obj = Image.new('RGB', (430, 35), get_random())
    io_obj = BytesIO()  # 生成一个内存管理器对象  你可以看成是文件句柄
    img_obj.save(io_obj,'png')
    return HttpResponse(io_obj.getvalue())  # 从内存管理器中读取二进制的图片数据返回给前端

这样一来,图片的生成以及返回就比较友好了

2.2.4 完整图片验证码

上面解决了图片如何传递到前端页面的问题,剩下的就是如何生成对应的随机验证码了

例如随机验证码为五位数的随机验证码,包含数字、小写字母、大写字母

import random
from PIL import Image, ImageDraw, ImageFont

def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

def get_code(request):
    # 写图片验证码
    img_obj = Image.new('RGB', (430, 35), get_random())
    img_draw = ImageDraw.Draw(img_obj)  # 产生一个画笔对象
    # 引入本地的字体文件,指定字体样式及字体大小
    img_font = ImageFont.truetype('static/font/222.ttf', 30)
    # 随机验证码 五位数的随机验证码  数字 小写字母 大写字母
    code = ''
    for i in range(5):
        random_upper = chr(random.randint(65, 90))  # 随机大写字母
        random_lower = chr(random.randint(97, 122))  # 随机小写字母
        random_int = str(random.randint(0, 9))  # 随机数字
        # 每次从上面三个里面随机选择一个
        tmp = random.choice([random_lower, random_upper, random_int])
        # 将产生的随机字符串写入到图片上,需要调整每个字体所在的坐标变换
        img_draw.text((i * 60 + 60, -2), tmp, get_random(), img_font)
        # 拼接随机字符串
        code += tmp
    print(code)
    # 随机验证码在登陆的视图函数里面需要要比对,所以要找地方存起来并且其他视图函数也能拿到
    request.session['code'] = code
    io_obj = BytesIO()
    img_obj.save(io_obj, 'png')
    return HttpResponse(io_obj.getvalue())

这里有一点,在写入随机文字的时候一个个写而不是生成好了之后再写,是因为一个个写能够控制每个字体的间隙。而生成好之后再写的话,间隙就没法控制了

2.3 登录验证中使用验证码

上面将每次生成的验证码存储到了 session 中,这样在前端传过来的验证码,登录校验时就可以进行比对了

......
def login(request):
    if request.method == 'POST':
        back_dic = {'code': 1000, 'msg': ''}
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        # 1 先校验验证码是否正确  自己决定是否忽略大小写 统一转大写或小写再比较
        if request.session.get('code').upper() == code.upper():
            # 校验用户名和密码是否正确
            user_obj = auth.authenticate(request,username=username,password=password)
            if user_obj:
                # 保存用户状态
                auth.login(request,user_obj)
                back_dic['url'] = '/home/'
            else:
                back_dic['code'] = 2000
                back_dic['msg'] = '用户名或密码错误'
        else:
            back_dic['code'] = 3000
            back_dic['msg'] = '验证码错误'
        return JsonResponse(back_dic)
    return render(request, 'login.html')

2.4 前端页面点击自动刷新

最后,还留下一点小问题,前端在输入验证码错误后不会自动刷新,如果点击验证码也不会进行刷新,只能通过刷新登录页面才能刷新验证码,因此需要想办法让用户在点击验证码时自动刷新(单独触发验证码的视图函数)

每次在点击时,修改对应 src 的值即可,可以通过一小段 js 实现

...
       <div class="form-group">
            <label for="">验证码</label>

            <div class="row">
                <div class="col-md-6">
                    <input type="text" name="code" id="id_code" class="form-control">
                </div>
                <div class="col-md-6">
                    <img src="/get_code/" alt="" width="430" height="35" id="id_img">
                </div>
            </div>

        </div>
        <input type="button" class="btn btn-success" value="登陆" id="id_commit">
...
<script>
    $("#id_img").click(function () {
        // 获取标签之前的src
        let oldVal = $(this).attr('src');
        $(this).attr('src',oldVal += '?')
    })
</script>

3、效果展示

最终前端的验证码效果如图

4、小结

本文基于 python 以及相关的库原生实现了登录验证码逻辑~

其实写本文也是因为之前有过想法但是一段时间就忘了,最近通过某银行手机银行 app 重置登录密码的时候,发现其验证码显示效果和本文效果竟然神似~,于是捡起来写了此文

其手机 app 验证码效果如下

到此这篇关于基于Python实现原生的登录验证码详情的文章就介绍到这了,更多相关基于Python实现原生的登录验证码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • python 模拟网站登录——滑块验证码的识别

    普通滑动验证 以http://admin.emaotai.cn/login.aspx为例这类验证码只需要我们将滑块拖动指定位置,处理起来比较简单.拖动之前需要先将滚动条滚动到指定元素位置. import time from selenium import webdriver from selenium.webdriver import ActionChains # 新建selenium浏览器对象,后面是geckodriver.exe下载后本地路径 browser = webdriver.Fire

  • python解决12306登录验证码的实现

    在家无聊,线代和高数看不懂,整点事情干,就准备预定回学校的高铁票,于是就有了这个文章 准备工作 1.pip安装chromediver,当然也可以手动解压(网上的教程好像没有提到pip,手动安装到C盘pycharm里面的Scripts就行了) chromedriver.storage.googleapis.com/index.html这是chromedriver文件官网,在chrome里面设置查看自己的版本,然后找对应的版本就完了 2.注册个超级鹰,http://www.chaojiying.co

  • 用python登录带弱图片验证码的网站

    上一篇介绍了使用python模拟登陆网站,但是登陆的网站都是直接输入账号及密码进行登陆,现在很多网站为了加强用户安全性和提高反爬虫机制都会有包括字符.图片.手机验证等等各式各样的验证码.图片验证码就是其中一种,而且识别难度越来越大,人为都比较难识别.本篇我们简单介绍一下使用python登陆带弱图片验证码的网站. 图片验证码 一般都通过加干扰线.粘连或扭曲等方式来增加强度. 登陆 我们选择一个政务网站(图片验证码的强度较低). 点击个人用户登录 访问网站首页以后我们发现需要先点击个人用户登陆,且元

  • python网络爬虫之模拟登录 自动获取cookie值 验证码识别的具体实现

    目录 1.爬取网页分析 2.验证码识别 3.cookie自动获取 4.程序源代码 chaojiying.py sign in.py 1.爬取网页分析 爬取的目标网址为:https://www.gushiwen.cn/ 在登陆界面需要做的工作有,获取验证码图片,并识别该验证码,才能实现登录. 使用浏览器抓包工具可以看到,登陆界面请求头包括cookie和user-agent,故在发送请求时需要这两个数据.其中user-agent可通过手动添加到请求头中,而cookie值需要自动获取. 分析完毕,实践

  • 教你怎么用python批量登录带有验证码的网站

    一.介绍 原理为使用selenium驱动chorme打开一个新的进程并打开数组中的网址,之后程序自动输入我们事先填入的账号密码,通过已实现的验证码识别模块填写验证码进行登录.登陆完成后自动切换页面,进行下一个页面的登录 二.准备 部署环境:win10 开发环境:python2.7 chrome版本89.0.4389.128 三.实践 3.1 下载驱动 设置查看chorme版本 下载对应版本的chromedriver 解压后,将chromedriver.exe分别放进chrome浏览器目录 和 P

  • 基于Python实现原生的登录验证码详情

    目录 1.概述 2.验证码实现的演进过程 2.1 路由及页面 2.2 视图函数中验证码的推导 2.2.1 图片发送到前端 2.2.2 引入动态图片 2.2.3 内存管理模块图片 2.2.4 完整图片验证码 2.3 登录验证中使用验证码 2.4 前端页面点击自动刷新 3.效果展示 4.小结 1.概述 在前面的文章中,我有分享了vue+drf+第三方滑动验证码接入的实现(文中也留了分享图片验证码功能的实现),即本文将要分享的是基于 python 实现原生的登录验证码 通常的验证码,人眼看上去更像是一

  • Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录

    本文介绍了Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录,分享给大家,具体如下: Python 2.7 IDE Pycharm 5.0.3 Firefox浏览器:47.0.1 Selenium PIL Pytesser Tesseract 扯淡 ​ 我相信每个脚本都有自己的故事,我这个脚本来源于自己GRD教务系统,每次进行登录时,即使我输入全部正确,第一次登录一定是登不上去的!我不知道设计人员什么想法?难道是为了反爬机制?你以为一次登不上,我tm就不爬了?我

  • python爬虫之自动登录与验证码识别

    在用爬虫爬取网站数据时,有些站点的一些关键数据的获取需要使用账号登录,这里可以使用requests发送登录请求,并用Session对象来自动处理相关Cookie. 另外在登录时,有些网站有时会要求输入验证码,比较简单的验证码可以直接用pytesser来识别,复杂的验证码可以依据相应的特征自己采集数据训练分类器. 以CSDN网站的登录为例,这里用Python的requests库与pytesser库写了一个登录函数.如果需要输入验证码,函数会首先下载验证码到本地,然后用pytesser识别验证码后登

  • Python GUI自动化实现绕过验证码登录

    这篇文章主要介绍了python GUI自动化实现绕过验证码登录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1. 获取cookies 实现代码如下: import time from selenium import webdriver class cookies_login: wd=webdriver.Chrome() def getCookies(self): wd=self.wd wd.maximize_window() #登录成功跳转后

  • python 识别登录验证码图片功能的实现代码(完整代码)

    在编写自动化测试用例的时候,每次登录都需要输入验证码,后来想把让python自己识别图片里的验证码,不需要自己手动登陆,所以查了一下识别功能怎么实现,做一下笔记. 首选导入一些用到的库,re.Image.pytesseract.selenium.time import re # 用于正则 from PIL import Image # 用于打开图片和对图片处理 import pytesseract # 用于图片转文字 from selenium import webdriver # 用于打开网站

  • 基于Python的自媒体小助手---登录页面的实现代码

    核心技术:Python3.7 GUI技术:Tkinter (Python已经内置) 好多文章写Python GUI之tkinter窗口视窗教程大集合(看这篇就够了) 我看了N遍也没够好多东西都没有就基本的介绍...还不够.我搞这个也是为了项目服务先给大家来个截图吧,其实知识点还是蛮多的. 在window上有点瑕疵了,在mac上海可以吧.使用到的技术我罗列一下完了在分享给大家代码. 1.窗体设置标题和设置图标,图标格式是ICO的,一般我们事宜Png转一下.https://www.easyicon.

  • 基于 antd pro 的短信验证码登录功能(流程分析)

    概要 最近使用 antd pro 开发项目时遇到个新的需求, 就是在登录界面通过短信验证码来登录, 不使用之前的用户名密码之类登录方式. 这种方式虽然增加了额外的短信费用, 但是对于安全性确实提高了不少. antd 中并没有自带能够倒计时的按钮, 但是 antd pro 的 ProForm components 中倒是提供了针对短信验证码相关的组件. 组件说明可参见: https://procomponents.ant.design/components/form 整体流程 通过短信验证码登录的

  • 基于python使MUI登录页面的美化

    目录 1.前言 2.问题描述 3.解决方案 (1)背景美化 (2)输入框美化 4.结语 本文转自微信公众号:"算法与编程之美" 1.前言 之前的文章Python用HBuilder创建交流社区APP我们已经在HBuilder上创建的APP ,现HBuilder中已经有了登录页面的相关的html文件,但是按照html已有的页面来看,它缺少外观的美化.现在大多数软件需要外观的加成,本篇文章主要讲的是MUI登录页面的美化. 2.问题描述 在将主要的内容构造之后,如今思考如何实现将页面进行美化是

  • python+selenium行为链登录12306(滑动验证码滑块)

    使用python网络爬虫登录12306,网站界面如下.因为网站的反爬是不断升级的,以下代码虽然当前可用,但早晚必将会不再能满足登录需求.但是知识的价值,是不容置疑的. from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains import time from selenium.webdriver import ChromeOptions # 去除浏览器识别 opt

随机推荐