We are planning to use recaptcha-V3 on our website. To try this out first and do a phased released - one suggestion was just to have the front-end integration (without backend integration for site verification) and then monitor using the reCaptcha console for unusual activities. If we find unusual activities, we'll then turn on an extra verification on the login page (controlled by a switch).
So the key question I have got is - Can we integrate recaptchaV3 only on the front-end and not on the backend - and use the Admin console to monitor activities?
Yes you can do that. without any backend integration it can be done but that will not be a good way to implement this . The secret key and as well as the request token will be exposed in client browser.
Try this code :
<script src="http://www.google.com/recaptcha/api.js?render={recaptchaSiteKey}"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('recaptchaSiteKey', {action: 'homepage'}).then(function(token) {
var recaptchaSecret={recaptchaSecret};
var responseString = "https://www.google.com/recaptcha/api/siteverify?secret="+recaptchaSecret+"&response="+token;
$.ajax({
url:responseString
//your code
});
});
});
</script>
Related
In the reCAPTCHA v3 docs, it says
reCAPTCHA works best when it has the most context about interactions with your site, which comes from seeing both legitimate and abusive behavior. For this reason, we recommend including reCAPTCHA verification on forms or actions as well as in the background of pages for analytics.
How do we run it in the background of pages?
Let's say I have a React app that handles multiple web pages, and for one of my web pages, it is a sign up form where I want to get a risk score when users sign up. When the docs say to run reCAPTCHA in the background on other pages, does that mean it's running on other pages as long as <script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script> is in the header? Or do we need to call grecaptcha.execute(...) on all the other pages, and not just the signup page?
As long as you have the script attached, it will run in the background of pages. You can see that it's running if the reCAPTCHA banner/icon is showing on the page (usually bottom right corner). grecaptcha.execute(...) should be run on a specific action, like when you click a button to sign up for example.
#jojochuu, your answer is exactly right. Thanks for that.
I found another reason to run grecaptcha.execute. Logging. Loading api.js (the second line in the code below) is sufficient to activate recaptcha. It displays the flyout recptcha button.
I chose to add the second script that does call grecaptcha and gets the token. Then I use the token to get the score and any error codes from google. I log that data along with the visitor's IP address and a timestamp so I can see how the score changes over time. I can then compare my logs with access logs and maybe spot some IPs I want to ban. Mostly, I just want to know how score changes. I'll disable the logging by removing the second script block.
This is the best tutorial I found. Combining it with the google docs was enough to learn how to do recaptcha right.
<input type="hidden" id="visitor_ip" value="<?=$visitor_ip; ?>">
<script src="https://www.google.com/recaptcha/api.js?render=public-site-key" async defer></script>
<script>
// This correctly gets the token, but doesn't verify the user response (action).
function execGrecaptcha() {
grecaptcha.ready(function() {
grecaptcha.execute('<?=$settings->recap_public; ?>', {action: '<?=$actionName; ?>'}).then(function(token) {
logRecaptchaResults(token);
});
});
}
// Run after page loaded
window.onload=execGrecaptcha;
// Send token/ip to server for logging via ajax
function logRecaptchaResults(token) {
var vip=document.getElementById('visitor_ip');
$.ajax({
url: "https://<?=HOST_NAME_DOT; ?>domain.com/ajax/logit.php",
type: "get", //send it through get method
data: {
"token": token,
"visitor_ip": vip.value
},
});
}
</script>
I've integrated reCAPTCHA v3 in one of my forms. In onload, there's a token produced and google captcha logo in the bottom right corner. But when I submit the form, in console there is an error shown, "Error: No reCAPTCHA clients exist". Also, it seems, no data is fetched by "g-recaptcha-response" and $_POST["g-recaptcha-response"] remains empty.
Here is the sample code:
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
It doesn't produce any "g-recaptcha-response" when the form is submitted.
I don't know much about google reCaptcha. I've followed the documentation provided by them and used a site and a secret key in the proper way.
Can anybody please tell me where might be the problem and what is the possible solution?
I believe this error occurs when the reCaptcha api.js loads, but your container is not present on the page yet (at least for v2). I had this error occur in a React app when I navigated to the page rather than loading it as the first on. Instead of using render=explicit and using a global namespace onLoadCallback, I was able to resolve it by rendering the captcha element manually.
Instead of creating a <div class="g-recaptcha"></div>, give the container div an id only (<div id="recaptcha-container"></div>) and render it in your JS code (e.g. in componentDidMount for a React app):
grecaptcha.ready(function() {
grecaptcha.render("recaptcha-container", {
"sitekey": "your-site-key"
});
});
Have you tried loading the script before trying to send the request?
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
When I came across this problem with reCAPTCHA v3, it was because I didn't pass it the correct site key.
This also happens in Recaptcha 2 before user interacts with it. So, I have a submit button that triggers a JS function that checks the value of recaptcha. To solve the no client exists problem, I did:
try {
data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
data["reCaptcha"] = "";
}
The data object then gets sent to a back-end script that validates the recaptcha. The back-end also checks for the field being empty.
I had this problem because I was calling grecaptcha.reset(); when there wasn't any Recaptcha active on the site
grecaptcha.reset();
recaptcha__en.js:507 Uncaught Error: No reCAPTCHA clients exist.
at MX (recaptcha__en.js:507)
at Object.Zn [as reset] (recaptcha__en.js:514)
at <anonymous>:1:13
I was using React and only rendering my captcha container sometimes. Fixed by hiding the captcha button instead of not rendering it.
In my case grecaptcha.reset(); was present from previous code snippet, and I was programmatically invoking it.
As the captcha verification is going on the fly every time. Resetting wasn't required.
After eliminating this grecaptcha.reset(); my code works perfectly fine.
Maybe this hint can help someone.
We received this because we have a second environment with another domain and forgot to add this domain to the reCaptcha admin site. The solution was to add the new domain to the settings.
The steps are
Open www.google/recaptcha/admin/site
Select the site you're working on
Click on the settings gear
Add the domain in its respective section
I recently implemented the security of my Parse app thinking that I could use the master key on my server (express not cloud code) to securely bypass my security implementations for admin/server level functions.
I'm using "parse": "^1.5.0",
in my package.json.
Right now in each of my express modules I have:
var Parse = require('parse').Parse;
Parse.initialize("Application ID", "Javascript Key", "Master Key");
Everything works fine without CLPs activated but with CLPs I can't do any read/write of the data with the server. I understand that I can move this to Cloud code and get it to work however I need to use a number of libraries in my code that Parse does not support and transporting all of the code to cloud code would be very tough.
What am I doing wrong?
Here's what worked for me.
/////////////////////////////////this is the top of the JS page/module/////
'use strict';
var Parse = require('parse/node');
Parse.initialize('app-id','js-key','master-key');
exports.create = function(req, res) {
Parse.Cloud.useMasterKey();
//now when you do a parse query or action you can bypass your security settings.
};
Is there an API that allows access to Google's Mobile Friendly Test which can be seen at https://www.google.com/webmasters/tools/mobile-friendly/?
If you can't find one by googling, it probably doesn't exist.
A hacky solution would be to create a process with PhantomJS that inputs the url, submits it, and dirty-checks the dom for results.
PhantomJS is a headless WebKit scriptable with a JavaScript API.
However, if you abuse this, there is a chance that google will blacklist your ip address. Light use should be fine. Also be aware that google can change their dom structure or class names at any time, so don't be surprised if your tool suddenly breaks.
Here is some rough, untested code...
var url = 'https://www.google.com/webmasters/tools/mobile-friendly/';
page.open(url, function (status) {
// set the url
document.querySelector('input.jfk-textinput').value = "http://thesite.com";
document.querySelector('form').submit();
// check for results once in a while
setInterval(function(){
var results = getResults(); // TODO create getResults
if(results){
//TODO save the results
phantom.exit();
}
}, 1000);
});
There is an option in pagespeed api
https://www.googleapis.com/pagespeedonline/v3beta1/mobileReady?url={url}&key={api key}
key can be obtained form google cloud platform.
Acquire a PageSpeed Insights API KEY in https://console.developers.google.com/apis/api/pagespeedonline-json.googleapis.com/overview?project=citric-program-395&hl=pt-br&duration=P30D and create a credentials, follow the google's instructions.
In C# (6.0) and .NET 4.5.2, I did some like this:
(add in your project a reference for Newtonsoft.Json.)
String yourURL = "https://www.google.com.br";
HttpClient client = new HttpClient();
client.BaseAddress = new Uri("https://www.googleapis.com");
client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
var response = client.GetAsync($"/pagespeedonline/v3beta1/mobileReady?url={yourURL }&key=AIzaSyArsacdp79HPFfRZRvXaiLEjCD1LtDm3ww").Result;
string json = response.Content.ReadAsStringAsync().Result;
JObject obj = JObject.Parse(json);
bool isMobileFriendly = obj.Value<JObject>("ruleGroups").Value<JObject>("USABILITY").Value<bool>("pass");
There is an API (Beta) for the Mobile Friendly-Test. (Release Date: 31.01.2017).
The API test outputs has three statuses:
MOBILE_FRIENDLY_TEST_RESULT_UNSPECIFIED Internal error when running this test. Please try running the test again.
MOBILE_FRIENDLY The page is mobile friendly.
3.NOT_MOBILE_FRIENDLY The page is not mobile friendly.
Here are more informations: https://developers.google.com/webmaster-tools/search-console-api/reference/rest/v1/urlTestingTools.mobileFriendlyTest/run
I have an task to implement an chat based application to access private data available at server using web service api call.Show all available users from web server and to chat with those persons.Is't possible with titanium development to support on iPhone/Android chat application. If possible let me guide to implement the same.
Yes, of course it's possible. And there are a million ways to do this, your question is not very clear.
If its totally web services based then just use this.
Heres a quick example of posting to a webservice and sending a JSON object:
var getChatMessages = Ti.Network.createHTTPClient({
onload : function(e) {
var doSomethignWithThis = this.responseText;
},
onerror : function(e) {
Ti.API.info(this.responseText);
Ti.API.info('SelectActivityStepsByKeyList webservice failed with message : ' + e.error);
}
});
getChatMessages.open('POST', 'http://yourchatserver/GetChats');
getChatMessages.setRequestHeader("Content-Type", "application/json");
getChatMessages.send({"message" : "How is everyone today?", "user" : "me#me.com});
This is not difficult with titanium, the hard part is on the server side.
Here is an example project that accomplishes chat through the use of the socket.io library. This may be a better approach for you. The link has a video of how it works as well as the full source code.