Форум на ПЫХА.РУ

Форум на ПЫХА.РУ

Пыхнуть хотите? => F.A.Q. => Тема начата: Ivan от 19 Сентябрь, 2011, 11:22:14


Название: FAQ: PHP + JQuery UI + ReCaptcha (всплывающая recaptcha и ajax)
Отправлено: Ivan от 19 Сентябрь, 2011, 11:22:14
Статья для тех у кого возникло желание быстро и красиво прикрутить всплывающую капчу себе на сайт. Тонкости JQuery UI тут описывать не буду - приведу лишь примеры кода.
 

 
Что нужно?
1. JQuery UI
2. ReCaptcha Public и Private Keys
3. ReCaptcha PHP Library
 
Создаем файл настроек settings.php
PHP
<?php
 
return array(
    'public_key' => 'тут ваш паблик ключ',
    'private_key' => 'тут приватный ключ',
);

Создаем страницу getkey.php (не обязательно - можете передать ключ напрямую, но в таком случае у вас будет возможность как-то обозначить что пользователь сейчас запросил капчу)
PHP
<?php
session_start();
$recaptcha_cfg = require 'settings.php';
echo $recaptcha_cfg['public_key'];
 

Создаем страницу verify.php - на ней мы будем вызывать проверку вводил ли пользователь капчу уже или нет
PHP
<?php
session_start();
echo isset($_SESSION['nobot']) ? 'yes' : 'no';
 

Создаем страницу check.php - через неё мы будем проверять капчу и устанавливать что пользователь человек
PHP
<?php
session_start();
require_once 'recaptchalib.php';
$recaptcha_cfg = require 'settings.php';
if (( !isset($_SESSION['nobot']) ) and ( isset($_POST['recaptcha_response_field']) )) {
    $resp = recaptcha_check_answer
    (
        $recaptcha_cfg['private_key'], $_SERVER['REMOTE_ADDR'],
        $_POST['recaptcha_challenge_field'], $_POST['recaptcha_response_field']
    );
    if ($resp->is_valid) {
        $_SESSION['nobot'] = true;
        echo 'success';
    } else {
        echo 'fail';
    }
} elseif (!isset($_POST['recaptcha_response_field'])) {
    echo 'fail';
} else {
    echo 'success';
}
 

На этом php-часть закончена. Вы можете переписать этот простой код и под ваш любимый фреймворк - ничего сложного тут нету.
 
