reCaptchaをAjaxで使うメモかもしれない


reCaptcha + jQuery ♥

reCaptcha使ってますか!!
えっ、妹認証を使っている?そんなこと言わずにこの記事見て下さいよ。
reCaptchaをJavaScript(jQuery)で扱うときのメモメモ。


今回はPOSTされる側にphpを使用しています。
phpの実行環境が必須なので注意してください。
reCAPTCHA Library for PHP を使用しています。

html側

<!DOCTYPE html>
<html>
    <head>
    	<title>reCaptcha Test</title>
    </head>
    <body>
        <h1>reCaptcha</h1>
		<script src="http://www.google.com/recaptcha/api/challenge?k=[PublicKey]"></script>
		<a href="javascript: void(0)" id="send">Send!</a>
		
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="./js/main.js"></script>
    </body>
</html>

js側

$(function() {
	$('#send').click(function(){
		var flag = true;
		
		if(!$('#recaptcha_response_field').val()){
		    alert('empty!');
			flag = false;
		}

		if(flag){
			$.ajax({
				type: 'POST',
				url: './post.php',
				data: {
					'recaptcha_challenge_field': $('#recaptcha_challenge_field').val(),
					'recaptcha_response_field': $('#recaptcha_response_field').val()
				},
				success: function(data){
					if(data == '1'){
						alert('OK!');
					}else if (data == '2'){
						alert('reCaptcha miss');
						Recaptcha.reload();
				    }else{
						alert('Error...');
					}
				},
				error: function(){
					alert('Ajax Error...');
				}
			});
		}
	});
});

php側

<?php
	require_once(dirname(__FILE__).'/recaptchalib.php');

	$response = recaptcha_check_answer('PrivateKey', $_SERVER['REMOTE_ADDR'], $_POST['recaptcha_challenge_field'], $_POST['recaptcha_response_field']);
	
	if ($response->is_valid) {
		echo '1';
	} else {
		echo '2';
	}

このサンプルではかなり例外処理等が適当なので適当に処理を加えてください。