Adding reCAPTCHA to login page


#1

Another small tweak to add google reCAPTCHA to login page
first of all you need to create a reCAPTCHA for your website
https://www.google.com/recaptcha/admin basically for “I’m not robot” is reCAPTCHA v2

Then you need to modify 2 files

  1. login.twig in Views
    just add

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

after

<link href="{{ theme.uri("libraries/bootstrap/css/bootstrap-theme.min.css") }}" rel="stylesheet" media="screen">

and then add:

<div class="g-recaptcha" data-sitekey="yoursitekey" style="transform:scale(0.8);transform-origin:0;-webkit-transform:scale(0.8); transform:scale(0.8);-webkit-transform-origin:0 0;transform-origin:0 0;"></div>
before

<button class="btn btn-large btn-primary" type="submit">{% trans "Login" %}</button>

  1. Login.php in lib/Controllers
    Inside public function login()
    add after $priorRoute = ($this->getSanitizer()->getString('priorRoute'));

      if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
             //your site secret key
             $secret = 'yoursecretkey';
             //get verify response data
             $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
             $responseData = json_decode($verifyResponse);
             if($responseData->success):
    

and then before $this->setNoOutput(true);

    else:
	    $this->getApp()->flash('login_message', __('Robot verification failed, please try again'));
            $this->getApp()->flash('priorRoute', $priorRoute);
	   endif;
    else:
	     $this->getApp()->flash('login_message', __('Please click on the reCAPTCHA box.'));
             $this->getApp()->flash('priorRoute', $priorRoute);
    endif;

That’s it, you will have nice reCAPTCHA for additional security.


#2

Please don’t modify CMS files directly. You must use a theme to do that!


#3

Hi Alex, can you please tell which files to edit, I know it’s better always use the theme but for login captcha I didn’t found other way only to modify login files

George


#4

You need to create a base theme, apply it, and then you can override any of the standard theme files by copying them in to your theme, and making adjustments there.

Creating a base theme is covered in the manual.

https://xibo.org.uk/docs/developer/custom-theme-development


#5

Hi Alex, I was able to add modified twig through custom theme, but how I change do the same for Login.php in lib/Controller?

is there $config[‘controller_path’] or maybe ~config[‘core_path’]??

Thanks,
George


#6

I believe you’d need to write middleware and load that from settings.php

Its one to ask the devs channel really


#7

how did it go?. I am interested in adding recaptcha to my log in too…am using xibo 1.8.11 on docker