クリックだけのreCaptchaをAjaxで使用する

はじめに

以前こんな記事を書きました

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

あれから時間が経ち、reCaptchaの仕組みも変わりました。(古いAPIはまだ残されていますが…)
新しいreCaptchaは基本的にクリックのみで認証が可能でとても便利です。
今回はそれをAjaxで使用してみよう！というお話。

つくる

使用するものは以前と殆ど変わっていません。 寧ろ少なくなりました。
例のごとく例外処理は全然してないので各自がんばってください。

英語が読める人であれば下記サイトを見たほうが速いと思います。

reCAPTCHA — Google Developers

サンプルコード

html側

<!DOCTYPE html>
<html>
    <head>
        <title>reCaptcha Test</title>
    </head>
    <body>
        <h1>reCaptcha</h1>
        <div class="g-recaptcha" data-sitekey="[PublicKey]"></div>
        <a href="javascript: void(0)" id="send">Send!</a>

        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="//www.google.com/recaptcha/api.js"></script>
        <script src="./js/main.js"></script>
    </body>
</html>

js側

$(function() {
    $('#send').click(function(){
        var flag = true;

        if(!$('#g-recaptcha-response').val()){
            alert('empty!');
            flag = false;
        }

        if(flag){
            $.ajax({
                type: 'POST',
                url: './post.php',
                data: {
                    'g-recaptcha-response': $('#g-recaptcha-response').val()
                },
                success: function(data){
                    if(data == '1'){
                        alert('OK!');
                    }else if (data == '2'){
                        alert('reCaptcha miss');
                        grecaptcha.reset();
                    }else{
                        alert('Error...');
                    }
                },
                error: function(){
                    alert('Ajax Error...');
                }
            });
        }
    });
});

php側

<?php
	$json = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=[PrivateKey]&response='.$_POST['g-recaptcha-response']);
	$return = json_decode($json);

	if ($return->success == true) {
		echo '1';
	} else {
		echo '2';
	}
comments powered by Disqus