Робот злонамеренно чистит интерфейс? Добавьте проверочный код за несколько минут!

Node.js
Робот злонамеренно чистит интерфейс? Добавьте проверочный код за несколько минут!

Это пятый день моего участия в августовском испытании обновлений, подробности о мероприятии:Испытание августовского обновления

Серверная разработка NodeJS 10 Создание кода проверки изображения и реализация проверки

Эта статьяСерия NodeJS Лэй СювэяСтатья 10.

Описание колонки: «Серия хобби NodeJS Лэй Сюэвэя» написана для серии хобби.
За 15 лет я много слышал о технологиях NodeJS и начал использовать их для быстрой разработки.
В последние два года я хочу больше делиться с внешним миром, и это также считается интересным эссе.
Торжественно заявляем, что любая статья Академического комитета Лея запрещена к воспроизведению!

Много раз мы будем размещать его на странице входа или, например, на страницах регистрации некоторых лотерей.код верификации.

Затем проверьте в фоновом режиме. Размещая код проверки изображения, он может предотвратить принудительное сканирование и повторную попытку робота через системный интерфейс.

Конечно, некоторые проверочные коды веб-сайтов предназначены для предотвращения их использования обычными пользователями (например, предыдущий веб-сайт билетов...)

Давайте посмотрим непосредственно на эффект

在这里插入图片描述

Как показано выше, форма входа отправляет имя пользователя и код подтверждения.

Фон получает введенный проверочный код и проверяет его.

Если проверка не удалась, пользователю необходимо щелкнуть изображение, чтобы сгенерировать новое изображение кода подтверждения, а затем продолжить отправку проверки формы.

Введите неверный код подтверждения изображения

Как показано на рисунке ниже, этот пример запрещает пользователю продолжать вход в систему и печатает сообщение с подсказкой.
在这里插入图片描述

принцип

ПользовательнубОбновите страницу входа, фон генерирует код подтверждения на основе заданного текста и записывает текст. (хранится в сеансе сеанса сервера)

Когда пользователь, принявший код подтверждения изображения, соответствующий этому номеру, отправляет форму. (нубВам необходимо отправить текст изображения кода подтверждения).

Фон получает переписку с сеансанубтекст для проверки.

Если проверка прошла успешно, Xiaobai считает, что это ручная операция, и последующие операции продолжают выполняться.

npm install -S svg-captcha

Основной код выглядит следующим образом:

const express = require('express');
const session = require('express-session');
const serveStatic = require('serve-static');
const bodyParser = require('body-parser');

const leiXueWeiApp = express();
// parse application/x-www-form-urlencoded so that req will has a body attribute
app.use(bodyParser.urlencoded({ extended: false }))

leiXueWeiApp.use(serveStatic('./public'));
const port = 12024;

leiXueWeiApp.use(session({
  secret: '雷学委mySecret2021',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false}
}))

const svgCaptcha = require('svg-captcha');
// a function to generate captcha and display on user screen
const captChaHandler = function(req, res){
    var captcha = svgCaptcha.create();
    req.session.captcha = captcha.text;
    res.type('svg');
    res.status(200).send(captcha.data);
}

leiXueWeiApp.get('/captcha',captChaHandler);

//user will submit form with code in request body and login handler will get captcha from session and check it with given code
leiXueWeiApp.post('/login', function(req, res){
    console.log('[雷学委] try login');
    console.log('[雷学委] body:', req.body);   
    var captchaCode = req.session.captcha
    console.log('[雷学委] captchaCode:', captchaCode)
    if(req.body && req.body.code == captchaCode){
        res.status(200).send(req.body.user + " 登录验证成功!"); 
    }else{
        console.log('[雷学委] 验证码校验失败');
        res.status(400).send("BadRequest, 验证码不对！");
    }
});

console.log('listening port ' + port);
leiXueWeiApp.listen(port);

Соответственно, мы можем написать код, подобный следующему на странице (не полный, только фокус на основной реализации)

<form class="leixuewei" >
姓名: <input type="text" id="username" value="雷学委" /><br/>
验证码：<input type="text" id="leiXueWeiCode" value="" />&nbsp;<img class="captcha" src="/captcha" οnclick={$(event.target).attr('src','/captcha?'+Math.random())} /> <br/>
<input type="submit" value="Submit" />
</form>
<br/><div id="result"></div>
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("form").submit(function(e){
        e.preventDefault();
        var userName = $("#username").val();
        var code = $("#leiXueWeiCode").val();
        $.ajax({
            type: 'post',
            data: {user:userName, code: code},
            url: "http://localhost:12024/login/",
            success:function(data){$('#result').html(JSON.stringify(data));},
            error:function(error){$("#result").html(JSON.stringify(error));}
        })
    });
}

В основном для достижения следующей формы формы:
在这里插入图片描述

Кстати, академический комитет тоже имеет это, чтобы сосредоточиться на долгосрочном чтении =>Подборка интересных историй о программировании от Лэй Сюэвэя

Непрерывное обучение и постоянное развитие, я Лей Академический комитет!
Программирование — это весело, и ключ в том, чтобы досконально понять технологию.
Это не легко создать, пожалуйста, поддержите много, лайкните и соберите, чтобы поддержать академический комитет!

Больше кода можно посмотреть /Star:Скачать код LearnNodeJS

Ссылка на ссылку

Уууу, эта лошадь plus.com/package/SVG…

Категории