jquery에서 로그인 인증 코드를 구현하는 방법

jQuery는 양식 유효성 검사, 모바일 요소 등을 포함하여 웹 페이지 및 애플리케이션에 많은 편리한 기능을 제공하는 인기 있는 JavaScript 라이브러리입니다.

CAPTCHA는 인간 사용자와 자동화된 기계 프로그램의 차이를 식별하는 데 널리 사용되는 인간-기계 검증 기술입니다. 웹사이트 로그인 인터페이스에서 확인 코드는 악성 프로그램이나 공격자가 무차별 대입 공격을 통해 계정에 로그인을 시도하는 것을 방지하는 데 사용됩니다. jQuery는 또한 로그인 확인을 수행할 때 확인 코드를 구현하고 양식에 추가하는 쉬운 방법을 제공합니다.

다음 단계를 수행하세요.

1. 웹페이지에 jQuery 라이브러리 추가

먼저 jQuery 라이브러리가 웹페이지에 포함되어 있는지 확인하세요. jquery.com 웹사이트에서 최신 버전을 사용하여 포함하거나 로컬로 파일을 다운로드하여 웹페이지에 연결할 수 있습니다.

2. 확인 코드 요소 만들기

양식에 확인 코드 요소를 만들고 jQuery의 Append() 메서드를 사용하여 양식 HTML 코드에 추가합니다. 코드는 다음과 같습니다.

<div id="captcha"></div>

3. 인증 코드 이미지 생성

PHP GD 라이브러리를 사용하여 인증 코드에 대한 이미지를 생성하고 이를 HTML 코드에 데이터 URL로 삽입합니다. 이미지에는 이 인증 코드를 고유하게 식별하는 문자, 숫자 등 무작위로 생성된 4개의 문자가 포함되어야 합니다. 다음은 간단한 PHP 코드 예입니다.

session_start();  //开始会话，用于存储验证码
$chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';  //所有可用字符
$length = 4;  //验证码字符数
$str = '';  //生成的验证码字符串
for ($i = 0; $i < $length; $i++) {
    $str .= $chars[mt_rand(0, strlen($chars) - 1)];
}
$_SESSION[&#39;captcha&#39;] = $str;   //将验证码保存到会话中供以后验证使用
$im = imagecreatetruecolor(140, 60);  //创建140 x 60像素的图像
$bg_color = imagecolorallocate($im, 255, 255, 255);  //白色背景
imagefill($im, 0, 0, $bg_color);  //填充背景色
$font_color = imagecolorallocate($im, 0, 0, 0);   //文本颜色
imagettftext($im, 30, 0, 10, 45, $font_color, &#39;arial.ttf&#39;, $str);  //向图像中添加验证码
header(&#39;Content-type: image/png&#39;);  //设置响应类型为PNG图像
imagepng($im);  //将图像输出到浏览器
imagedestroy($im);  //销毁图像资源

4. 양식에 보안 문자 이미지 추가

jQuery를 사용하여 생성된 이미지를 보안 문자 요소에 추가합니다. jQuery의 attr() 메소드를 사용하여 데이터 URL을 요소의 src 속성 값으로 전달하고 이미지에 클릭 이벤트를 추가하여 이미지를 클릭할 때 다른 인증 코드를 다시 생성할 수 있습니다. 다음은 jQuery 코드의 예입니다.

$(&#39;#captcha&#39;).html(&#39;<img src="generate_captcha.php" alt="captcha" />');  //将验证码添加到元素中
$('#captcha img').click(function () {  //单击事件
    $(this).attr('src', 'generate_captcha.php');  //刷新验证码图像
});

이 코드는 이미지 상대 URI("generate_captcha.php")를 src 속성 값으로 사용합니다. 이 상대 URI는 이미지를 생성하는 PHP 스크립트를 가리켜야 하며 기본 스크립트 디렉터리(일반적으로 웹 사이트 루트)에서 시작해야 합니다.

5. 로그인 양식 유효성 검사

사용자가 양식을 제출하면 AJAX POST 요청을 사용하여 유효성 검사를 위해 양식 데이터가 서버로 전송됩니다. 인증 과정에서 서버로 전송된 데이터에 포함된 인증코드 값과 마지막으로 생성된 인증코드 값을 비교해야 합니다. 이 기능을 갖춘 기본 Ajax 코드는 다음과 같습니다.

$.ajax({
    url: 'validate_login.php',
    type: 'POST',
    data: {
        username: $('#username').val(),
        password: $('#password').val(),
        captcha: $('#captcha input').val()   //获取用户输入的验证码
    },
    success: function (data) {
        if (data.redirect) {
            window.location.replace(data.redirect); //如果登录成功跳转到主页
        } else {
            alert(data.message);  //如果登录失败提示错误信息
        }
    }
});

이 기술은 봇이 웹 사이트에 대한 무차별 대입 공격을 방지하고 악의적인 사용자의 잘못된 시도를 보다 효과적으로 식별합니다. 로봇이 네트워크 정보 보안을 공격하는 것을 식별하고 방지하는 것은 차세대 네트워크 정보 보안에서 해결해야 할 문제입니다. 기업 네트워크 보안 솔루션 관리에 있어 인증코드 기술은 점차 널리 사용될 예정이다. jQuery를 사용할 때 위의 5단계를 구현하면 쉽게 인증코드 기능을 구현할 수 있습니다.

위 내용은 jquery에서 로그인 인증 코드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!