I am using Google reCaptcha v3. i am trying to implement it onto my aspx page.When i first load my page i can get a token back. However when i click on a button to process my page it comes back with a "No reCaptcha clients exits".
I did do a google search for this and nothing has came up to solve my issue. How can i verify a human or bot interaction?
this is what i have on my aspx page:
<div id="RegistrationForm">
<input type="text" id="FirstName" runat="server" value="" valtype="required" maxlength="150" />
<input type="text" id="LastName" runat="server" value="" valtype="required" maxlength="150" />
<input runat="server" id="Email" type="text" value="" valtype="required;regex:email" maxlength="350"/>
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"/> <br />
<div class="g-recaptcha" data-sitekey="SiteKey" data-callback="submit"></div>
<input id="btnProcessOrder" type="button" name="ProcessOrder" onclick="confirmed = false;capt();" value="Save" />
</div>
this is What i tried
<script src="https://www.google.com/recaptcha/api.js?render=SiteKey"></script>
<script type="text/javascript">
//so when i load the page it gets my token and i can assign the value to g-recaptcha-response
grecaptcha.ready(function() {
grecaptcha.execute('SiteKey', { action: 'homepage' }).then(function (token) {
console.log(token);
document.getElementById('g-recaptcha-response').value = token;
});
});
Then when i try to verify the response as follows i get the error or it just does nothing:
function capt() {
var response = grecaptcha.getResponse();
$.ajax({
type: "POST",
url: 'https://www.google.com/recaptcha/api/siteverify',
data: {"secret" : "SecretKey", "response" : response, "remoteip":"localhost"},
contentType: 'application/x-www-form-urlencoded',
success: function(data) { console.log(data); }
});// i call this function on my button
}
</script>
Most of the code i found is for php and i can not use that.How do i get this to work correctly?.
Your response is highly appreciated
According to the above comments:
You create a render function as following
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
});
Then to get the response from the captcha you create a variable which will store the data as such:
var verifyCallBack = function(response) {
console.log(response);
};
Here we already have a same type of question :
How to implement reCaptcha V3 in ASP.NET
Please check these answers .
Also you can check this demo project for reference .https://github.com/NIHAR-SARKAR/GoogleRecaptchav3-example-In-asp.net
Related
This is my JS file:-
$(document).ready(function(){
$('form').on('submit', function(){
var email = $("form input[type=text][name=emails]").val();
var todo = {email: email.val(),
pass:dat.val()};
$.ajax({
type: 'POST',
url: '/project',
data: todo,
success: function(data){
//do something with the data via front-end framework
location.reload();
}
});
return false;
});
});
This is my html document:-
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="/assests/todo-list.js"></script>
<body>
<form>
<div class="container">
<label><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="emails" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</body>
</head>
</html>
I want that when i click submit button value from both text boxes gets saved in my database(using Mlab),for that i am using a json file to fire post request to the server.
My main post request handler:-
app.post('/project',parser,function(req,res)
{
var register=Todo(req.body).save(function(err,data)
{
if(err) throw err
res.json(data);
});
});
EDIT:-
I removed my Javascript file and now i am directly posting the form using and i am able to save my email address but not the password.
This is my main code now :-
app.post('/views/register',parser,function(req,res)
{
var data={
email:req.body.emails,
password:req.body.passcode
};
var send=Todo(data).save(function(err)
{
if(err) throw err
res.render('login')
})
});
If I understand your question right, you're missing the contentType param.
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
...
then try again.
I was not following the correct schema for the database when creating the object
var data={
email:req.body.emails,
password:req.body.passcode
};
The property name was pass and i was using password that's why it was not inserting the password.
var data={
email:req.body.emails,
pass:req.body.passcode
};
I have a basic script that is as follows:
$(".submit").click(function(){
var fd = new FormData();
fd.append('username', 'Bob');
$.ajax({
url: '/signup',
type: 'post',
data: fd,
processData: false,
contentType: false,
success: function (data) {
console.log("Success: ", data);
}
});
});
When the request hits my server, I receive a req.body of {} (empty) and there is nothing in req that points to data being sent. Whats going on here? How can I send data with FormData?
I wanted to test getting basic preset data from FormData and was unsuccessful. The values console logged in Chrome show an empty formData object, with only its constructor and the available 'append' method.
I am using jQuery v 2.1.4 and HTML5 and have confirmed that window.FormData is a valid object in Google Chrome.
My goal is to have a form that a user can enter an email, password, avatar, and a profile background image with the following form:
<form id="msform" enctype="multipart/form-data" name="msform">
<!-- Progress Bar -->
<ul id="progressbar">
<li class="active">Basic Information</li>
<li>Profile Customization</li>
</ul>
<!-- Step One -->
<fieldset>
<h2 class="title">Basic Information</h2>
<input type="text" name="username" placeholder="Username" />
<input type="text" name="password" placeholder="Password" />
Avatar Image <input type='file' id='avatarImage' accept="image/*" name='avatarImage'>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<!-- Step Two -->
<fieldset>
<h2 class="title">Profile Customization</h2>
<select id="dropdown" name="profileColor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
Background Photo <input type='file' id='bgPhoto' accept="image/*" name='bgPhoto'> </div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
Whats going on with FormData, it seems like a valid object, but I'm unable to append anything to it. I've looked, and it appears that others have seen an empty object in their console, but the data 'automagically(?)' appears on their server? My first code block is basically a copy for the docs and I'm having trouble with it. Would and CORS issues or CDN errors be the case? Something maybe not able to access as it should? No errors print in the log, only a blank object on my post request.
Thanks for the help!
If you are using Express as the backend, body-parser does not handle multipart/form-data, and you are referred to using multiparty instead. You can integrate Express with multiparty like so :
var express = require('express');
var multiparty = require('multiparty');
var app = express();
var data = new multiparty.Form();
app.post('/signup', function(req, res) {
data.parse(req, function(err, fields, files) {
if(err) throw err;
Object.keys(fields).forEach(function(name) {
console.log('got field named : ' + name + ', value : ' + fields[name]);
});
Object.keys(files).forEach(function(name) {
console.log('got file named : ' + name);
});
});
});
Do include event.preventDefault() in your click event handler
$(".submit").click(function(e){
e.preventDefault();
var fd = new FormData();
fd.append('username', 'Bob');
...
});
You aren't preventing the default form submit event and neither are you catching a submit by keyboard if user hits enter.
Try:
$("#msform").submit(function(e){
e.preventDefault();
var fd = new FormData();
fd.append('username', 'Bob');
$.ajax({
url: '/signup',
type: 'post',
data: fd,
processData: false,
contentType: false,
success: function (data) {
console.log("Success: ", data);
}
});
});
If you aren't sending files I would suggest using the simpler approach of removing the processData and contentType options and using $(this).serialize() for the data value
I'm new in PHP/jquery
I would like to ask how to send json data from a form field like (name, age, etc) with ajax in a json format. Sadly I can't found any relevant information about this it's even possible to do it dynamically? Google searches only gives back answers like build up the data manually. like: name: X Y, age: 32, and so on.
Is there anyway to do that?
Thanks for the help!
Edit:
<form action="test.php" method="post">
Name: <input type="text" name="name"><br>
Age: <input type="text" name="email"><br>
FavColor: <input type="text" name="favc"><br>
<input type="submit">
</form>
here is a simple one
here is my test.php for testing only
<?php
// this is just a test
//send back to the ajax request the request
echo json_encode($_POST);
here is my index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form" action="" method="post">
Name: <input type="text" name="name"><br>
Age: <input type="text" name="email"><br>
FavColor: <input type="text" name="favc"><br>
<input id="submit" type="button" name="submit" value="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// click on button submit
$("#submit").on('click', function(){
// send ajax
$.ajax({
url: 'test.php', // url where to submit the request
type : "POST", // type of action POST || GET
dataType : 'json', // data type
data : $("#form").serialize(), // post data || get data
success : function(result) {
// you can see the result from the console
// tab of the developer tools
console.log(result);
},
error: function(xhr, resp, text) {
console.log(xhr, resp, text);
}
})
});
});
</script>
</body>
</html>
Both file are place in the same directory
The accepted answer here indeed makes a json from a form, but the json contents is really a string with url-encoded contents.
To make a more realistic json POST, use some solution from Serialize form data to JSON to make formToJson function and add contentType: 'application/json;charset=UTF-8' to the jQuery ajax call parameters.
$.ajax({
url: 'test.php',
type: "POST",
dataType: 'json',
data: formToJson($("form")),
contentType: 'application/json;charset=UTF-8',
...
})
You can use serialize() like this:
$.ajax({
cache: false,
url: 'test.php',
data: $('form').serialize(),
datatype: 'json',
success: function(data) {
}
});
Why use JQuery?
Javascript provides FormData api and fetch to perform this easily.
var form = document.querySelector('form');
form.onsubmit = function(event){
var formData = new FormData(form);
fetch("/test.php",
{
body: formData,
method: "post"
}).then(…);
//Dont submit the form.
return false;
}
Reference:
https://metamug.com/article/html5/ajax-form-submit.html#submit-form-with-fetch
Sending data from formfields back to the server (php) is usualy done by the POST method which can be found back in the superglobal array $_POST inside PHP. There is no need to transform it to JSON before you send it to the server. Little example:
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo '<pre>';
print_r($_POST);
}
?>
<form action="" method="post">
<input type="text" name="email" value="joe#gmail.com" />
<button type="submit">Send!</button>
With AJAX you are able to do exactly the same thing, only without page refresh.
I have searched the whole internet and I can't find a working way to log in to SugarCRM with Javascript. This is as close as I've gotten:
var params = {
user_auth:{
user_name:'jim',
password:'jim',
encryption:'PLAIN'
},
application_name: 'SugarCRM RestAPI Example'
}
var restdata = JSON.stringify(params);
$.ajax({
type: "POST",
url: "http://alzjgk0569.trial.sugarcrm.com/service/v4/rest.php?jsoncallback=?",
data: {
method: "login",
input_type: "JSON",
response_type: "JSON",
rest_data: restData
},
dataType:"jsonp",
success: function(result) {alert("result: " + JSON.stringify(result));},
failure: function() {alert("failed");}
});
Anyone have any ideas?
Thanks.
p.s. I should mention that the following works just fine:
<form action="https://alzjgk0569.trial.sugarcrm.com/rest/v10/oauth2/token" method="post">
grant_type: <input type="text" name="grant_type" value="password"><br>
client_id: <input type="text" name="client_id" value="sugar"><br>
client_secret: <input type="text" name="client_secret" value=""><br>
username: <input type="text" name="username" value="jim"><br>
password: <input type="text" name="password" value="jim"><br>
platform: <input type="text" name="platform" value="base"><br>
<input type="submit" value="Submit">
</form>
Edit:
I got it working by changing the url to begin with "https://" when this page is served with "https". But the response is this:
{\"user_auth\":{\"user_name\":\"jim\",\"password\":\"jim\",\"encryption\":\"PLAIN\"},\"application_name\":\"SugarCRM RestAPI Example\"}" = {"id":"1cg0ji99ouq0st6jndlcbo3075","module_name":"Users","name_value_list":{"user_id":{"name":"user_id","value":"seed_jim_id"},"user_name":{"name":"user_name","value":"jim"},"user_language":{"name":"user_language","value":"en_us"},"user_currency_id":{"name":"user_currency_id","value":"-99"},"user_is_admin":{"name":"user_is_admin","value":false},"user_default_team_id":{"name":"user_default_team_id","value":"1"},"user_default_dateformat":{"name":"user_default_dateformat","value":"m/d/Y"},"user_default_timeformat":{"name":"user_default_timeformat","value":"h:ia"},"user_number_seperator":{"name":"user_number_seperator","value":","},"user_decimal_seperator":{"name":"user_decimal_seperator","value":"."},"mobile_max_list_entries":{"name":"mobile_max_list_entries","value":10},"mobile_max_subpanel_entries":{"name":"mobile_max_subpanel_entries","value":3},"user_currency_name":{"name":"user_currency_name","value":"US Dollar"}}}
This is completely useless information. It has no token, so it's not really even a real login. I'm giving up on client side SugarCRM login, and going back to server side with PHP, which I know works.
You actually have the answer here. Your login token is the id value in the response you posted.
SugarCRM API calls are better on the server side:
1. More secure
2. Does not have cross domain request issue due to the Same Origin Policy enforced by browsers. So JSONP is not needed.
I'm really clueless as to how to get this done.
I need to make a subscribe with email button and it needs to be validated and show a little message for success, Loading ands Error.
I have never worked with Ajax before and this is what I have to do, I have To complete the newsletter subscribe ajax-functionality using a pre-defined controller in a php file on the server called newsletter.php and the I should use the controller function named subscribe in there to generate the response for the ajax request.
If that makes any sense please help me out.
This is my form for the email address
<div id="subscribeText">
<form action="" method="post" name="ContactForm" id="ContactForm" >
<input type="submit" name="subscribeButton" id="subscribeButton" value="Submit" />
<input type="text" name="subscribeBox" id="subscribeBox" value="Enter your email address..." size="28" maxlength="28" onFocus="this.value=''" />
</form>
</div>
http://jsfiddle.net/vaaljan/R694T/
This is what the success should look like and error and loading pretty much the same.
What the success message looks like
Hope this isn't too far fetched, I have not worked with java script that much yet but I understand more or less.
Thanks
I have made a small example on jsfiddle.
$('#send').click(function (e) {
e.preventDefault();
var emailval = $('input#email').val();
console.log(emailval);
if (emailval !== "") {
$.ajax({
cache: false, // no cache
url: '/echo/json/', // your url; on jsfiddle /echo/json/
type: 'POST', // request method
dataType: 'json', // the data type, here json. it's simple to use with php -> json_decode
data: {
email: emailval // here the email
},
success: function (data) {
console.log(data);
$('<strong />', {
text: 'Successfull subscribed!'
}).prependTo('#state');
},
error: function (e) {
$('<strong />', {
text: 'A error occured.'
}).prependTo('#state');
},
fail: function () {
$('<strong />', {
text: 'The request failed!'
}).prependTo('#state');
}
});
} else {
alert("Insert a email!");
}
});
Here it is.
It uses jQuery for the ajax request.
The example shows how ajax works.