верстка, дизайн, програмування під веб, юзабіліті

Спробуємо трохи урізноманітнити сірі одноманітні капчі, що заполонили Уанет. Більше того, надамо картинці яскраво виражених українських рис, а також забезпечимо її нескладним, проте потрібним сервісом: оновлення картинки (при нечитабельності числа) без перезавантаження всієї сторінки і, як наслідок, без втрати даних, які з такими зусиллями були записані у Web-форму.

Щоб було зрозуміло про що йдеться, дивіться малюнок нижче:

Мал. 1. Вигляд «блакитно-жовтої» капчі з кириличним шрифтом CyrillicOld.

Про те, що таке капча, навіщо вона потрібна, її види і готові реалізації, Ви можете прочитати в одній із моїх попередніх статей.

Вимоги: на сервері має стояти PHP >= 4.0.6 і GD >= 2.0, для оновлення картинки потрібно, щоб була увімкнена в браузері мова JavaScript (якщо Ви її не вимикали, то вона на 99,9% увімкнена).

Принципи генерації (створення) картинки-капчі:

1. Малюємо жовті букви на блакитному фоні.
2. Малюємо блакитні букви на жовтому фоні.
3. На другий малюнок копіюємо верхню половину першого.

Файли, необхідні для роботи капчі, Ви можете знайти в цьому архіві (розмір: 265 Кб). Всі скрипти детально коментовані, тому, гадаю, при потребі Ви легко дасьте раду з ними. Отже, що там є?

• index.php - в даному файлі є форма (щоб, Ви могли протестувати блакитно-жовту капчу);
• code.php - скрипт, що генерує малюнок-капчу;
• папка fonts - папка зі шрифтами для «таємного» числа (AdverGothicCamC, Arial, CharlesworthBold, CyrillicOld); після вибору вподобаного шрифту, решту можна спокійно видалити;
• loading.gif - статичний малюнок-піктограма «перезавантаження».

Ось, як виглядає сторінка «index.php» в браузері:

Мал. 2. Зовнішній вигляд форми із запропонованою капчею.

Зауваження! Щоб власноруч протестувати роботу скриптів, Ви маєте розмістити папку з архіву на сервері, який задовольняє вище згаданим вимогам, або ж поставити собі на комп’ютері (вдома чи на роботі) локальний Web-сервер. Трохи більше про локальні сервери можна почитати в моїй попередній статті. Для перегляду капчі в on-line режимі можна заглянути на сторінку http://vispyanskiy.name/captcha/.

Декілька слів про захищеність

1. Основна перевага даної капчі полягає в її оригінальності. Адже, спам-роботи, як правило, налаштовані розпізнавати найбільш поширені види захисту. А даній реалізації до таких ще дуже і дуже далеко.
2. Попри те, що текст на картинці не є викривлений, спам-роботу, щоб розпізнати символи, потрібно буде побавитися з двома кольорами. Адже, як бачите, до середини літера - жовта, а знизу - блакитна.
3. Цифри не залишаються на одному місці, а динамічно рухаються в певному проміжку (коридорі). Також змінюється кут нахилу кожної цифри.
4. Для тестування надійності капчі була здійснена спроба розпізнати за допомогою програми ABBYY FineReader 8.0 Professional Edition дану реалізацію, але безуспішно, що не може не тішити. Більше того, програмі не вдалося розпізнати жодного символу.

Зауваження! Даний тест на «людяність» є відносно легкий для розпізнання «живою» людиною, що збільшує ймовірність правильного введення «таємного» числа з першого разу і, як наслідок, збільшує ймовірність залишення коментаря до статті, відгуку в гостьовій книзі, тощо. Тому я б не радив накладати шум на картинку, який значно спотворить її, і можливо відлякає відвідувачів від тіснішого спілкування.

Як можна покращити захищеність даного тесту?

Найлегший спосіб - це збільшити / зменшити розмір шрифту (за замовчуванням вибрано 24px) або ж змінити шрифт на менш чіткий (за замовчуванням - CyrillicOld).

Мал. 3. Блакитно-жовта капча при розмірі шрифту 36px.

Мал. 4. Блакитно-жовта капча (шрифт - AdverGothicCamC).

Недоліки

• Обрана кольорова гамма (блакитно-жовта) не завжди підходить до дизайну сайту.
• Текст на картинці не є змазаним, а задній фон - статичний і тому розпізнання цифр для спам-роботів - відносно спрощене.

Як можна покращити даний проект?

• В разі, якщо число на картинці важко прочитати і активовано «Оновити картинку», можна реалізувати анімацію, яка б демонструвала, що щось в цей час відбувається, бо зараз малюнок-піктограма «перезавантаження» - статичний.
• Щоб підкреслити національність капчі, можна додати котрийсь із українських узорів до її фону. Наприклад, такий

Мал. 5. Український національний узор для майбутньої капчі.

Джерела:

• http://php5.ru/articles/image - обробка зображень засобами PHP.
• http://www.codenet.ru/webmast/php/Security-Images-in-PHP/ - захист Web-форм від автоматичної обробки.

Популярність: 31%