simple Captcha with refresh option

[Muniraj saravanan, módosítva 12 év-val korábban]

Can any one tell me , How to add refresh option for simple captcha

[Tom Reichelt, módosítva 12 év-val korábban]

Hi Muniraj,

we've searched for this functionality long time ago and it's a little bit unsatisfied that this is a.) not provided by Liferay yet and b.) not documented somewhere.

Liferay has opened a ticket for this some month ago: http://issues.liferay.com/browse/LPS-17098 and http://issues.liferay.com/browse/LPS-20276.
I wanted to add comment to these, to help other users to implement this functionality. Unfortunatly I've no access to Jira. But fortunatly I found your recent post.

Best way will be to create a hook which will override the liferay-ui:captcha-taglib. This way the apearance for the captcha will be the same everywhere.

We've done it this way, because we only want this in some portlets.
For example we've created a hook for forget password and override the jsp.

We have added an image that displays reload-button (could also be a html button).

<aui:layout> 
  <aui:column>
    <liferay-ui:captcha url="<%= captchaURL %>" />
  </aui:column>							
  <aui:column>
    <a href="#" class="captcha-reload">
      <img src="theme/images/refresh.png" alt="Reload-Capcha">
      Sicherheitscode neu laden
    </a>
  </aui:column>
</aui:layout>

The layout is only for creating 2column layout, it's not necessary for functionality. You can also put the "captcha-reload "class inside the <img>-Tag. This will spare the <a>-Tag.

Now we need a function to replace the image. On our page we've used jQuery, but you can do it also with AlloyUI.

jQuery(".captcha-reload").click(function() {
  jQuery(".captcha").attr("src", jQuery(".captcha").attr("src")+"&force=" + new Date().getMilliseconds());
  return false;
});

Another possibility is to use:

  jQuery(".captcha").attr("src", "<%= captchaURL %>&force=" + new Date().getMilliseconds());

This will be replace the captcha image with the new one. (captcha-class generated from liferay)
If you have more than one captcha in the page you will have to change the code, because this will change all ".captcha"-classes.

First we tried this without force-parameter. The result is that a new image is generated on the server and also send to the browser. BUT the browser thinks that the image is the same and load the old one from cache. So the "force"-parameter with time or random numbers is necessary!! This will circumvent the browser cache.

Caution: In this special case you have to add the code twice, because there are to cases inside forget_password.jsp.

Hope this helps,
Tom

[Tom Reichelt, módosítva 12 év-val korábban]

Additional info:

I imagine that we do not take the second option, because the web crawler will access the forgot_password-page although we have added "rel="nofollow" to the link.

While crawling the search engine will find the link inside Javascript and index it.
Because this link has an authentication-token to prevent XSRF the web crawler will throw an error every time it will try to load that url. So the first option is better.

[Muniraj saravanan, módosítva 12 év-val korábban]

Thanks Tom ,

[Dhandapani S, módosítva 12 év-val korábban]

Thanks Tom,,, Its really helpful.

Regards

Dhandapani S

[Dhandapani S, módosítva 12 év-val korábban]

Thanks Tom,,, Its really helpful.

Regards

Dhandapani S

[Juanjo Hernández Cánovas, módosítva 12 év-val korábban]

This works great!!!

Thanks for share!

Juanjo.

[mohammed esham, módosítva 12 év-val korábban]

thanks tom,
this had solved my issue

[Abdollah Esmaeilpour, módosítva 11 év-val korábban]

Thank you very much

[Abdul Kaleem, módosítva 8 év-val korábban]

use the below code to refresh the captcha

<portlet:resourceURL var="captchaURL">
<portlet:param name="struts_action" value="/login/captcha" />
</portlet:resourceURL>
<aui:layout>
<aui:column>
<liferay-ui:captcha url="<%= captchaURL %>" />
</aui:column>
<aui:column>
<a href="#" class="captcha-reload">
<img src="theme/images/refresh.png" alt="Reload-Capcha" />
Refresh sadasd
</a>
</aui:column>
</aui:layout>

and the script
$(document).ready(function(){
$("#_58_refreshCaptcha").click(function() {
$(".captcha").attr("src", $(".captcha").attr("src")+"&force=" + new Date().getMilliseconds());
return false;
});
});

[jelmer kuperus, módosítva 12 év-val korábban]

Why not use recaptcha ?

http://www.liferay.com/community/wiki/-/wiki/Main/Recaptcha

It looks nicer and has a reload option built in

[Tom Reichelt, módosítva 12 év-val korábban]

There are several reasons not to use recapcha, although I think it's more powerful.

In our project we thought about using it, but the customer doesn't want it, because it looks like a foreign object in the web page and doesn't look like other elements. I never tried to style it before, but I think this will not be so easy. The simple captcha with the grey backgrounds and gradients was perfect, so we used it.

But you are right, if the need is for a small solution for reload captcha without coding it's much easier to use recaptcha.

If there are other requirements to use simple captcha I just want to show our solution for this problem. Although I think there will be a much nicer Liferay solution in the next releases (see attached jira entries).

Regards,
Tom

[Muniraj saravanan, módosítva 12 év-val korábban]

Thanks Tom, your solution is working great !

Regards,
Muniraj Saravanan