Recaptcha on GWT
390 views
Skip to first unread message
benjo
Apr 27, 2008, 4:03:24 PM4/27/08
to Google Web Toolkit
Hi everybody!
First time poster, long time lurker. I have been struggling with
getting recaptcha to work with GWT, and finally succeeded. I thought
I would share how I did this. The method I solved this problem
involves some JNSI, but also modifying some of that static content in
your .html file. It is inelegant, but I could not get a pure JNSI
implementation to work.
Step 1:
Change your .html file so that it has the proper scripts from
recatpcha.net. Add these lines above your include for the nocache.js
(your main GWT javascript source file):
<script type="text/javascript" src="http://api.recaptcha.net/js/
recaptcha_ajax.js"></script>
<script type="text/javascript" src="recaptchaimpl.js"></script>
You do not have recaptchaimpl.js, yet...
Step 2:
Make a new javascript file, called recaptchaimpl.js, and place it in
your public directory (com.whatever.public) along with your .html file
and .css file. You will need your recaptcha public key, which you can
get by signing up for it at recaptcha.net. Add this text to your new
js file:
function init()
{
Recaptcha.create("YOUR_PUBLIC_KEY","recaptcha_div",{ theme:
"clean",callback: Recaptcha.focus_response_field});
}
Step 3:
Go back to your .html file, and modify the <body> tag so that it looks
like this:
<body onload="init()">
Next, put in the div tags between in the body wherever you see fit:
<div id="recaptcha_div"></div>
When you load your page, you should now see your captcha, but we still
need to get the challenge and response from the captcha.
Step 4:
Time for some JNSI. Somewhere you will have a widget that is going to
use RPC or a POST method to send the captcha data along with whatever
else (comment/post, signup details, etc.), and you will need to get
the challenge and reponse from the captcha. In that widget, add the
following two JNSI functions:
protected native String getResponse()
/*-{
return $wnd.Recaptcha.get_response();
}-*/;
protected native String getChallenge()
/*-{
return $wnd.Recaptcha.get_challenge();
}-*/;
Call this functions to get the challenge and response, and send them
along to your server. You can do other crap with the Recaptcha API
using JNSI, just read up on it recaptcha.net.
Step 5:
You are on your own for the server implementation, but you can find
some hints on recaptcha.net
http://recaptcha.net/resources.html
And as always, Google search is your friend :)
-Ben
First time poster, long time lurker. I have been struggling with
getting recaptcha to work with GWT, and finally succeeded. I thought
I would share how I did this. The method I solved this problem
involves some JNSI, but also modifying some of that static content in
your .html file. It is inelegant, but I could not get a pure JNSI
implementation to work.
Step 1:
Change your .html file so that it has the proper scripts from
recatpcha.net. Add these lines above your include for the nocache.js
(your main GWT javascript source file):
<script type="text/javascript" src="http://api.recaptcha.net/js/
recaptcha_ajax.js"></script>
<script type="text/javascript" src="recaptchaimpl.js"></script>
You do not have recaptchaimpl.js, yet...
Step 2:
Make a new javascript file, called recaptchaimpl.js, and place it in
your public directory (com.whatever.public) along with your .html file
and .css file. You will need your recaptcha public key, which you can
get by signing up for it at recaptcha.net. Add this text to your new
js file:
function init()
{
Recaptcha.create("YOUR_PUBLIC_KEY","recaptcha_div",{ theme:
"clean",callback: Recaptcha.focus_response_field});
}
Step 3:
Go back to your .html file, and modify the <body> tag so that it looks
like this:
<body onload="init()">
Next, put in the div tags between in the body wherever you see fit:
<div id="recaptcha_div"></div>
When you load your page, you should now see your captcha, but we still
need to get the challenge and response from the captcha.
Step 4:
Time for some JNSI. Somewhere you will have a widget that is going to
use RPC or a POST method to send the captcha data along with whatever
else (comment/post, signup details, etc.), and you will need to get
the challenge and reponse from the captcha. In that widget, add the
following two JNSI functions:
protected native String getResponse()
/*-{
return $wnd.Recaptcha.get_response();
}-*/;
protected native String getChallenge()
/*-{
return $wnd.Recaptcha.get_challenge();
}-*/;
Call this functions to get the challenge and response, and send them
along to your server. You can do other crap with the Recaptcha API
using JNSI, just read up on it recaptcha.net.
Step 5:
You are on your own for the server implementation, but you can find
some hints on recaptcha.net
http://recaptcha.net/resources.html
And as always, Google search is your friend :)
-Ben
TheB...@gmail.com
Apr 28, 2008, 4:13:56 PM4/28/08
to Google Web Toolkit
interesting recaptcha makes scanned books readable.
NN
Apr 29, 2008, 3:23:07 PM4/29/08
to Google Web Toolkit
I have also created Captcha based on servlets here is the link
http://code.google.com/p/gwtcaptcha/
Cheers,
http://code.google.com/p/gwtcaptcha/
Cheers,
Reply all
Reply to author
Forward
0 new messages