Good afternoon! Despite the title of the article, it will present the general methods and functions that I used to create my captcha, which can be applied in other frameworks with minimal changes. Some functions and approaches are based on the materials of the DIY CAPTCHA development post .Introduction
To work with images, you need to check the presence of the GD library in PHP. This can be done using the gd_info () function. In the examples presented, I use version 2.1.0 and PHP 7.4.3, which is not necessary in this case, since the PHP7 functions are not used.Logics
What captcha do I want to see? One that will help me reduce the number of server requests during authorization in my site with codeigniter 4.For implementation, the picture with the code will be generated exclusively on the server side, saved to a temporary folder, encoded in base64 and returned to the user.Development
Before drawing the picture, we write the code generation method.public function generate_code() {
srand((float) microtime() * 1000000);
$chars = 'ABDEFHKNRSTYZabdefhknrstyz23456789';
$length = rand(5, 7);
$numChars = strlen($chars);
$str = '';
for ($i = 0; $i < $length; $i++) {
$str .= $chars[rand(0, $numChars - 1)];
}
$array_mix = preg_split('//', $str, -1, PREG_SPLIT_NO_EMPTY);
shuffle($array_mix);
delete_cookie('cap');
set_cookie('cap', md5(implode("", $array_mix)), self::$_code_time);
return implode("", $array_mix);
}
I note that in the future I will use various fonts to output characters, so you need to pay attention to the original set of characters, or to the fonts themselves, in order to avoid problems with such characters as āZā and āzā, āXā and āxā, āIā and ālā, etc., since distorting the picture can make captcha input problematic.I declare the necessary fields in the future.public static $width = 220;
public static $height = 120;
public static $fonts_num = 4;
private static $_code_time = 180;
Iām preparing some methods for generating backgrounds and noise (full listing at the end).
private function _add_line($img, $mode = '', $max = 100) {
for ($i = 0; $i < rand(0, $max); $i++) {
$color = imagecolorallocate($img, rand(80, 150), rand(80, 150), rand(80, 150));
if ($mode === 'parallel') {
$r1 = rand(0, self::$width);
$r2 = rand(0, self::$width);
imageline($img, $r1, $r1, $r2, $r1, $color);
imageline($img, $r1, $r2, $r1, rand(0, 220), $color);
} else {
imageline($img, rand(0, self::$width), rand(0, self::$width), rand(0, self::$width), rand(0, self::$width), $color);
}
}
}
private function _add_poly($img) {
$points = [];
for ($i = 0; $i < 10; $i++) {
array_push($points, rand(0, self::$width * 2));
}
$color = imagecolorallocate($img, rand(80, 190), rand(80, 190), rand(80, 190));
imageFilledPolygon($img, $points, 5, $color);
}
private function _set_glitch_color($image, $xn = 0, $yn = 0, $mode = 'normal') {
$start = rand(self::$height / 2, self::$height / 2 - self::$height / 4);
$finish = $start + rand(5, 15);
for ($x = 0; $x < self::$width - 1; $x++) {
for ($y = 0; $y < self::$height - 1; $y++) {
if ($mode != 'normal') {
$xn = rand(0, 1);
$yn = rand(0, 1);
} else {
$finish = $start + 3;
}
if ($y > $start && $y < $finish) {
imagesetpixel($image, $x + $xn, $y + $yn, imagecolorat($image, $x, $y));
}
}
}
}
Almost ready. We write the secret code in the picture.private function _add_text($img, $text) {
$x = rand(10,20);
for ($i = 0; $i < strlen($text); $i++) {
$text_color = imagecolorallocate($img, rand(150, 250), rand(150, 250), rand(150, 250));
imagettftext($img, rand(35, 40), rand(0, 10) - rand(0, 10), $x, rand(55, 95), $text_color, 'fonts/' . rand(1, self::$fonts_num) . ".ttf", $text[$i]);
$x += rand(25, 35);
}
}
We combine ready-made methods for creating a picture and checking the code.public function img_code($code) {
$image = imagecreatetruecolor(self::$width, self::$height);
imageantialias($image, true);
$rand_color = imagecolorallocate($image, rand(50, 120), rand(50, 120), rand(50, 120));
imagefilledrectangle($image, 0, 0, self::$width, self::$height, $rand_color);
$this->_add_rand_bg($image);
$this->_add_text($image, $code);
$this->_add_glitch($image, 'normal');
$this->_add_glitch($image, 'boom');
$this->_add_line($image, 'rand', 200);
$file = 'temp/' . md5($code) . ".png";
imagepng($image, $file);
imagedestroy($image);
$res = base64_encode(file_get_contents($file));
unlink($file);
return $res;
}
public function check($tested) {
$cap = get_cookie('cap');
$r['error'] = '';
if (!$cap) {
$r['error'] = ' .';
} elseif (strcmp($tested, $cap)) {
$r['error'] = ' .';
}
delete_cookie('cap');
return $r;
}
Using
In the necessary controllers, we prepare the captcha as follows:public function __construct() {
...
$this->captcha = new \App\Libraries\Captcha();
...
}
public function some_function() {
...
$data['captcha'] = $this->captcha->img_code( $this->captcha->generate_code() );
return view('page/template', $data);
}
public function recaptcha(){
return $this->captcha->img_code( $this->captcha->generate_code() );
}
In the template, create a token and a button for re-generating the picture:...
<input type="hidden" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" id="csrf"/>
...
<img src="data:image/png;base64,<?= $captcha ?>" id="cap" width="220" height="120"/>
<div id="ref" onclick="recaptcha()">ā„</div>
...
We add a route for ajax request.$routes->post('/recap', 'AuthController::recaptcha');
And ajax itself.var numlog = 0;
function recaptcha() {
if(numlog <= 5){
$.ajax({
type: 'post',
url: '/recap',
data: {csrf_token: $('#csrf').val()},
success: function (result) {
numlog++;
$('#cap').attr('src', "data:image/png;base64," + result + '');
}
});
}else{
$('#ref').css('display', 'none');
}
}
Total
A noisy color palette and a set of distortions with different parameters greatly complicates the solution of captcha. After playing with the constants, you can get different results.I checked all the results in a graphical editor by throwing a threshold on the pictures, thereby highlighting the characters that can be used for recognition.
Noise and random lines, of course, increase complexity. But the conclusion I make is the following: if necessary and desired, this solution is not completely safe, however, it helps in protecting against ordinary bots.The full code can be viewed on the github . I will be glad to hear recommendations and comments.