[Solved] Google ReCaptcha at Customer Login

English! place to talk about development, programming and coding
Post Reply
skullz
Znuny superhero
Posts: 617
Joined: 24 Feb 2012, 03:58
Znuny Version: LTS and Features
Real Name: Mo Azfar
Location: Kuala Lumpur, MY
Contact:

[Solved] Google ReCaptcha at Customer Login

Post by skullz »

Hi all, good day :)

Im trying to apply google recaptcha at Customer Login form. Unfortunately, not properly working..im still have to rack my brain :)
However its working well when applied to Sign Up form instead.

Simulation :
- If captcha is empty, error throw --> working :)
Image

- if captcha is right, while username/password wrong, error --> working :)
Image

- if captcha is right, with correct username/password --> the page refresh, then still on the Login page.
However i can see the session is register in the system.

Image

Image

Code as below:

1. CustomerLogin.tt

Code: Select all

                    <!-- begin recaptcha -->
                    <div>
                    [% Data.reCAPTCHA %]
                    </div>
                    <!-- end recaptcha -->
                    
                    <div>
                        <button type="submit" value="[% Translate("Log In") | html %]" disabled="disabled">[% Translate("Log In") | html %]</button>
                    </div>
2. Layout.pm

Code: Select all

	#begin recaptcha
	use Captcha::reCAPTCHA::V2;
	#end recaptcha
	--------
	--------
        #begin recaptcha within CustomerLogin block
        my $SiteKey2 = $ConfigObject->Get('GoogleCaptcha::SiteKey');		
        my $rc2 = Captcha::reCAPTCHA::V2->new;
        $Param{reCAPTCHA} = $rc2->html($SiteKey2, { theme => 'dark' }, { size => 'compact' }); #public key
        $Self->Block(
            Name => 'Captcha',
            Data => \%Param,
        );
        #end recaptcha
            
        $Self->Block(
            Name => 'LoginBox',
            Data => \%Param,
        );
3. InterfaceCustomer.pm

Code: Select all

	#begin recaptcha
	use Captcha::reCAPTCHA::V2;
	#end recaptcha
	-----
	-----
	my $PostTwoFactorToken = $ParamObject->GetParam(
            Param => 'TwoFactorToken',
            Raw   => 1
        ) || '';
        
        #begin recaptcha
        my $LayoutObject = $Kernel::OM->Get('Kernel::Output::HTML::Layout');
        my $rc2 = Captcha::reCAPTCHA::V2->new;
        my $SecretKey2 = $ConfigObject->Get('GoogleCaptcha::SecretKey');		
        my $response2 = $ParamObject->GetParam(Param => 'g-recaptcha-response') || '';
		my $result2 = $rc2->verify($SecretKey2, $response2);

        if ( !$result2->{success} ) 
        {
			#my $c_error = $result->{error_codes}->[0];
            # show need user data error message
            $LayoutObject->Print(
                Output => \$LayoutObject->CustomerLogin(
                    Title   => 'Error',
                    Message => Translatable(
                        'reCAPTCHA entry failed. Please try again.'
                    ),
                ),
            );
            return;
        }
        #end recaptcha
        
        # create AuthObject
        my $AuthObject = $Kernel::OM->Get('Kernel::System::CustomerAuth');


Thanks
Last edited by skullz on 16 Jun 2020, 12:39, edited 1 time in total.
zzz
Znuny superhero
Posts: 888
Joined: 15 Dec 2016, 15:13
Znuny Version: All
Real Name: Emin
Company: Efflux GmbH
Contact:

Re: Google ReCaptcha at Customer Login

Post by zzz »

Hello skullz,

Funny idea.

I just checked your code and it seems like the declaration of $LayoutObject is the source of error.

New InterfaceCustomer.pm

Code: Select all

        my $Captcha = Captcha::reCAPTCHA::V2->new;
        my $CaptchaSecret = $ConfigObject->Get('GoogleCaptcha::SecretKey');		
        my $PostCaptcha = $ParamObject->GetParam(Param => 'g-recaptcha-response') || '';

        my $CaptchaResult = $Captcha->verify($CaptchaSecret, $PostCaptcha);

        if (!$CaptchaResult->{success}) {
            $Kernel::OM->Get('Kernel::Output::HTML::Layout')->Print(
                Output => \$Kernel::OM->Get('Kernel::Output::HTML::Layout')->CustomerLogin(
                    Title   => 'Error',
                    Message => Translatable('reCAPTCHA entry failed. Please try again.'),
                ),
            );
            return;
        }
You also don't have to render the 'Captcha' block. This is enough:

New Layout.pm

Code: Select all

        my $Captcha = Captcha::reCAPTCHA::V2->new;
        my $CaptchaSite = $ConfigObject->Get('GoogleCaptcha::SiteKey');		
        $Param{reCAPTCHA} = $Captcha->html($CaptchaSite, { theme => 'dark' }, { size => 'compact' });
Best regards
Emin
Professional OTRS, Znuny & OTOBO services: efflux.de | efflux.de/en/

Free and premium add-ons: German | English
skullz
Znuny superhero
Posts: 617
Joined: 24 Feb 2012, 03:58
Znuny Version: LTS and Features
Real Name: Mo Azfar
Location: Kuala Lumpur, MY
Contact:

Re: Google ReCaptcha at Customer Login

Post by skullz »

zzz wrote: 16 Jun 2020, 11:41 Hello skullz,

Funny idea.

I just checked your code and it seems like the declaration of $LayoutObject is the source of error.

You also don't have to render the 'Captcha' block. This is enough:

Best regards
Emin
Hi Emin..

removing the $LayoutObject declaration solved the issue,
not sure why since its point to the same object..

Big Thank
zzz
Znuny superhero
Posts: 888
Joined: 15 Dec 2016, 15:13
Znuny Version: All
Real Name: Emin
Company: Efflux GmbH
Contact:

Re: Google ReCaptcha at Customer Login

Post by zzz »

skullz wrote: 16 Jun 2020, 12:38
zzz wrote: 16 Jun 2020, 11:41 Hello skullz,

Funny idea.

I just checked your code and it seems like the declaration of $LayoutObject is the source of error.

You also don't have to render the 'Captcha' block. This is enough:

Best regards
Emin
Hi Emin..

removing the $LayoutObject declaration solved the issue,
not sure why since its point to the same object..

Big Thank
$LayoutObject gets declared a lot of times in different scopes and the interface is designed pretty badly.
Errors don't get logged into the normal web server log, that's why you probably had a hard finding one...

— Emin
Professional OTRS, Znuny & OTOBO services: efflux.de | efflux.de/en/

Free and premium add-ons: German | English
Post Reply