用户登录：Geetest滑动验证

最新推荐文章于 2024-08-17 16:50:19 发布

山河长不高吖

最新推荐文章于 2024-08-17 16:50:19 发布

阅读量952

点赞数

分类专栏： Django 框架文章标签： python

本文链接：https://blog.csdn.net/hl120841/article/details/105298237

版权

本文探讨了用户登录过程中滑动验证的流程，包括前后端交互、JS逻辑实现和问题分析。在遇到滑动块大小调整无效及账号密码错误后验证码无法刷新的问题上，期待得到技术专家的指导。

摘要由CSDN通过智能技术生成

用户登录时滑动验证

js采用的AES加密和view视图中的AES解密可以看这篇文章处理。

滑动验证还有两个问题没有解决：

显示滑动验证码的块设置大小调整，无用
用户账号密码输入错误后，要进行验证码刷新，无用

希望有看到的大佬能指点下

1. 流程分析：

进入到登录界面
第1次向后端发起GET请求：向后台发送Geetest配置信息，获取到验证码显示
第2次向后端发起POST请求：构造发送的参数信息，和验证码信息，到后端进行校验
后端校验：
1. 先校验验证码信息
  - 失败：刷新验证码，提示验证码错误
2. 校验用户登录信息
  - 失败：刷新验证码，提示用户账号或者是密码错误
3. 成功后返回状态码到前端
前端进行页面跳转

2.安装滑动验证的模块

pip install social-auth-app-django
pip install geetest

3. url配置

path('slide/', views.show_slide_index,name="slide"), # 显示主页
path('slide/register-slide/<t>/', views.SlideInitView.as_view(), name="init"),  # 初始化
path('slide/login/', views.SlideLoginView.as_view(),name="login"), # 登录验证

4. html

{% extends "base/base.html" %}
{% load staticfiles %}
{% block title %}
    登录
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">
{% endblock %}

{% block main %}
    <style>
        #captcha {
    
            height: 50px;
            width: 440px;
            border-radius: 5px;
            display: inline-block;
        }

        #text {
    
            height: 50px;
            width: 440px;
            text-align: center;
            border-radius: 5px;
            background-color: #3F7F5F;
            color: #BBBBBB;
            font-size: 14px;
            letter-spacing: 0.1px;
            line-height: 50px;

        }

        #wait {
    
            display: none;
            height: 50px;
            width: 440px;
            text-align: center;
            border-radius: 5px;
            background-color: #3F7F5F;
        }

        .loading {
    
            margin: auto;
            width: 70px;
            height: 20px;
        }

        .loading-dot {
    
            float: left;
            width: 8px;
            height: 8px;
            margin: 18px 4px;
            background: #ccc;

            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;

            opacity: 0;

            -webkit-box-shadow: 0 0 2px black;
            -moz-box-shadow: 0 0 2px black;
            -ms-box-shadow: 0 0 2px black;
            -o-box-shadow: 0 0 2px black;
            box-shadow: 0 0 2px black;

            -webkit-animation: loadingFade 1s infinite;
            -moz-animation: loadingFade 1s infinite;
            animation: loadingFade 1s infinite;
        }

        .loading-dot:nth-child(1) {
    
            -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
            animation-delay: 0s;
        }

        .loading-dot:nth-child(2) {
    
            -webkit-animation-delay: 0.1s;
            -moz-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }

        .loading-dot:nth-child(3) {
    
            -webkit-animation-delay: 0.2s;
            -moz-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .loading-dot:nth-child(4) {
    
            -webkit-animation-delay: 0.3s;
            -moz-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }

        @-webkit-keyframes loadingFade {
    
            0% {
    
                opacity: 0;
            }
            50% {
    
                opacity: 0.8;
            }
            100% {
    
                opacity: 0;
            }
        }