Use reCaptcha with ZK"

From Documentation
Line 26: Line 26:
  
 
== Check Verification Result ==
 
== Check Verification Result ==
 +
You also need to specify a callback function name at <tt>data-callback</tt> attribute to verify a user's response to a reCAPTCHA challenge at the server side.
 +
<source lang='xml'>
 +
<zk xmlns:c="client" xmlns:x="xhtml">
 +
<script type="text/javascript" src='https://www.google.com/recaptcha/api.js' defer="true" />
 +
<script><![CDATA[
 +
function afterValidate(response){
 +
zk.Widget.$('$recaptcha').fire('onUserRespond',{'response':response}, {toServer:true});
 +
}
 +
]]>
 +
</script>
 +
<x:div id="recaptcha" class="g-recaptcha"
 +
data-sitekey="${sitekey}"
 +
data-callback="afterValidate" />
 +
</zk>
 +
</source>
 +
 +
Here we fire an event, <tt>onUserRespond</tt>, with [https://www.zkoss.org/wiki/ZK_Client-side_Reference/Notifications/Widget_Events#Event_Firing ZK widget API] to send a reCAPTCHA response to the server.
 +
 +
Then we can verify the response according to https://developers.google.com/recaptcha/docs/verify. The verified result is a JSON object, and you can get the success result by key '''success'''.
 +
<source lang='java' high='8, 10, 11'>
 +
public class RecaptchaComposer extends SelectorComposer<Component> {
 +
 +
@Wire
 +
Button submit;
 +
 +
final String SECRET = "6Lcj5AYTAAAAANcaQYWvFkHVSkqR6FsBaCXXw54r"; //from reCaptcha
 +
 +
@Listen("onUserRespond = #recaptcha")
 +
public void verify(Event event) throws Exception{
 +
JSONObject result = RecaptchaVerifier.verifyResponse(SECRET, ((JSONObject)event.getData()).get("response").toString());
 +
if (Boolean.parseBoolean(result.get("success").toString())){
 +
submit.setDisabled(false);
 +
}else{
 +
String errorCode = result.get("error-codes").toString();
 +
//log or show error
 +
}
 +
}
 +
...
 +
}
 +
*
  
 
= Reuse =  
 
= Reuse =  

Revision as of 09:32, 30 March 2017

DocumentationSmall Talks2017MayUse reCaptcha with ZK
Use reCaptcha with ZK
Author
Hawk Chen, Engineer, Potix Corporation
Date
?
Version
ZK 8.0.4

Introduction

Google reCaptach is an easy to use and free service that protects your site from spam and bot. Users usually just need one click to pass the check instead of reading twisted words like Captcha. This article will show you how to use it within ZK framework.

Get reCaptcha

Please follow Google's guide to get reCaptcha API key: https://developers.google.com/recaptcha/docs/start

How to Apply

Include recaptcha API & Configuration

<zk xmlns:c="client" xmlns:x="xhtml">
	<script type="text/javascript" src='https://www.google.com/recaptcha/api.js' defer="true" />
	...
	<x:div id="recaptcha" class="g-recaptcha" 
		data-sitekey="your-key"
		data-callback="afterValidate" />

If the key is correct, you should see the reCaptcha is rendered. If not, open developer tool / Console tab to check an error.

Check Verification Result

You also need to specify a callback function name at data-callback attribute to verify a user's response to a reCAPTCHA challenge at the server side. 

<zk xmlns:c="client" xmlns:x="xhtml">
	<script type="text/javascript" src='https://www.google.com/recaptcha/api.js' defer="true" />
	<script><![CDATA[ 
		function afterValidate(response){
			zk.Widget.$('$recaptcha').fire('onUserRespond',{'response':response}, {toServer:true}); 
		} 
	]]>
	</script>
	<x:div id="recaptcha" class="g-recaptcha" 
		data-sitekey="${sitekey}"
		data-callback="afterValidate" />	
</zk>

Here we fire an event, onUserRespond, with ZK widget API to send a reCAPTCHA response to the server.

Then we can verify the response according to https://developers.google.com/recaptcha/docs/verify. The verified result is a JSON object, and you can get the success result by key success. <source lang='java' high='8, 10, 11'> public class RecaptchaComposer extends SelectorComposer<Component> {

@Wire Button submit;

final String SECRET = "6Lcj5AYTAAAAANcaQYWvFkHVSkqR6FsBaCXXw54r"; //from reCaptcha

@Listen("onUserRespond = #recaptcha") public void verify(Event event) throws Exception{ JSONObject result = RecaptchaVerifier.verifyResponse(SECRET, ((JSONObject)event.getData()).get("response").toString()); if (Boolean.parseBoolean(result.get("success").toString())){ submit.setDisabled(false); }else{ String errorCode = result.get("error-codes").toString(); //log or show error } } ... }

Reuse

Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
Retrieved from "https://www.zkoss.org/_w/index.php?title=Small_Talks/2017/May/Use_reCaptcha_with_ZK&oldid=45677"