Implementacija recaptcha v2 v html form

KillaKHAN

Guru
27. avg 2008
17.805
1.121
113
Zdaj sem se ravno 3 ure jebal, da bi to dodal na spletno stran, ker so mi omejili dostop samo na slovenske ipje zaradi odprtega contact forma in bom expresno izginil iz googla, če tega ne uredim čimprej.

Torej imam contact form:
Koda:
<div class="modal fade slide left" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
    			<div class="modal-content">
      				<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h3 class="modal-title" id="myModalLabel"><span style="color:#79cdeb"><center>Pošljite nam sporočilo!</center></span></h3>
   				</div>
 				<div class="modal-body">
					<form id="contactform" action="contact/contact.php" method="post" class="validateform" name="send-contact">
						<div id="sendmessage">Vaše sporočilo je bilo poslano. Odgovorili vam bomo v najkrajšem možnem času. Hvala!
						</div>
						<div class="row">
							<div class="col-lg-12 field">
							<input type="text" name="name" placeholder="* Vpišite svoje ime in priimek" data-rule="maxlen:4" data-msg="Prosimo, da vnesete vsaj 4 črke." />
								<div class="validation">
								</div>
							</div>
							<div class="col-lg-12 margintop10 field">
								<input type="text" name="email" placeholder="* Vpišite svoj email naslov" data-rule="email" data-msg="Prosimo, da vpišete veljaven email naslov." />
								<div class="validation">
								</div>
							</div>
							<div class="col-lg-12 margintop10 field">
								<input type="text" name="subject" placeholder="* Vpišite telefonsko številko" data-rule="maxlen:4" data-msg="Prosimo, da vnesete vsaj 4 črke." />
								<div class="validation">
								</div>
							</div>
							<div class="col-lg-12 margintop10 field">
								<textarea rows="12" name="message" class="input-block-level" placeholder="* Prostor za vaše sporočilo ali vprašanje" data-rule="required" data-msg="Prosimo, da napišete vaše vprašanje ali sporočilo."></textarea>
							<div class="validation">
								</div>
								<p>
								<button class="btn btn-theme margintop10 pull-left" id="ContactButton" type="submit">Pošlji sporočilo</button>
								<span class="pull-right margintop20">* Prosimo, da izpolnete vsa polja. Hvala!</span>
								</p>
							</div>
						</div>
					</form>      
				</div>
       			</div>
  		</div>
	</div>
	<!-- end modal contact form -->

Imam php za ta contact form:

Koda:
 <!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<?php

include 'config.php';

error_reporting (E_ALL ^ E_NOTICE);

$post = (!empty($_POST)) ? true : false;

if($post)
{

$name = stripslashes($_POST['name']);
$email = trim($_POST['email']);
$subject = stripslashes($_POST['subject']);
$message = stripslashes($_POST['message']);


$error = '';



if(!$error)
{
$mail = mail(WEBMASTER_EMAIL, $subject, $message,
     "From: ".$name." <".$email.">\r\n"
    ."Reply-To: ".$email."\r\n"
    ."Content-Type: text/plain; charset=utf-8\r\n"
    ."X-Mailer: PHP/" . phpversion());


if($mail)
{
echo 'OK';
}

}


}
?>
</html>

Zdaj jasno mi je, kako in kam dodam:
<script src='https://www.google.com/recaptcha/api.js'></script>

Jasno mi je tudi, kako in kam dodat recaptcha form:
<div class="g-recaptcha" data-sitekey="mojključ"></div>

In zadeva se tudi vklopi, funkcionira. Ampak sporočilo/mail pošlje kljub temu, da uporabnik ne klikne na captcha kljukico. Torej moram dodat nekaj v php, da bo preveril poleg ostalih 4 polj še recaptcha.

Na netu so sami bedni primeri, recimo tale:
Koda:
 <?php

        $email;$comment;$captcha;
        if(isset($_POST['email'])){
          $email=$_POST['email'];
        }if(isset($_POST['comment'])){
          $email=$_POST['comment'];
        }if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
        if(!$captcha){
          echo '<h2>Please check the the captcha form.</h2>';
          exit;
        }
        $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret= YOURSECRETKEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
        if($response.success==false)
        {
          echo '<h2>You are spammer ! Get the @$%K out</h2>';
        }else
        {
          echo '<h2>Thanks for posting comment.</h2>';
        }
?>

Ki gre skupaj s tem contact formom:
Koda:
<html>	
<HEAD>
<title>recaptcha</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<H1>Recaptcha</h1>
<form id ="comment_form" action="form.php" method="post">
<input type="email" placeholder="Type your email" size="40"<br><br>
<textarea name="comment" rows="8" cols="39"></textarea><br><br>
<input type="submit" name="submit" value="Post comment"><br><br>
<div class="g-recaptcha" data-sitekey="mojključ"></div>
</form>
</body>
</html>

Sam po sebi sicer funkcionira, ampak če rečem, da je moje znanje phpja v povojih se v bistvu ekstremno precenim v svojih sposobnostih.

