jrmeyerhofer/reCAPTCHA Form with PHP

## reCAPTCHA Form with PHP
<?php
// Always start this first
session_start();

include 'db.php';

$message = "";

if ( ! empty( $_POST ) ) {
	// Verify captcha
	$post_data = http_build_query(
		array(
			'secret' => "YOUR SECRETKEY HERE",
			'response' => $_POST['g-recaptcha-response'],
			'remoteip' => $_SERVER['REMOTE_ADDR']
		)
	);
	$opts = array('http' =>
		array(
			'method'  => 'POST',
			'header'  => 'Content-type: application/x-www-form-urlencoded',
			'content' => $post_data
		)
	);
	$context  = stream_context_create($opts);
	$response = file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);
	$result = json_decode($response);
	if (!$result->success) {
		$message = "Incorrect Signin";
	} else {
		if ( isset( $_POST['username'] ) && isset( $_POST['password'] ) ) {
			// Getting submitted user data from database
			$stmt = $mysqli->prepare("SELECT * FROM users WHERE username = ?");
			$stmt->bind_param('s', $_POST['username']);
			$stmt->execute();
			$result = $stmt->get_result();
			$user = $result->fetch_object();

			// Verify user password and set $_SESSION
			if (isset($user->password)) {
				if ( password_verify( $_POST['password'], $user->password )  ) {
					$_SESSION['user_id'] = $user->id;
					header("Location: admin.php");
				} else {
					$message = "Incorrect Username and/or Password";
				}
			} else {
				$message = "Incorrect Username and/or Password";
			}
		}
	}
}
?>

<!doctype html>
<html lang="en" class="h-100">
  <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<script type="text/javascript">
	  var verifyCallback = function(response) {
		console.log(response);
		document.getElementById("repResponse").value = response;
		console.log(document.getElementById("repResponse").value);
      };
      var onloadCallback = function() {
		grecaptcha.render('html_element', {
          'sitekey' : 'YOUR SITEKEY HERE',
          'callback' : verifyCallback,
          'theme' : 'light'
        });
      };
    </script>

    <title>Login</title>
	<link rel="shortcut icon" href="../img/favicon.ico">

  </head>
  <body class="d-flex flex-column h-100">

  <div class="container"><br>

	<?php
	//if signed in, DON'T show form
	if ( !isset( $_SESSION['user_id'] ) ) {
    ?>
		<form action="<?php echo ($_SERVER['PHP_SELF']); ?>" method="post">
			<div class="form-group">
				<label for="username">Username</label>
				<input class="form-control" type="text" name="username" id="username" placeholder="Enter your username" required>
			</div>
			<div class="form-group">
				<label for="password">Password</label>
				<input class="form-control" type="password" id="password" name="password" placeholder="Enter your password" required>
			</div>
			<div class="form-group">
				<div id="message" class="alert alert-danger alert-dismissible fade show" <?php if ($message == "") { echo "style='display:none;'";} ?> role="alert">
					<strong><?php echo $message; ?></strong>
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
			</div>
			<div class="form-group">
				<div id="html_element"></div>
				<div type="hidden" id="repResponse" name="repResponse"></div>
			</div>
			<input class="btn btn-primary" type="submit" value="Submit">
		</form>
	<?php
	//if signed in, DON'T show form. ELSE push to admin page
	} else {
		header("Location: admin.php");
	}
    ?>

	  <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </div>

  </body>
</html>
	<?php
	// Always start this first
	session_start();

	include 'db.php';

	$message = "";

	if ( ! empty( $_POST ) ) {
	// Verify captcha
	$post_data = http_build_query(
	array(
	'secret' => "YOUR SECRETKEY HERE",
	'response' => $_POST['g-recaptcha-response'],
	'remoteip' => $_SERVER['REMOTE_ADDR']
	)
	);
	$opts = array('http' =>
	array(
	'method' => 'POST',
	'header' => 'Content-type: application/x-www-form-urlencoded',
	'content' => $post_data
	)
	);
	$context = stream_context_create($opts);
	$response = file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);
	$result = json_decode($response);
	if (!$result->success) {
	$message = "Incorrect Signin";
	} else {
	if ( isset( $_POST['username'] ) && isset( $_POST['password'] ) ) {
	// Getting submitted user data from database
	$stmt = $mysqli->prepare("SELECT * FROM users WHERE username = ?");
	$stmt->bind_param('s', $_POST['username']);
	$stmt->execute();
	$result = $stmt->get_result();
	$user = $result->fetch_object();

	// Verify user password and set $_SESSION
	if (isset($user->password)) {
	if ( password_verify( $_POST['password'], $user->password ) ) {
	$_SESSION['user_id'] = $user->id;
	header("Location: admin.php");
	} else {
	$message = "Incorrect Username and/or Password";
	}
	} else {
	$message = "Incorrect Username and/or Password";
	}
	}
	}
	}
	?>

	<!doctype html>
	<html lang="en" class="h-100">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<script type="text/javascript">
	var verifyCallback = function(response) {
	console.log(response);
	document.getElementById("repResponse").value = response;
	console.log(document.getElementById("repResponse").value);
	};
	var onloadCallback = function() {
	grecaptcha.render('html_element', {
	'sitekey' : 'YOUR SITEKEY HERE',
	'callback' : verifyCallback,
	'theme' : 'light'
	});
	};
	</script>

	<title>Login</title>
	<link rel="shortcut icon" href="../img/favicon.ico">

	</head>
	<body class="d-flex flex-column h-100">

	<div class="container"><br>

	<?php
	//if signed in, DON'T show form
	if ( !isset( $_SESSION['user_id'] ) ) {
	?>
	<form action="<?php echo ($_SERVER['PHP_SELF']); ?>" method="post">
	<div class="form-group">
	<label for="username">Username</label>
	<input class="form-control" type="text" name="username" id="username" placeholder="Enter your username" required>
	</div>
	<div class="form-group">
	<label for="password">Password</label>
	<input class="form-control" type="password" id="password" name="password" placeholder="Enter your password" required>
	</div>
	<div class="form-group">
	<div id="message" class="alert alert-danger alert-dismissible fade show" <?php if ($message == "") { echo "style='display:none;'";} ?> role="alert">
	<strong><?php echo $message; ?></strong>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	</div>
	<div class="form-group">
	<div id="html_element"></div>
	<div type="hidden" id="repResponse" name="repResponse"></div>
	</div>
	<input class="btn btn-primary" type="submit" value="Submit">
	</form>
	<?php
	//if signed in, DON'T show form. ELSE push to admin page
	} else {
	header("Location: admin.php");
	}
	?>

	<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
	async defer>
	</script>

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	</div>

	</body>
	</html>