Далее выносим JS-логику в отдельный скрипт client.js:
Javascript
$(document).ready(function() {
    $("#dialog-ui").dialog({
            resizable: false,
            width: 460,
            modal: true,
            autoOpen: false,
            buttons: {
                'Проверить введенный код': function() {
                    challengeField = $("#recaptcha_challenge_field").val();
                    responseField = $("#recaptcha_response_field").val();
                    $(this).dialog('option', 'title', 'Подождите идёт проверка...');
                    var html = $.ajax({
                        type: "POST",
                        url: "/check.php",
                        data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
                        async: false
                    }).responseText;
                    if (html.replace(/^\s+|\s+$/, '') == "success") {
                        $(this).dialog("close");
                    } else {
                        $(this).dialog('option', 'title', 'Ошиблись - попробуйте снова');
                        Recaptcha.reload();
                    }
        }
            }
        });
}
 
function showCaptcha() {
    if (!isVerify()) {
        $("#dialog-ui")
        .html('<p align="center" id="captcha_temp"><img src="/images/loader.gif" alt="Loading" /></p>')
        .dialog('option', 'title', 'Действительно ли вы человек?')
        .dialog('open');
        $.ajax({
          url: "/getkey.php",
          dataType: 'html',
          success: function(data) {
             Recaptcha.create(data, "captcha_temp", {theme: "clean"});
          }
        });
    }
}
 
function isVerify() {
    var verifyID = $.ajax({
        url: "/verify.php",
        async: false
    }).responseText;
    return (
        verifyID.replace(/^\s+|\s+$/, '') == 'yes'
    );
}

На страницу заталкиваем куда нибудь html-код диалога:
HTML
<div id="dialog-ui" title="DIALOG_">
            <p>DIALOG</p>
        </div>

И затем в <head> внедряем следующее:
HTML
<head>
    <script type="text/javascript" src="/client.js"></script>
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js?legacy"></script>
</head>

Готово! Теперь чтобы вызвать всплывающую капчу вызовите метод showCaptcha(); внутри своей js-логики (например при проверке формы) и поставьте return false на submit если вы делаете к примеру регистрацию пользователя. В самом скрипте не забудьте проверить наличие nobot в сессии при регистрации. В случае если при регистрации пользователь допустил ошибку - капча не вызовется повторно так как isVerify() вернет true.
 
P.S.: обратите внимания на эту вставку
Javascript
.html('<p align="center" id="captcha_temp"><img src="/images/loader.gif" alt="Loading" /></p>')
Это показ красивого загрузчика, пока код к нам не приехал =)
Если вы хотите использовать этот загрузчик, то сначала скачайте его (к примеру с сайта http://www.preloaders.net ), а потом не забудьте предварительно загрузить, вставив куда-нибудь на страницу в невидимом виде:
HTML
<img src="/images/loader.gif" alt="Loading..." width="1px" height="1px" />

Название: FAQ: PHP + JQuery UI + ReCaptcha (всплывающая recaptcha и ajax)
Отправлено: phpdude от 19 Сентябрь, 2011, 11:09:44
вау пиздота то какая!

Название: FAQ: PHP + JQuery UI + ReCaptcha (всплывающая recaptcha и ajax)
Отправлено: Абырвалг от 20 Сентябрь, 2011, 12:44:32
как бы так сделать, что б от рекапчи получить только картинку? шатал-вертел на хую я ее кнопочки и инпут-поле, у меня свои элементы управления.
Спустя 2 минуты 33 секунды добавил
Javascript
Recaptcha.create
а если я хочу две капчи на одной странице впендюрить? Что за апи? Нельзя было сделать что-то типа captcha1 = new Recaptcha(); captcha1.render() ?

Название: FAQ: PHP + JQuery UI + ReCaptcha (всплывающая recaptcha и ajax)
Отправлено: phpdude от 20 Сентябрь, 2011, 12:50:38
Абырвалг
а если я хочу две капчи на одной странице впендюрить? Что за апи? Нельзя было сделать что-то типа captcha1 = new Recaptcha(); captcha1.render() ?
если захочешь - впендюришь. в исходнике все просто.
 
Javascript
f = d.server + "image?c=" + d.challenge;

где шаленж - данные из сервреа в примере вани.
Спустя 26 секунд добавил
чо стонать то? программист же блядь :-)
 
взял, посмотрел да сделал

Название: FAQ: PHP + JQuery UI + ReCaptcha (всплывающая recaptcha и ajax)
Отправлено: Ivan от 20 Сентябрь, 2011, 01:02:29
а если я хочу две капчи на одной странице впендюрить?
Не совсем ясно зачем? Заставить пользователя вбить две таких капчи разом? Капчу из этого примера можно вызывать сколько угодно - нужно на стороне сервера тупо обнулять $_SESSION['nobot'] когда необходимо.
 
шатал-вертел на хую я ее кнопочки и инпут-поле
У нее есть несколько встроенных стилей (штук 5 помоему + можно свой забабахать)
Точно знаю что частенько имиджборды балуются этим (грабят картинку рекапчи)
 
Что за апи?
А вот это сложный вопрос - оно плоховасто документировано.
 
З.Ы: в рекапче два слова - первое генерируется ботом, второе берется из древней книги и частично распознается по возможности (пользователь выполняет роль машинного наборщика-переводчика сам того не замечая)
 
Плюс рекапчи - минимум нагрузки на сервер и отсутствие требований графических библиотек

Название: FAQ: PHP + JQuery UI + ReCaptcha (всплывающая recaptcha и ajax)
Отправлено: Абырвалг от 20 Сентябрь, 2011, 09:02:55
да понятно, мы ее используем  на нескольких проектах. Это были так, недовольства в слух


Наверх ↑ | Powered by SMF 7 | SMF © 2009, Simple Machines LLC
Форум на ПЫХА.РУ