I'm working in an implementation of ReCaptcha from Google in my Joomla 1.5 application. I know, it's an old version of Joomla, but as the time got passed, the hard code practice at the company made the upgrading impossible.
I found an old ReCaptcha plugin for Joomla 1.5 at https://code.google.com/p/joomla-recaptcha/, by the way, recommended by developers.google (https://developers.google.com/recaptcha/old/intro).
That plugin is really simple to use. Enough to install the plugin and enable it. This way it's only a matter of use its static methods. One thing I had to do was change the path to the ReCaptcha ajax API, both in components/com_community/helpers/recaptcha.php and in plugins/system/recaptcha/recaptchalib.php. That's because the plugin reference the old path.
I'm working well with server side part of ReCaptcha. So I'm mostly concerned with a client-side issue. To display ReCaptcha snippet, is only a matter of include the line
<div><?php echo ReCaptcha::get('html'); ?></div>
in the template .php.
The ReCaptcha::get static method generates the following piece of code in my template
<div>
<div id='recaptcha_ajax_instance_'></div>
<script type='text/javascript' src='http://www.google.com/recaptcha/api/js/recaptcha_ajax.js'></script>
<script type='text/javascript'>
(function(){
function loadRecaptcha(){
Recaptcha.create('6LcKaAgTAAAAAP3CgGF04VUsWTPGwzDs3EaVlajH','recaptcha_ajax_instance_');
}
if( window.addEvent ){
window.addEvent('domready', loadRecaptcha);
}
else{
if( window.addEventListener ){ window.addEventListener('load', loadRecaptcha); }
else if( window.attachEvent ){ window.attachEvent('onload', loadRecaptcha); }
else{ old = window.onload; window.onload = function(){ if( old && typeof old == 'function'){ old(); } loadRecaptcha(); }; }
}
})();
</script>
</div>
That issue is simply the button to reload captcha doesn't work. Neither mouse changes to pointer when hovering button, nor button change the words when clicked. The two other buttons (audio chalange and help) work well.
I wondering if the code above is outdated with the most updated API in google URL.
If somebody could help, I appreciate.
Related
I have reCAPTCHA v3 set up on my page:
<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY"></script>
If internet connectivity becomes unavailable or unreliable, reCAPTCHA will insert this HTML at the bottom of my page:
<div>
<div>
Could not connect to the reCAPTCHA service. Please check your internet connection and reload to get a reCAPTCHA challenge.
</div>
</div>
I would much rather handle this error in my JavaScript so I can display it to the user in a better way. However, the documentation for v3 doesn't indicate how to do this.
Any thoughts on how to catch this error?
You can put an onerror handler in the script tag itself:
<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY" onerror="error_handler()">
But I think what you want is more along the lines of what reCAPTCHA v2 offers:
widgetId = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light',
'error-callback' : error_handler()
});
I doubt that works but there is another way. You just need to monitor the DOM for changes since you know that when there is an error Google will add a div to your page. You can do that with MutationObserver.
var m = new MutationObserver(function (mutationRecords) {
this.disconnect();
error_handler();
});
m.observe(document.body, {childList: true});
{childList: true} tells the MutationObserver to detect nodes added to the DOM and passes them to the callback function as the parameter mutationRecords (which contains array of MutationRecord objects). From there it's up to you what to do next.
This should at least be enough to get you started!
I am using Botdetect captcha, But i need to remove the link they have given below the image captcha, how to remove it
BotDetect CAPTCHA Library for CodeIgniter
Here is the image
add code top site
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a[title ~= 'BotDetect']").removeAttr("style");
$("a[title ~= 'BotDetect']").removeAttr("href");
$("a[title ~= 'BotDetect']").css('visibility', 'hidden');
});
</script>
I had used botdetect captcha for non commercial use,
where I was able to successfully removed the link and title .
Path of file to be modified ,
vendor/captcha-com/examples/captcha/lib/botdetect/CaptchaInculdes.php
private static function iqy23{
return '';
}
And
public static function GetHelpLinkText($_1qfl5bimwvnl8fd7, $_iitpwcsaaap742gstb7q5) {
return '';
}
Return blank in above two functions.
Hope it helps someone looking for non commercial use or who is willing to understand the algorithm ,
it is always recommendable to purchase the paid version for commercial use.
Cheers :)
Read the below links. I suggest you can convert the help link mode to image instead. It will hide the text from getting displayed and instead captcha will be clickable.
https://captcha.com/doc/java/captcha-options.html#captcha_help_link_mode
https://captcha.com/license/captcha-free-version-limitations.html#link
You can add HelpLinkMode property with "Image" value
Like this:
<BotDetect:WebFormsCaptcha ID="ExampleCaptcha" UserInputID="CaptchaCode" runat="server" HelpLinkMode="Image"/>
You can make a div over the legend:
<botDetect:captcha id="miCaptcha" userInputID="captchaCode" codeLength="4" imageWidth="150" imageStyle="GRAFFITI2"/>
<div id="tapa" style="background-color: #ffffd9;height: 10px;width: 150px;position: relative;top: -10px;"></div>
I'm now trying to use new google recaptcha in my webpage.
In previous recapthca, I usually use this script to check if user fill the recaptca challenge.
if (isset($_POST['cmdlogin'])){
$resp = recaptcha_check_answer ($privatekey,$_SERVER['REMOTE_ADDR'],strip_tags($_POST['recaptcha_challenge_field']),strip_tags($_POST['recaptcha_response_field']));
if (!$resp->is_valid) {// Bila captcha not true
echo "<script>alert('Invalid! try again!');</script>";
echo "<meta http-equiv='refresh' content='0; url=login.php'>";
exit();
}
....
Then, I found this tutorial [http://codeforgeek.com/2014/12/google-recaptcha-tutorial/#comment-22729, but it did not satisfy me.
Besides, when user reloads the page or time is out, there will be a "previous recaptcha", so how should I handle it then? Otherwise user will reload the page to avoid the previous one. thanks for any help.
html_element is the id of my empty div.. Then you can put the following in a function and call it on submit:
var googleResponse = jQuery('#g-recaptcha-response').val();
if (!googleResponse) {
$('<p style="color:red !important" class="error-captcha"><span class="glyphicon glyphicon-remove " ></span> Please fill up the captcha.</p>" ').insertAfter("#html_element");
return false;
} else {
return true;
}
UPDATED:
Ref: https://github.com/google/ReCAPTCHA/tree/master/php
I think this question is now solved. I foundthe link and it gave me full tutorial about using new google recaptcha in php script.
ISSUE:
When a user reload the page, there will be an old google recaptcha appears and we do not need to verify the old one since when user type the correct recaptcha, the "RESULT" will be sent to new recaptcha. On the other hand, the focus of the verification is not the old one but still the new one. This occurs to protect it from spam when unknown user uses other bots to attack the new one. By appearing the old one, the attack can, say, get failure.
if ($resp != null && $resp->success) {
echo "<script>alert('SUCCESS Verifying Recaptcha!');</script>";
echo "<meta http-equiv='refresh' content='0; url=login.php'>";
exit();
}
To check if google recaptcha is checked or not can be done by the following javascript condition :
<script>
if(grecaptcha && grecaptcha.getResponse().length > 0)
{
//the recaptcha is checked
// Do what you want here
alert('Well, recaptcha is checked !');
}
else
{
//The recaptcha is not cheched
//You can display an error message here
alert('Oops, you have to check the recaptcha !');
}
</script>
When I navigate to a different page in my project in IE (and sometimes chrome) the new URL is added to the old one.
For example, if this is my original URL: localhost:49866/Home/Index
and I was to navigate to a different page, that URL is added to the old one like this:
localhost:49866/Home/Index#/Newpage
I've found that this is an ajax thing which makes it easier to retrieve old pages. However, is there a way to fix this without disabling my ajax?
The only solution I've found is to disable my ajax completely using this script:
$(document).ready(function () {
if ($.browser.msie || $.browser.webkit) {
$("a").attr("data-ajax", "false");
$("a").attr("rel", "external");
var a = $("form");
if (a != null) {
$("form").first().attr("data-ajax", "false");
$("form").first().attr("rel", "external");
}
}
});
You can set any url you want on each of your jquery-mobile pages. Use the data-url attribute on your data-role="page" div like this:
<div id='myJQMPage' data-role="page" data-url="/the/url/i/want")>
</div>
EDIT: The problem is not related to Boxy, I've run into the same issue when I've used JQuery 's load method.
EDIT 2: When I take out link.remove() from inside the ajax callback and place it before ajax load, the problem is no more. Are there restrictions for manipulating elements inside an ajax callback function.
I am using JQuery with Boxy plugin.
When the 'Flag' link on the page is clicked, a Boxy modal pops-up and loads a form via ajax. When the user submits the form, the link (<a> tag) is removed and a new one is created from the ajax response. This mechanism works for, well, 3 times! After the 3rd, the callback function just does not remove/replace/append (tested several variations of manipulation) the element.
The only hint I have is that after the 3rd call, the parent of the link becomes non-selectable. However I can't make anything of this.
Sorry if this is a very trivial issue, I have no experience in client-side programming.
The relevant html is below:
<div class="flag-link">
<img class="flag-img" style="width: 16px; visibility: hidden;" src="/static/images/flag.png" alt=""/>
<a class="unflagged" href="/i/flag/showform/9/1/?next=/users/1/ozgurisil">Flag</a>
</div>
Here is the relevant js code:
$(document).ready(function() {
$('div.flag-link a.unflagged').live('click', function(e){
doFlag(e);
return false;
});
...
});
function doFlag(e) {
var link = $(e.target);
var url = link.attr('href');
Boxy.load(url, {title:'Inappropriate Content', unloadOnHide:true, cache:false, behaviours: function(r) {
$("#flag-form").live("submit", function(){
var post_url = $("#flag-form").attr('action');
boxy = Boxy.get(this);
boxy.hideAndUnload();
$.post(post_url, $("#flag-form").serialize(), function(data){
par = link.parent();
par.append(data);
alert (par.attr('class')); //BECOMES UNDEFINED AT THE 3RD CALL!!
par.children('img.flag-img').css('visibility', 'visible');
link.remove();
});
return false;
});
}});
}
Old and late reply, but.. I found this while googling for my answer, so.. :)
I think this is a problem with the "notmodified" error being thrown, because you return the same Ajax data.
It seems that this is happening even if the "ifModified" option is set to false (which is also the default).
Returning the same Ajax data three times will cause issues for me (jQuery 1.4). Making the data unique (just adding time/random number in the response) removes the problem.
I don't know if this is a browser (Firefox), jQuery or server (Apache) issue though..
I have had the same problem, I could not run javascript after I call boxy. So I put all my javascript code in afterShow:function one of boxy attributes. I can run almost except submit my form. My be my way can give you something.