reCAPTCHA 学习

阅读更多

最近在帮朋友写一下小的申请页面,里头有用到验证码来防止恶意注册.
想了一下没能耐造轮子,还是拿来就用吧.找了一下,发现 reCAPTCHA 这个非常不错,还支持声音,不过验证码看起来有点模糊.做一下笔记

先看看它的工作流程

   1.   The user loads the web page with the reCAPTCHA challenge JavaScript embedded.
   2. The user's browser requests a challenge from reCAPTCHA. reCAPTCHA gives the user a challenge and a token that identifies the challenge.
   3. The user fills out the web page form, and submits the result to your application server, along with the challenge token.
   4. reCAPTCHA checks the user's answer, and gives you back a response.
   5. If true, generally you will allow the user access to some service or information. E.g. allow them to comment on a forum, register for a wiki, or get access to an email address. If false, you can allow the user to try again.


然后,你得有个帐号,然后生成一个key,跟Google的adsense类似
移步 这里去申请一个,然后生成你的key.

好,先在客户端加上一段js,这样就可以加载这个验证码了
这里有2种方式生成这个验证码,一个是在form中直接添加js代码

它将在form中生成2个input, recaptcha_challenge_field (系统生成的值) 和 recaptcha_response_field (用户输入值)

引用

These APIs create two form fields: recaptcha_challenge_field is a hidden field that describes the CAPTCHA which is put on the page. recaptcha_response_field is a text field where the user can enter their answer.

还有一种方式是用ajax的方式生成,这里有个 demo.

在head中插入

然后用类似

Recaptcha.create("6LdIEwAA......", //这个是 public_key
"recaptcha_div",     // 生成位置的ID
 {    
   theme: "red",    //显示主题
   callback: Recaptcha.focus_response_field   //回调函数
});

来,在"recaptcha_div" 中生成的验证器.

关于界面的定制
我们可以用类似

var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};

来定制界面,当然还包括语言,
需要注意的是,默认语言界面里头没有简体中文,我们可以用它的custom_translations 属性来自定义中文,我在 js代码中找到了英文的定义,然后手工翻译一下

var RecaptchaStr_en = {
visual_challenge : "Get a visual challenge",
audio_challenge : "Get an audio challenge",
refresh_btn : "Get a new challenge",
instructions_visual : "Type the two words:",
instructions_audio : "Type what you hear:",
help_btn : "Help",
play_again : "Play sound again",
cant_hear_this : "Download sound as MP3",
incorrect_try_again : "Incorrect. Try again."
};

粗糙翻译一下,欢迎拍砖:

var RecaptchaOptions = {
   custom_translations : {
    visual_challenge : "获取图形验证码",
    audio_challenge : "获取声音验证码",
    refresh_btn : "获取新的验证码",
    instructions_visual : "输入2个单词:",
    instructions_audio : "输入您听到的:",
    help_btn : "帮助",
    play_again : "重播",
    cant_hear_this : "下载语音为MP3",
    incorrect_try_again : "错误. 请重试." 
    }
};

这里还有详细的 客户端 API,大家可以围观.

服务端部分
我写的程序是用php的,先看看php的api吧,Java的也有,但还没研究,回头再贴出来

首先你得 下载它的依赖库

然后

require_once('recaptchalib.php');
$publickey = "..."; // 申请的public key
echo recaptcha_get_html($publickey);  //生成获取验证码的html代码,类似前面的用js生成 

recaptcha_get_html 函数有3个参数

recaptcha_get_html($pubkey,$error ,$use_ssl)

$pubkey -- string. 必需.  public key

$error -- string. 可选(默认null) 如果设置了值, reCAPTCHA 会显示这个错误的代码. 错误代码来自 ReCaptchaResponse->$error

$use_ssl -- boolean. 可选(默认false) 是否启用ssl


校验验证码

主要的方法是 recaptcha_check_answer()

require_once('recaptchalib.php');
$privatekey = "...";
$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
  die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
       "(reCAPTCHA said: " . $resp->error . ")");
}

它有4个参数
$privkey -- string. 必需. 申请的 private key
$remoteip -- string. 必需. 用户的ip,格式:192.168.0.1
$challenge -- string. 必需recaptcha_challenge_field 字段的值,来自前台页面
$response -- string. 必需 recaptcha_response_field 字段值
Return value 返回 ReCaptchaResponse class 的实例

ReCaptchaResponse 类有2个属性
$is_valid -- boolean  校验是否有效?
$error -- string 返回的错误代码