Torej nekako bi moral dodat še $captcha, !captcha in ta $response v moj php, da bi pred pošiljanjem preveril še to. In nimam blage veze, kako to dodat, da bo funkcioniralo.
 

hitcher

Pripravnik
19. jul 2007
164
2
16
v dveh minutkah spacano - načeloma deluje
smile-1.gif

dodani naslednji vrstici:


<html>
<HEAD>
<title>to je eno sporocilo</title>
</head>
<body>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="modal fade slide left" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">▒~W</span></button>
<h3 class="modal-title" id="myModalLabel"><span style="color:#79cdeb"><center>Pošljite nam sporo▒~Milo!</center></span></h3>
</div>
<div class="modal-body">
<form id="contactform" action="contact/contact.php" method="post" class="validateform" name="send-contact">
<div id="sendmessage">Vaše sporo▒~Milo je bilo poslano. Odgovorili vam bomo v najkrajšem možnem ▒~Masu. Hvala!
</div>
<div class="row">
<div class="col-lg-12 field">
<input type="text" name="name" placeholder="* Vpišite svoje ime in priimek" data-rule="maxlen:4" data-msg="Prosimo, da vnesete vsaj 4 ▒~Mrke." />
<div class="validation">
</div>
</div>
<div class="col-lg-12 margintop10 field">
<input type="text" name="email" placeholder="* Vpišite svoj email naslov" data-rule="email" data-msg="Prosimo, da vpišete veljaven email naslov." />
<div class="validation">
</div>
</div>
<div class="col-lg-12 margintop10 field">
<input type="text" name="subject" placeholder="* Vpišite telefonsko številko" data-rule="maxlen:4" data-msg="Prosimo, da vnesete vsaj 4 ▒~Mrke." />
<div class="validation">
</div>
</div>
<div class="col-lg-12 margintop10 field">
<textarea rows="12" name="message" class="input-block-level" placeholder="* Prostor za vaše sporo▒~Milo ali vprašanje" data-rule="required" data-msg="Prosimo, da napišetee
vaše vprašanje ali sporo▒~Milo."></textarea>
<div class="validation">
</div>
<p>
<button class="btn btn-theme margintop10 pull-left" id="ContactButton" type="submit">Pošlji sporo▒~Milo</button>
<div class="g-recaptcha" data-sitekey="tvoj_capca_kljuc"></div>
<span class="pull-right margintop20">* Prosimo, da izpolnete vsa polja. Hvala!</span>
</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- end modal contact form -->

</body>
</html>
~





potem pa še php skripta:

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<?php

include 'config.php';

error_reporting (E_ALL ^ E_NOTICE);

$post = (!empty($_POST)) ? true : false;

if($post)
{

$name = stripslashes($_POST['name']);
$email = trim($_POST['email']);
$subject = stripslashes($_POST['subject']);
$message = stripslashes($_POST['message']);

if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
if(!$captcha){
echo '<h2>Preveri captcha podatke.</h2>';
exit;
}

$error = '';



if(!$error)
{
$mail = mail("email_naslov", $subject, $message,
"From: ".$name." <".$email.">\r\n"
."Reply-To: ".$email."\r\n"
."Content-Type: text/plain; charset=utf-8\r\n"
."X-Mailer: PHP/" . phpversion());


if($mail)
{
echo 'OK';
}

}


}
?>
</html>
 
Nazadnje urejeno:

creep

Fizikalc
19. jul 2007
1.306
50
48
42
www.lampret.net
Ta princip jaz uporabljam, kadar je treba na hitro implementirat recaptcha. Ni najbolj lep, funkcionira pa BP. Še tako je narejeno, da dokler ne potrdiš recpatche, je submit gumb disable-an. (ni to neka zaščita, je pa boljše za userja, da ne klika submit za brezveze)

Primer forme:
Citat:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Form test</title>
</head>
<body>

<form name="form" method="POST" action="action-file.php">

<input name="input" type="text">

<script src='https://www.google.com/recaptcha/api.js?hl=sl'></script>

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" data-callback="enableBtn"></div>

<button type="submit" id="button1" style="">ODDAJ FORMO</button>

<script>
document.getElementById("button1").disabled = true;
function enableBtn(){
document.getElementById("button1").disabled = false;
}
</script>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

</body>
</html>

In logika po submitu

Citat:

if($_SERVER["REQUEST_METHOD"] === "POST")
{
$recaptcha_secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

//verify captcha
$recaptcha_secret = "";
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX8&response=".$_POST['g-recaptcha-response']);
$response = json_decode($response, true);
if($response["success"] === true)
{
// captcha verify success
}
else
{
// captcha fail
}
}
 

hitcher

Pripravnik
19. jul 2007
164
2
16
poglej vrstico:
<div class="g-recaptcha" data-sitekey="tvoj_capca_kljuc"></div> tukaj pride tvoj secret captcha key
 

dune

Fizikalc
26. maj 2014
1.432
39
48
Koda:
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<?php

include 'config.php';

// tole lahko daš v config.php
$recaptchaSecret = "YOURSECRETKEY";

error_reporting (E_ALL ^ E_NOTICE);

$post = $_SERVER["REQUEST_METHOD"] === "POST";

