I'm implementing the invisible recaptcha on rhe login page on my website, following the official guide about how to "Automatically bind the challenge to a button":
https://developers.google.com/recaptcha/docs/invisible#auto_render
My html page is made in this way:
<head>
[...]
<script src="js/login.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
[...]
<button type="submit" class="g-recaptcha btn btn-primary" data-sitekey="[...]" data-callback="checkCaptcha" id="loginSubmit">Login <i class="fas fa-sign-in-alt"></i></button>
[...]
</body>
</html>
while the javascript file is:
function checkCaptcha(token) {
console.log("re-captcha callback invoked.");
login();
}
function login() {
[...]
}
But on the panel page of Google I keep having the message
"We detected that your site is not verifying reCAPTCHA solutions. This is required for the proper use of reCAPTCHA on your site. Please see our developer site for more information."
Could some one help me to understand what a I wrong?
Thank you so much in advice.
When the user solves the captcha puzzle(or clicks on the submit button) at your html page Google recaptcha adds another hidden input value to your <form> named g-recaptcha-response or parse to the given data-callback function. It contains a string value, which you should send back to Google in order to verify the response from the server side.
Without the server-side verification part recaptcha is useless. API request details are as follow,
URL: https://www.google.com/recaptcha/api/siteverify
METHOD: GET / POST(Recommended)
PARAMETERS:
secret (Required. The shared key between your site and reCAPTCHA.)
response (Required. The user response token provided by reCAPTCHA, verifying the user on your site.)
remoteip (Optional. The user's IP address.)
Read the Google's documentation on Verifying the user's response to know more.
Related
I'm trying to log in to a site using the requests module, and can't figure out how the site's login page actually works. Here's the relevant form:
<form class="ui-corner-all" method="POST" id="login" target="_top">
<div id="lift__noticesContainer__"></div>
<label for="username">Username</label><br>
<input value="" id="username" type="text" name="F783713994214KVBZZQ">
<label for="password">Password</label><br>
<input value="" id="password" type="password" name="F7837139942151QISNM">
<p><a data-at="e45a1d" href="/forgot_pwd">Forgot password?</a></p><br>
<button class="btn btn-primary" type="submit" name="F783714094216F0PPFD" value="_">LOGIN</button>
</form>
I think the name of the fields are both randomly generated (F783713994214KVBZZQ and F7837139942151QISNM), so I parse those out, but I'm not sure what to do with that information. There's no login page url specified that I can see. I've tried constructing a payload of the above strings and correct login info and posting it with no result.
When I watch the network activity in chrome's inspector, after I click the login button I can see a post to the site but there's no query string parameters (where I would expect to see the username & password).
Does anyone know what else I should be looking at to figure out where the username and password are going and how to access that via requests?
Full login page html: https://pastebin.com/vP1s9esZ
My code: https://pastebin.com/4jG13WfW
The page includes a login.js in the header, but it's only this:
$(document).ready(function() {
$("#username").focus();
// Centers the div
$("#login").position({
of: window,
at: "center center"
});
});
Thanks in advance for any help!
You're looking for Selenium if you want to automate the login flow. But, if you want to make a request to the site, start with the network monitor. Click login and grab the request that goes to the site. They would either send it as a form or a payload.
Read more of the same at What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab
I want to implement Google login in my site like is done in
Stack Exchange, Stack Overflow and more.
Meaning that when the user choose Login using Google authentication, the site redirects to a page where he can choose which Google account to use and without opening a new window/tab and redirect to the site
Can you help me with links/documentation how to do it
Very important not to open new tab/window.
I'm using this: https://developers.google.com/identity/sign-in/web/build-button
You can see that when you click on the button a new window is open, I wand to prevent this.
Thanks in advance
You could try to switch to the JavaScript client authentication and pass the ux_mode option to the signIn() function options.
ux_mode: "redirect"
Documentation here:
https://developers.google.com/identity/sign-in/web/reference#googleauthsigninoptions
Then you can get the user profile like so:
let googleUser = window.gapi.auth2.getAuthInstance().currentUser.get();
if (googleUser) {
let profile = googleUser.getBasicProfile();
if (profile) {
this.state.google.firstname = profile.getGivenName();
this.state.google.lastname = profile.getFamilyName();
this.state.google.email = profile.getEmail();
}
}
This is all documented here and there:
https://developers.google.com/identity/sign-in/web/people
Just add data-ux_mode="redirect" to the sign-in div from the Google's example (or to the .render call if you're rendering the login-button programmatically)
<div class="g-signin2" data-onsuccess="onSignIn" data-ux_mode="redirect"></div>
GAPI is now being discontinued, and Google is transitioning to Google Identity Services (GIS). The new method is similar to that which was suggested by #AlexfromJitbit, with some small modifications:
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-ux_mode="redirect"
data-login_uri="https://www.example.com/your_login_endpoint">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
</html>
This code is pulled from the new GIS example, and is recommended for all new applications as the old API will be retired as of 31 March 2023.
I got specs that need a little work before I can be sure it can be implemented. I'd appreciate to hear comments and suggestions on the following scenario:
I need a web software where users log in. All users have a user account AND can have 0-3 secondary user accounts, which they can use via the main website while authenticated. The secondary user accounts are controlled by a third-party javascript library, but I can control the usernames and passwords that are stored in a database.
Goal is to enable users to not have to authenticate several times, only using one user account and the ohter ones should work automatically via script.
So, is there a viable, secure and proper way to accomplish this? I know playing with user names and passwords in script is a security issue in itself but hopefully I can find the next best thing if this can't be done properly. I will use Asp.Net MVC as a platform, with all calls made using ajax, so the software will look and feel like a single page application. The underlying technology is irrelevant though, any server side technology can be used here.
There are some options to play with:
Basically I can use any user name and password for authentication, it's just a matter of which fields in which tables to compare
I can force all of the user accounts' passwords to be the same so user doesn't have to remember/use many passwords
I can retrieve the secondary user names from db in the login call so the website will have access to secondary user names, but obviously I can't do that to passwords as they are hashed/salted in the db
Here's one thought I've been toying around with:
First show a login page. Authentication is done via ajax and credentials are saved on the login form, which gets hidden when user logs in. In the success callback event of the login call we can show the main content that the ajax call can return (this could be something like the main page of the authenticated users. Since the original credential fields are still on the page they can be accessed via script and used for the secondary system credentials.
However, I'm not convinced this is a secure way to handle the secondary system logins, even though I could have https throughout the site. I just don't know what the actual security issue here would be. Comments, experts? Better ways to accomplish the same?
The login page and main structure could look like this (a VERY simple example):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="/Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
function VerifyUser(name, pass, remember, container) {
$.ajax({
type: 'POST',
contentType: 'application/json; charset=UTF-8',
url: 'Account/VerifyUser',
data: JSON.stringify({ "userid": name, "password": pass }),
processData: false,
success: function (response) {
if (response.Success) {
// Here I could stash the password somewhere if needed.
// It's not visible in the source code but it is accessible via jquery
$('#secondarypass').val(pass);
// Here I can show the html data that the ajax call could return, or
// send out another ajax call to retrieve the actual content separately.
//Show here data that was returned by ajax call in response object. This could be a main page etc
$("#maincontainer").show();
$("#maincontainer").html(response.Message);
$("#logincontainer").hide();
}
},
error: function (a, b, c) {
$("#maincontainer").show();
$("#maincontainer").html(a.responseText);
}
});
return false;
}
</script>
</head>
<body>
<div class="page">
<input id="secondarypass" type="password" />
<div id="logincontainer">
<input id="UserName" name="UserName" type="text" value="" />
<input id="Password" name="Password" type="password" />
<button onclick="javascript:VerifyUser($('#UserName').val(), $('#Password').val());">Log In</button>
</div>
<div id="message"></div>
<div id="maincontainer">
<!-- this is where the main content of the software would be -->
</div>
</div>
</body>
</html>
And the ajax call could return something like this
<script type="text/javascript" src="/Scripts/secondarysystem.js"></script>
<script type="text/javascript">
function SecondaryLogin() {
var data = {
'username': 'mysecondaryusername',
'pass': $("#secondarypass").val() //NOTE here I could access the password-stash I set up earlier
};
var system = new SecondarySystem(); //This could be an object from the secondarysystem.js library
system.LogIn(data);
// this could have a onsuccessfullogin callback event, where we could populate some secondary system specific data to the div below
}
</script>
<div id="secondarycontainer">
</div>
In this setup a page refresh would cause problems, but I can disable f5 (or replace it with reloading the right content) and at least add a dialog saying "refresh will force you to re-login, sure to leave this page?" etc.
The thought you 've been toying around , sounds good, and it has been practiced by many of us. there are few problems you mentioned you dont want to face, here are some points you can keep in mind if you really gonna make it a single page application.
1.Refresh F5
If refresh is your problem you can probably use localstorage so your username and password are not lost when page refresh.
Is it secure ?
I think you can store your password variables encrypted so you only decrypt it when you need to authenticate the user. For encryption you can refer to https://sourceforge.net/projects/pidcrypt/ (URL update).
I'm trying to do Recaptcha in my page. I'm checking a demo with the localhost. But, I'm keep getting error as invalid-request-cookie always when checking. I'm following Displaying recaptcha without plugin and Verifying recaptcha without plugin.
Here is my code
<html>
<body>
<form method="post" action="http://www.google.com/recaptcha/api/verify">
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=my_public_key">
<!-- I used my public key -->
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=my_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
<input type="hidden" name="privatekey" value="my_private_key">
<!-- I used my private key -->
<input type="submit" value="Ok"/>
</form>
</body>
</html>
In google, I saw that, invalid-request-cookie means The challenge parameter of the verify script was incorrect. But It seems to be correct. Is it right or is there any other mistakes? Someone help please
After reading this, I realized that the author of one of our forms was using a public key for a different domain we also have. So make sure you're using the correct public key.
I am using Google recaptcha in an ASP.Net environment. Here is my code snippet:
in head tag:
<script src='https://www.google.com/recaptcha/api.js'></script>
HTML:
<div class="g-recaptcha" data-sitekey="My***PUBLIC***SiteKeyBlahBlah"></div>
That's it! Google handles the rest of the magic. You can check the length of the grecaptcha.getResponse() function's return variable to see if the user clicked it. For example:
if (grecaptcha.getResponse().length == 0)
//They didn't do it
else
//They either did it or spoofed your page with some bogus HTML to make it look like they did - they can do this by editing the source of the page and inserting text in a certain spot. View your page source after loading in a browser to see what I mean.
To verify that they didn't just enter random text - and that the value of grecaptcha.getResponse() is a valid response from Google, just call their web service with your site key - and the response, itself. I'm doing it from the code-behind with C# like so:
WebRequest CheckCaptcha;
CheckCaptcha = WebRequest.Create(String.Format([Google's Web Service URL],
[Your ***Private*** Site Key],
[The value of grecaptcha.getResponse()],
[IP address]));
Stream strm = CheckCaptcha.GetResponse().GetResponseStream();
StreamReader sr = new StreamReader(strm);
string everything = sr.ReadToEnd();
JavaScriptSerializer JS = new JavaScriptSerializer();
CaptchaResponse GoogleResponse = JS.Deserialize<CaptchaResponse>(everything);
Next, to evaluate Google's response:
if (GoogleResponse.success.ToUpper() != "TRUE")
//Invalid - they are up to no good!
else
//Valid - you're good to go!
Calling their web service is probably slightly different if you're doing it from the client side, but it's the same principle. I hope this helps.
I am trying to create an html file that open a web page in default browser and login,
the page is in company intranet, and is .aspx strctured.
The page contain user, pwd field and a link to complete login procedure.
the related source row is
<a id="lnkAccedi" href="javascript:__doPostBack('lnkAccedi','')"
style="background-color:Transparent;font-family:Arial;">Accedi...</a>
and the simple code i've already tested is
<script language="JavaScript">
window.open("intranet_web_page","_self");
</script>
where intranet_web_page is the URL of my login page.
I tried to call the function defined in webpage source as "__doPostBack('lnkAccedi','');" in the script tag of my html file, but not work at all.
How can i do that?
Thanks in advance.
Actually I'm not an ASP user, but I believe that __doPostBack is a user defined function, you should defined it as a javascript function under the script tag.
And one point, I don't think that __doPostBack is need a parameter.
So if you want to create redirecting the user after authorized it without change the url, you can use jquery post method to post your data, then retrieve the server response under callback function to detect that user was authorized or not
I'll give you sample code, but actually I'm not tested it yet.
In HTML :
<form name="loginform" action="test.asp" method="POST">
username : <input type="text" name="username" placeholder="please put your username here." /><br>
password : <input type="password" name="password" placeholder="your password here" /><br/>
<a id="lnkAccedi" href="javascript:__doPostBack" style="background-color:Transparent;font-family:Arial;">Accedi...</a>
</form>
On script:
function __doPostBack() {
var usernamestr = document.loginform.username.value;
var passwordstr = document.loginform.password.value;
$.post("authorize.asp", { username: usernamestr , password: passwordstr },
function(data) {
if(data = "success") {
window.open('newwindow.asp','_self');
} else {
alert("Username or password was wrong");
}
});
}
Last, suggestion :
I think you don't have to control login process in the front end, because it's very dangerous, anyone can recreate your code and hack to your server, because it is client side. You should give the process control to the back end server.
Do NOT do any kind of authentication with JavaScript!!!
Do your login authentication on the ASP code-behind and then pass a success condition where you can use
response.write
to open a new window. I do a similar thing opening a messenger window. On login success I have the following code:
Response.Write("<script> var win =window.open('chat.aspx','mywindow','width=700,height=450,left=800,top=10,location=1'); win.close();</script>") //closes the window if it is already open
Response.Write("<script>window.open('chat.aspx','mywindow','width=700,height=450,left=800,top=10,location=1')</script>") //open the window
Again, that is how I call the script from the code-behind.
Hopefully that points you in the right direction!