recaptcha v2 Invisible

[dlee]

I am trying to add Google's recaptcha v2 Invisible to the login form. This would make it easier on my cutsotmers who use their phones to input data.

I found an example for this on the internet and followed it.
This is my code in /hooks/header-extras.php :

Code: Select all

<script> 
	function recaptcha_onSubmit(token) {
	  //alert('TEST CLICKED');
	  document.getElementById('login_form').submit();
    }

    function validate(event) {
      event.preventDefault();
      grecaptcha.execute();
    }

    function recaptcha_onload() {
      var element = document.getElementById('recaptcha_btn');
      element.onclick = validate;
    }
</script>
 
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

This is my code in the modified /login.php file (I tried to comment items I added or modified) :

Code: Select all

<?php if(!isset($Translation)) { @header('Location: index.php?signIn=1'); exit; } ?>
<?php include_once("$currDir/header.php"); ?>

<?php if($_GET['loginFailed']) { ?>
	<div class="alert alert-danger"><?php echo $Translation['login failed']; ?></div>
<?php } ?>

<div class="row">
	<div class="col-sm-6 col-lg-8" id="login_splash">
		<!-- customized splash content here -->
	</div>
	<div class="col-sm-6 col-lg-4">
		<div class="panel panel-success">

			<div class="panel-heading">
				<h1 class="panel-title"><strong><?php echo $Translation['sign in here']; ?></strong></h1>
				<?php if(sqlValue("select count(1) from membership_groups where allowSignup=1")) { ?>
					<a class="btn btn-success pull-right" href="membership_signup.php"><?php echo $Translation['sign up']; ?></a>
				<?php } ?>
				<div class="clearfix"></div>
			</div>

			<div class="panel-body">
	<!-- added id to form -->
				<form method="post" id="login_form" action="index.php">
					<div class="form-group">
						<label class="control-label" for="username"><?php echo $Translation['username']; ?></label>
						<input class="form-control" name="username" id="username" type="text" placeholder="<?php echo $Translation['username']; ?>" required>
					</div>
					<div class="form-group">
						<label class="control-label" for="password"><?php echo $Translation['password']; ?></label>
						<input class="form-control" name="password" id="password" type="password" placeholder="<?php echo $Translation['password']; ?>" required>
						<span class="help-block"><?php echo $Translation['forgot password']; ?></span>
					</div>
					<div class="checkbox">
						<label class="control-label" for="rememberMe">
							<input type="checkbox" name="rememberMe" id="rememberMe" value="1">
							<?php echo $Translation['remember me']; ?>
						</label>
					</div>
		<!-- added div below -->
		<div id='recaptcha' class="g-recaptcha"
			data-sitekey="**********************************"
			data-callback="recaptcha_onSubmit"
			data-size="invisible">
		</div>
					<div class="row">
						<div class="col-sm-offset-3 col-sm-6">
		<!-- <button name="signIn" type="button" id="submit" value="signIn" class="btn btn-primary btn-lg btn-block"><?php echo $Translation['sign in']; ?></button>
		-->
		<br>
		<!-- I added the button below -->
		<button class="btn btn-success btn-lg" id="recaptcha_btn" type="button">TEST</button></div>

					</div>
				</form>		
		<!-- added by me -->		
		<script>recaptcha_onload();</script>				
			</div>

			<?php if(is_array(getTableList()) && count(getTableList())) { /* if anon. users can see any tables ... */ ?>
				<div class="panel-footer">
					<?php echo $Translation['browse as guest']; ?>
				</div>
			<?php } ?>

		</div>
	</div>
</div>

<script>document.getElementById('username').focus();</script>

<?php include_once("$currDir/footer.php"); ?>

I used the Chrome browser's Toggle Device toolbar setup with a custom device with a "User agent string of Googlebot/2.1 to trigger the recaptcha to make it present the picture challenge for testing. The picture challenge appears when I press the "TEST" button and if I uncomment the alert() in the function recaptcha_onSubmit() after I answer the challenge the alert appears BUT the form is not submitted. BTW, I created the app with Appgini v5.97.

I know this is a lot of stuff to review but any help with making this work work be greatly appreciated!
TD

[dlee]

Anyone?

[dlee]

I think I have successfully installed recaptcha v2 invisible for one of my web apps. if there is anyone with experience with recaptcha v2 invisible please give us your thoughts on this. One thing that bothers me is this approach does not use the secret key, just the sitekey. BTW, I am still running Appgini v5.97 but see no reason why this shouldn't work on v5.98.

Here is the code I used in /hooks/header-extras.php

Code: Select all

<script> 
	function recaptcha_onSubmit(token) {
	  $j('#login_form').append('<input name="signIn" style="display: none;" value=1>');		
	  document.getElementById("login_form").submit();
    }

    function validate(event) {
      event.preventDefault();
      grecaptcha.execute();
    }

    function recaptcha_onload() {
      var element = document.getElementById('recaptcha_btn');
      element.onclick = validate;
    }
</script>				

<script src="https://www.google.com/recaptcha/api.js" async defer></script>				

I modified the /login.php file by adding an id to the form:

Code: Select all

	<form method="post" id="login_form" action="index.php">

I added this <div> to the form:

Code: Select all

	<div id='recaptcha' class="g-recaptcha"
		data-sitekey="*****************************************"
		data-callback="recaptcha_onSubmit"
		data-size="invisible">
	</div>

I replaced the "submit" button with my own button:

Code: Select all

	<button type="button" class="btn btn-primary btn-lg" id="recaptcha_btn">SUBMIT</button>

Finally I added this line just below the </form> tag:

Code: Select all

	
	<script>recaptcha_onload();</script>