B4J Question [ABMaterial] How to implement recaptcha v2 in ABMatetrial web page?

[vp2020]

Hi All,
I would like to embed recaptcha v2 in user login webpage built by ABMaterial,
In connect page, I set the login button to disabled state,
after the user click recaptcha and got verified,
the login button will set to enable state,

how to do? please help!

Thanks

 

[alwaysbusy]

This may help you on the way: https://www.b4x.com/android/forum/t...-for-a-customcomponent-captcha.83480/#content

 

[MichalK73]

I used ABMSignaturePad once.
I can't find the code for this project right now, but it will describe it easily.
The server drew 2 numbers. On the screen I displayed a jpg pattern of 3x3 points with the signature of the point number. Next to it I put ABMSignaturePad and info from the server to draw a line between the drawn points. The server checked if it was ok and kept going. It worked very dung.
Anyone can write such a code in a few minutes.

 

[vp2020]

Thank you Alain,
I modified from your code(https://www.b4x.com/android/forum/t...-for-a-customcomponent-captcha.83480/#content) to my version,
I don't know it is correct or not, but it works well.

Sub Class_Globals
    Public ABMComp As ABMCustomComponent
    Dim mAPIKey As String
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(InternalPage As ABMPage, ID As String, APIKey As String)
    ABMComp.Initialize("ABMComp", Me, InternalPage, ID, "")
    mAPIKey = APIKey
End Sub

Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
    
    Return $"
    <script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

    <script type="text/javascript">
      var verifyCallback = function(response) {
        document.getElementById("cont1-btnlogin").classList.remove('disabled');
    };
      
    var onloadCallback = function() {
        grecaptcha.render('${internalID}render', {
            'sitekey' : '${mAPIKey}',
            'callback' : verifyCallback,
            'theme' : 'light'
        });
      };
    </script>

     <div id="${internalID}render"></div>
    
    "$
    
End Sub

In ConnectPage():

    Dim userID As ABMInput
    userID.Initialize(page,"userID",ABM.INPUT_TEXT,"Your ID：",False,"")
    cont1.Cell(1,1).AddComponent(userID)
    
    Dim userPswd As ABMInput
    userPswd.Initialize(page,"userPswd",ABM.INPUT_PASSWORD,"Your Pswd：",False,"")
    cont1.Cell(2,1).AddComponent(userPswd)

    ' note that this is Googles demo API key.  Use your own!
    myReCAPTCHA.Initialize(page, "myReCAPTCHA", "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI")    
    cont1.Cell(3,1).AddComponent(myReCAPTCHA.ABMComp)

    Dim btnLogin As ABMButton
    btnLogin.InitializeRaised(page,"btnLogin","","","Sign in","")
    btnLogin.UseFullCellWidth=True
    btnLogin.Enabled=False

    cont1.Cell(4,1).AddComponent(btnLogin)
    
    page.Cell(6,1).AddComponent(cont1)

The Sign in button will become enable after the user clicked the repcaptcha.