I'm trying to implement firebase on a Kirby website (a CMS run on PHP) so visitors can mark subpages to show up as links on the landing page.
To do this, I've constructed a form where a user adds their name when on the subpage to highlight it. The form doesn't submit when the button is clicked, but instead uses JS to add a document to Firebase (where it can be approved or deleted).
I'd like to prevent abuse and am interested in adding Recaptcha as a step when the visitor "submits" the page.
A simplified version of my code looks like this.
HTML:
<form id="add-item" action="?" method="POST">
<label for="f-name">Submitted by:</label>
<input type="text" id="f-name" name="f-name" placeholder="your name">
<button type="submit">Submit</button>
</form>
JS:
document.querySelector("#add").addEventListener("click", function(e){
const fName = document.querySelector('#f-name').value;
tableRef.get().then(function(querySnapshot) {
var uid = Date.now().toString(36) + Math.random().toString(36).substr(2);
if(fName === true){
tableRef.doc('item-'+uid).set({
contributor: fName,
})
}
});
e.preventDefault();
return false;
})
I've found answers to enable Recaptcha with Firebase that use Firebase hosting, or as a method for sign in:
Using recaptcha with Firebase
How to use it with Angular or React:
Google/Firebase reCaptcha not working with angular
Firebase: Invisible reCaptcha does not work in React JS
I am wondering how this can be done using just HTML (no app framework), or with PHP, and without a login?
I am very amateur web developer, so really appreciate any insights on this! I apologize in advance if this is an obvious question. Thank you!
here’s the code how you can add recaptcha but I’ll suggest you to use Php in the backend to verify the status :
First add this in head tag
<script src='https://www.google.com/recaptcha/api.js'></script>
Then add the site key and block for error message
<div class="g-recaptcha" id="rcaptcha" data-sitekey="site key"></div>
<span id="captchaStatus" style="color:red" /></span>
Then add script tag :
<script>
function checkCaptcha(form)
{
var v = grecaptcha.getResponse();
if(v.length == 0)
{
document.getElementById('captchaStatus').innerHTML="Captcha code is empty";
return false;
}
else
{
document.getElementById('captchaStatus').innerHTML="Captcha completed";
return true;
}
}
</script>
Related
So I've inserted the Google Captcha validation script to my webform using the official documentation which can be found here: https://developers.google.com/recaptcha/docs/display#render_param
Despite me following the documentation to the letter, why am I still able to submit a form without checking the Captcha box? Forgive my arrogance by I thought the whole idea of this CAPTCHA service was that the user would not be able to submit a form without checking the CAPTCHA box so the webmaster can weed out the bots?
The end result looks fantastic, I have the CAPTCHA box on my website but right now, you may as well ignore it.
I don't see the point of Google investing time in writing documentation for this script when you can still use a form without the need to check the box. They may as well just not write said documentation because the result is still the same: scratching my head and confused.
Below is the code with only the relevant part of my form. Can anyone shed any light on what I'm missing here, then whoever can help should definitely consider a career writing coding help documentation for Google because clearly the individuals they employ at the moment - well - need I saw more?
Many thanks and all the best,
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="<PHP File Directory>" enctype="multipart/form-data" method="POST">
<div class="g-recaptcha" data-sitekey="<key>"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
I use this jquery function to check whether captcha is clicked or not before submission. Otherwise you have to validate the same after form submission. You will have to apply id to the form. Also place a div with class 'msg-error' just above recapthca div in the form.
// to enable recaptcha click validation before form submission
var form = $('#contact-form');
form.submit(function(event){
event.preventDefault();
var $captcha = $('#g-recaptcha-footer' ),
response = grecaptcha.getResponse();
console.log(response);
if (response.length === 0) { console.log("captcha not clicked)");
$( '.msg-error').html( "<div class='alert alert-danger mb-0 pb-0' role='alert'> reCAPTCHA is mandatory!</div>" );
if( !$captcha.hasClass( "error" ) ){
$captcha.addClass( "error" );
return false;
}
} else {
$( '.msg-error' ).text('');
$captcha.removeClass( "error" );
form.unbind('submit').submit();
}
});
I would like to do a web site using Aptana IDE and xampp, and it has a few pages. Index page is where all users which does not log in the system and home is where all users which does log in the system must visit. I am very new to develop web site. Because of that I am changing a lot of and vital things during the development. An here my problem is began.
I have created log and sign pages separately using HTML5, CSS, Javascript, JQuery and Php. To achieve more quality service, decided to use also Ajax. These pages works correctly, log page can control validation with jquery
$('#login-form').validate({
//validation rules, messages and submitHandler(ajax code) goes here});
and with using ajax, it can communicate with php file and mysql database so can check whether the user is exist or not.
$.ajax({
type: 'POST',
url: 'log.php',
data: strAjax, //username and password
success: function(data) { //data is echoing from php file either as true or false
if(data) {
window.location.href = "home.php";
}
else {
//some error messages
}
}
});
Sign systems works like it and correctly. But I do not like the design of these pages because of emptiness. So in index file when user click log in button, the log file is showing inside a div with jquery load function.
$(".jumbotron").load("login.html").hide().fadeIn(1500).delay(5000);
Same thing for sign system as well. For good looking, I am satisfied but...
The whole system messed up. (I want to cry) I have to think before start to coding web site, very bad I know but this is my first complete web site. How can achieve a system working properly in this way? I have searched some pages on the internet and they said that the ajax can not work across the pages or something like that. I am also new to stack overflow too, so some important thing will be forgotten. I can edit if you want more information.
Thank You and Regards...
EDIT 1:
<div class="jumbotron">
<div class="container">
<h1>//sometext</h1>
<p>//some text</p>
</div>
</div>
Firstly this is showing on the screen. And when the user press login button, jquery load function running which is above. And loads login.html which works properly by itself.
<form id="login-form" class="text-left">
<div class="form-group">
<label for="lg_username" class="sr-only">Username</label>
<input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
data-container="body" data-toggle="popover" data-placement="left" data-content=""
value="">
</div>
<div class="form-group">
<label for="lg_password" class="sr-only">Password</label>
<input type="password" class="form-control" id="lg_password" name="password" placeholder="password"
data-container="body" data-toggle="popover" data-placement="left" data-content="">
</div>
<div class="form-group login-group-checkbox">
<input type="checkbox" id="lg_remember" name="lg_remember">
<label for="lg_remember">remember</label>
</div>
<button type="submit" class="login-button">Submit</button>
</form>
The jquery validation works right. My rules are valid. If the inputs are ok upon my rules, it send me to home.php. I think ajax code can not work.
submitHandler: function() {
var username = $('#lg_username').val();
var password = $('#lg_password').val();
var checkbox = $('#lg_remember').is(":checked");
var strAjax = "username=" + username + "&password=" + password + "&checkbox=" + checkbox;
$.ajax({
type: 'POST',
url: 'logDeneme.php',
data: strAjax,
cache: false,
success: function(data) {
if(data) {
window.location.href = "home.php";
}
else {
//error message. but when this code run, always send to home page.
}
}
});
return false;
}
This parts all works. It does not works inside index.php. My question is why and how to handle this!
Problem 1
Your form is submitting via a GET request because the JS is not getting called (see #2 below) and the HTML is likely declared like this:
<form action='log.php'>
[...]
</form>
You must specify method='post' to submit POST data.
Problem 2
Unless you're using a jQuery plugin there is no .validate event for forms. You want to use .submit.
Finally, make sure all your javascript is in $(document).ready(function() { ... }); or it won't execute at the right time. Look in the Firefox/Chrome developer console, it's a lifesaver for debugging.
Hello I am trying to make a simple form to test if the the textfield is equal to a variable, variable value example: ( "MyPassword123" ).
Then if it the textfield is the same as the variable than go to html document, example: ( "nextPage.html" ).
however if its NOT equal to variable then go to html document, example: ( "index.html" ).
the reason of the password is to restrict people that don't play on my game server form nextPage.html, it will have just like news feeds and game information on it, Its nothing like an profile or anything I just want to give out a password to only allow people that play on the server to view a page that's all.
I have tried many times to get this to work in javascript and I am sure its achievable for this simple task using if/else statements and validate the name of the text field but I am no good at java nor javascript.
Form Code:
<form name="accessForm">
Password: <input type="text" name="inputCode"/>
<input type="submit" value="Submit"/>
</form>
If someone could post some code of javascript to make this work, you would so awesome.
NOTE:
Not sure if it matters much but I am using HTML5 and CSS3, and for
Hosting I will be using GoogleDrive, so I cant use MySQL, it needs to
be javascript. I have not tested Drive to see if it allows PHP but I
know Javascript works fine.
You need not to use HTML form for it
<script>
function checkIt()
{
if(document.getElementById("inputCode").value=="MyPassword123")
location.href="nextPage.html";
else
location.href="index.html";
}
</script>
Password: <input id="inputCode" type="text"/>
<input type="button" value="Submit" onclick="checkIt()"/>
Like #Wes Foster mentioned, you should do password validation on the backend, but to compare a form input to a variable in vanilla JS you could do this:
var password = "magicWord";
var form = document.getElementById("formName");
form.onsubmit = function(e) {
e.preventDefault();
var data = document.forms.accessForm.inputCode.value;
if (data == password) location.href = "success.html";
else location.href = "fail.html";
};
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!