验证码技术

    验证码的作用是防止机器提交,防止机器暴力破解密码或向数据库提交垃圾数据。本验证码是根据php教材里的代码修改而成。随机码是在前端js生成的,后端php只是加上干扰条和干扰点显示了一下。

    文件:index.html

DOCTYPE html>
<html>
    <head>
        <title>验证码实例title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">script>
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">script>
        <script>
            function $(id){
                return document.getElementById(id);
            }
            
            window.onload = function(){
                showval();
                function showval(){
                    num = '';
                    str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                    for(var i = 0; i < 4; i++){
                        tmp = Math.ceil((Math.random() * 35));
                        num += str.charAt(tmp);
                    }
                    $("chkid").src = './valcode.php?num=' + num;
                    $("chknm").value = num.toLowerCase();;
                }
                
                $("chkid").onclick = function(){
                    showval();
                }
                
                $("btn").onclick = function(){
                    var t = $("chkin").value.toLowerCase();
                    if(t == $("chknm").value){
                        alert("验证通过!");
                    }else{
                        alert("验证没有通过!");
                    }
                }
            }
        script>
    head>
<body>
    <div class="container">
        <img id="chkid" width="180px" /><br /><br />
        <input type="hidden" id="chknm" name = "chknm">
        <input id="chkin" name = "chkin" class="form-control" /><br />
        <input type="button" id="btn" value="验证" class="btn btn-primary" />
    <div>
body>
html>

    文件:valcode.php

php
header("content-tyoe:image/png");
$num = $_GET['num'];
$imagewidth = 80;
$imageheight = 24;
$numimage = imagecreate($imagewidth, $imageheight);
imagecolorallocate($numimage, 240, 240, 240);
for($i = 0; $i < 240; $i++){
    $randcolor = imagecolorallocate($numimage, rand(200, 255), rand(200, 255), rand(200, 255));
    imagearc($numimage, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), $randcolor);
}
for($i = 0; $i < strlen($num); $i++){
    $x = mt_rand(1, 10) + $imagewidth * $i / 4;
    $y = mt_rand(1, $imageheight / 3);
    $color = imagecolorallocate($numimage, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
    imagestring($numimage, 5, $x, $y, $num[$i], $color);
}
for($i = 0; $i < 300; $i++){
    $randcolor = imagecolorallocate($numimage, rand(200, 255), rand(200, 255), rand(200, 255));
    imagesetpixel($numimage, rand() % 70, rand() % 20, $randcolor);
}
imagepng($numimage);
imagedestroy($numimage);

    执行代码后的效果:

验证码技术_第1张图片

你可能感兴趣的:(验证码技术)