protect login+signup forms with recaptcha

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

protect login+signup forms with recaptcha

Post by ronwill » 2022-06-09 13:11

I am getting constant random signups that I believe are from bots - so far registrations only (not signing in) they populate random usernames / email address and random words for name address etc. - over 100 in the last week alone!

I am hopeful that using recaptcha can help resolve this.

I managed to implement recaptcha on my login form using Ahmed's tutorial: https://bigprof.com/appgini/tips-and-tu ... -recaptcha but am obviously not understanding what changes / additions I need to do to apply recaptcha on the signUp page.

Can any assist with the code for that and what I need to modify or add etc. to the tutorial example to make it apply to signUp page as well as the login.
Thanks,
Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: protect login+signup forms with recaptcha

Post by ronwill » 2022-08-04 16:27

Have had over 1000 bot signups as still not able to make code work on signup page (ok for signin).
Problem it causes is my acknowledgement / welcome email gets sent to signups email address, creating spam.
I’ve cancelled welcome email (not a solution) - so if anyone has managed to get it working on signup page I’d love to have copy of code from footer-extras to see what I’m doing wrong.
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

AhmedBR
AppGini Super Hero
AppGini Super Hero
Posts: 327
Joined: 2013-09-19 10:23

Re: protect login+signup forms with recaptcha

Post by AhmedBR » 2022-08-04 18:12

here is my footer-extra.php, and it reCaptcha works just fine, this is for login

The only difference in my code is the include location, if you are using reCaptcha.config.php in hooks folder (mine is in hooks folder).

Code: Select all


<?php if(Request::val('signIn') || Request::val('loginFailed')) { ?>
  <?php
    // reCaptcha config
    include('hooks/reCaptcha.config.php');
  ?>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script>$j(() => {
    // add reCAPTCHA checkbox to the login form, after the 'remember me' checkbox
    $j(`<div
        class="g-recaptcha bspacer-lg"
        data-sitekey="<?php echo RECAPTCHA_SITE_KEY; ?>"
        data-theme="light"
    ></div>`).insertAfter('div.checkbox')
 
    // prevent form submission if reCAPTCHA not solved
    $j('form').on('submit', (e) => {
      if(!grecaptcha.getResponse().length)
        e.preventDefault();
    })
 
    // disable 'sign in' button if reCAPTCHA not solved
    $j('#submit').prop('disabled', true);
    setInterval(() => {
      $j('#submit').prop('disabled', !grecaptcha.getResponse().length);
    }, 100)
  })</script>
<?php } ?>
I do not have sign ups at all, all my apps are closed apps.
Happy coding
AppGini 22.14 - xampp 3.3.0 - PHP 7.4.30 - Summary reports - Calendar - Mass update - Messages - AppGiniHelper

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: protect login+signup forms with recaptcha

Post by ronwill » 2022-08-10 17:56

Hi AhmedBR,

Thanks for taking time to reply. I have it working already on signin, my problem is with the signup page.
Cheers,
Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

herman
Posts: 5
Joined: 2022-07-31 10:15
Location: New Zealand

Re: protect login+signup forms with recaptcha

Post by herman » 2022-08-24 05:12

Hi Ron.
I see that you had problems with getting the recaptcha working on your sign-up page.
Did you solve it, or do you still need a hand to get it working?

Cheers
Herman

herman
Posts: 5
Joined: 2022-07-31 10:15
Location: New Zealand

Re: protect login+signup forms with recaptcha

Post by herman » 2022-08-26 08:33

I have it working on my website both on the sign-in page and the sign-up page.
Let me explain how I did it.
I used Ahmed's explanation on how to add the recaptcha to the sign-in page. (https://bigprof.com/appgini/tips-and-tu ... -recaptcha)
With that done, I have now the reCaprcha.config.php file holding both the site key and secret key.
Next, I opened up the file "membership_signup.php". This file is located in the root directory of your program.
Look for the line that creates the sign-up button at the bottom of the page. This line looks like this:

Code: Select all

<div class="row">
	<div class="col-sm-offset-3 col-sm-6">
	<button class="btn btn-primary btn-lg btn-block" value="signUp" id="submit" type="submit" name="signUp"><?php echo $Translation['sign up']; ?>
	</button>
	</div>
</div>
Above the line

Code: Select all

 <div class="row"> 
add the following line:

Code: Select all

 <div class="recaptcha"> 
and save the file.
Next, open the file footer_extras.php which is located in the hooks folder.
Add the below code to the end of the file.

Code: Select all

<?php
	if($script_name == 'membership_signup.php'){
	// reCaptcha config
	include(__DIR__ . '/reCaptcha.config.php');
?>
	<script src="https://www.google.com/recaptcha/api.js" async defer></script>
	<script>$j(() => {
	// add reCAPTCHA checkbox to the signup form, after the 'recaptcha div tag
	$j(`<div
        class="g-recaptcha bspacer-lg"
        data-sitekey="<?php echo RECAPTCHA_SITE_KEY; ?>"
        data-theme="light"
	>
	</div>`).insertAfter('div.recaptcha')

	// prevent form submission if reCAPTCHA not solved
	$j('form').on('submit', (e) => {
	if(!grecaptcha.getResponse().length)
        e.preventDefault();
	})

	// disable 'sign up' button if reCAPTCHA not solved
	$j('#submit').prop('disabled', true);
	setInterval(() => {
	$j('#submit').prop('disabled', !grecaptcha.getResponse().length);
	}, 100)
	})</script>
<?php
	}
?>
Explanation.:
In the first part of the code, the program checks to make sure that the page that is displayed is the "membership_signup.php" page.
If this is true the program opens the "reCaptcha.config.php" and retrieves the 2 keys.
Next, the program calls the google recaptcha javascript code and puts it on the website page at the place where you have put the div class recaptcha line.
The last part of the code prevents the submit button from being pressed until the recaptcha check is true.

Good luck with your website.
It works on my website so it must be working on yours too.

Cheers
Herman

herman
Posts: 5
Joined: 2022-07-31 10:15
Location: New Zealand

Re: protect login+signup forms with recaptcha

Post by herman » 2022-08-27 01:22

Sorry, forgot the closing </div> tag. The added code in the "membership_signup.php" page needs to be:

Code: Select all

 <div class="recaptcha"></div> 
Cheers
Herman

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: protect login+signup forms with recaptcha

Post by ronwill » 2022-09-30 15:21

Hi Herman,

Sorry for late reply (been incapacitated last 4 weeks!).
I followed your guidance and it works perfectly - many thanks. I hope this will now stop the random bot signups I've been getting!

Once again many thanks for your valued and appreciated help on this,
Cheers, Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

Post Reply