if($post)
{

	$name = isset($_POST['name']) ? stripslashes($_POST['name']):"";
	$email = isset($_POST['email']) ? trim($_POST['email']):"";
	$subject = isset( $_POST['subject'] ) ? stripslashes($_POST['subject']):"";
	$message = isset( $_POST['message'] ) ? stripslashes($_POST['message']):"";
	$captcha = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response']:"";


	$reUrl = "https://www.google.com/recaptcha/api/siteverify?secret=".$recaptchaSecret.
				"&response=".$captcha.
				"&remoteip=".$_SERVER['REMOTE_ADDR'];

	try{

		// validate recaptcha
		$response = file_get_contents($reUrl);
		$response = json_decode($response, true);

		if( $response["success"] !== true ) throw new Exception("Prosimo potrdite, da niste robot.");
		if( empty($name) ) throw new Exception("Prosimo vpišite vaše ime.");
		if( empty($email) ) throw new Exception("Prosimo vpišite vaše enaslov.");
		if( empty($subject) ) throw new Exception("Prosimo vpišite zadevo.");
		if( empty($message) ) throw new Exception("Prosimo vpišite sporočilo.");

		$mail = mail(WEBMASTER_EMAIL, $subject, $message,
		     "From: ".$name." <".$email.">\r\n"
		    ."Reply-To: ".$email."\r\n"
		    ."Content-Type: text/plain; charset=utf-8\r\n"
		    ."X-Mailer: PHP/" . phpversion());


		if($mail)
		{
			echo 'OK';
		}
	
	}catch(Exception $ex){
		echo '<div style="color:red">Napaka: '. $ex->getMessage(). '</div>';
	}


}
?>
</html> 



<div class="modal fade slide left" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
				<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			<h3 class="modal-title" id="myModalLabel"><span style="color:#79cdeb"><center>Pošljite nam sporočilo!</center></span></h3>
			</div>
			<div class="modal-body">
			<form id="contactform" action="contact/contact.php" method="post" class="validateform" name="send-contact">
				<div id="sendmessage">Vaše sporočilo je bilo poslano. Odgovorili vam bomo v najkrajšem možnem času. Hvala!
				</div>
				<div class="row">
					<div class="col-lg-12 field">
					<input type="text" name="name" placeholder="* Vpišite svoje ime in priimek" data-rule="maxlen:4" data-msg="Prosimo, da vnesete vsaj 4 črke." />
						<div class="validation">
						</div>
					</div>
					<div class="col-lg-12 margintop10 field">
						<input type="text" name="email" placeholder="* Vpišite svoj email naslov" data-rule="email" data-msg="Prosimo, da vpišete veljaven email naslov." />
						<div class="validation">
						</div>
					</div>
					<div class="col-lg-12 margintop10 field">
						<input type="text" name="subject" placeholder="* Vpišite telefonsko številko" data-rule="maxlen:4" data-msg="Prosimo, da vnesete vsaj 4 črke." />
						<div class="validation">
						</div>
					</div>
					<div class="col-lg-12 margintop10 field">
						<textarea rows="12" name="message" class="input-block-level" placeholder="* Prostor za vaše sporočilo ali vprašanje" data-rule="required" data-msg="Prosimo, da napišete vaše vprašanje ali sporočilo."></textarea>
						<div class="validation">
						</div>
						
					</div>
					<div class="col-lg-12 margintop10 field">
						<div class="g-recaptcha" data-sitekey="mojključ"></div>
						<div class="validation">
						</div>
						
					</div>
					<div class="col-lg-12 margintop10 field">
						<p>
						<button class="btn btn-theme margintop10 pull-left" id="ContactButton" type="submit">Pošlji sporočilo</button>
						<span class="pull-right margintop20">* Prosimo, da izpolnete vsa polja. Hvala!</span>
						</p>
					</div>
				</div>
			</form>      
		</div>
  		</div>
	</div>
</div>
<!-- end modal contact form -->
 

KillaKHAN

Guru
27. avg 2008
17.805
1.121
113
Sem dodal, pa vseeno ne dela oz. pošlje brez da izpolnem captcha. Sem slišal, da moraš baje dodat čisto v vseh fajlih na serverju preden začne delovat? Bi moral še kaj v JS popravit?
 

dune

Fizikalc
26. maj 2014
1.432
39
48
Če bi rad blokiral submit dokler ni izpolnjena captcha, bi lahko dodal nekaj takega v js:

Koda:
$("form#contactform").on("submit", function(ev){
	var recaptcha = $(this).find("input[g-recaptcha-response]").val();
	if( typeof recaptcha !== "string" || recaptcha.trim().length === 0  ){
		ev.preventDefault();
		alert("Prosimo vnesite varnostno kodo.");
	}
});
 

amacar

Majstr
29. apr 2010
4.167
487
83
Blokiranje v .js je samo lepotni popravek. Glavno je, da na serverju zavrneš.
 

dune

Fizikalc
26. maj 2014
1.432
39
48
Validacija na frontendu je zelo pomembna zaradi uporabniške izkušnje. Rabiš pa seveda oboje.