B4J Question [ABMATERIAL] REQUEST for a CustomComponent Captcha

[Cableguy]

Hi ABMGurus

The custom component in ABM is still quite puzzling to me, and so I ask to the more enlighted of you to please, please, please add a CustomComponentCaptcha to our Framework.
I think this is a sooner or later needed by most kind of component, in order to avoid robots taking over the world, or just our online forms...

Did I say please already? Please!!!??

 

[Harris]

This is for adding a Google chart. The principals still apply.

The javascript stuff needs to be modified to what it expects. Hopefully there is enough docs to explain this.

https://www.b4x.com/android/forum/threads/abmaterial-abmcustomcomponent-google-charts.73028/

A CustomComponentCaptcha would be nice...

 

[alwaysbusy]

Follow the steps to create your google API key: https://www.google.com/recaptcha/intro/index.html

See post #6 for ABMaterial before version 3.75.

For this demo, I'm using the developer API key (which works with localhost) so it will show a warning that this is not the real key in red.

Create a new class CompReCAPTCHA

'Class module
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 $"<div id="${internalID}render" class="g-recaptcha" data-sitekey="${mAPIKey}"></div>"$
End Sub
' Is useful to run some initalisation script.
Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
   Dim script As String = $"grecaptcha.render(
"${internalID}render",
{"sitekey": "${mAPIKey}", "theme": "light"}
) "$
   InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
   ' flush not needed, it's done in the refresh method in the lib
End Sub

public Sub Reset(InternalPage As ABMPage)
   Dim script As String = $"grecaptcha.reset()"$
   InternalPage.ws.Eval(script, Null)
   InternalPage.ws.Flush
End Sub

public Sub CheckValidation(InternalPage As ABMPage) As Boolean
   Dim script As String = $"return (grecaptcha && grecaptcha.getResponse().length !== 0);"$
   Dim ret As Future = InternalPage.ws.EvalWithResult(script, Null)
   InternalPage.ws.Flush
  
   Return ret.Value  
End Sub
' runs when a refresh is called
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
   Dim script As String = $""$
   InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
End Sub
' do the stuff needed when the object is removed
Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)
End Sub

In BuildPage(), add the Google api:

page.AddExtraJavaScriptFile("https://www.google.com/recaptcha/api.js")

In Class_Globals make a variable:

Dim myReCAPTCHA As CompReCAPTCHA

In ConnectPage create the component (and a couple of buttons):

...
' note that this is Googles demo API key.  Use your own!
myReCAPTCHA.Initialize(page, "myReCAPTCHA", "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI")
page.Cell(1,1).AddComponent(myReCAPTCHA.ABMComp)
  
Dim btn As ABMButton
btn.InitializeFlat(page, "btn", "", "", "Submit", "")
page.Cell(1,1).AddComponent(btn)
  
Dim btn2 As ABMButton
btn2.InitializeFlat(page, "btn2", "", "", "Reset", "")
page.Cell(1,1).AddComponent(btn2)
    
' refresh the page
page.Refresh
...

The code in the buttons to check its validation and to reset the captcha

Sub btn_Clicked(Target As String)
   Dim bool As Boolean = myReCAPTCHA.CheckValidation(page)
   Log(bool)
End Sub

Sub btn2_Clicked(Target As String)
   myReCAPTCHA.Reset(page)
End Sub

 

[Cableguy]

Thank you Alain, you're the greatest... Just under EREL of course

 

[Cableguy]

I'm having a very hard time getting this to work...

The 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

gives a "too many parameters" error, that disapears once I delete the last parameter, which I guess is related to the upcoming version 3.75

Then it compiles ok, but it logs...

...
Waiting for value (100 ms)
An error occurred:
(Line: 0) StartMessageLoop '<- don't forget!
java.lang.Exception: Sub abmcomp_build signature does not match expected signature.
public static anywheresoftware.b4a.pc.RemoteObject b4j.example.comprecaptcha_subs_0._abmcomp_build(anywheresoftware.b4a.pc.RemoteObject,anywheresoftware.b4a.pc.RemoteObject,anywheresoftware.b4a.pc.RemoteObject) throws java.lang.Exception
class anywheresoftware.b4a.pc.RemoteObject, class anywheresoftware.b4a.pc.RemoteObject,
...

 

[alwaysbusy]

You are right, this is 3.75 syntax. For ABMaterial before 3.75, remove the last param in ABMComp.Initialize + remove the InternalPage param from the Build method only.