reCAPTCHA is a free service that protects your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.
First, we do have to register a Google API key for our WebApp here.
After registering, we receive our API key:
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.
NOTE: this code is for ABMaterial 3.75. For earilier versions, see below what needs to be changed in the code.
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("<a class="linkification-ext" title="Linkification: https://www.google.com/recaptcha/api.js" href="https://www.google.com/recaptcha/api.js">https://www.google.com/recaptcha/api.js</a>")
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
Et voila, we do have a new reCAPTCHA component at our disposal in ABMaterial!
For ABMaterial pre 3.75, make these changes in the code:
Public Sub Initialize(InternalPage As ABMPage, ID As String, APIKey As String) ABMComp.Initialize("ABMComp", Me, InternalPage, ID) ' last param removed mAPIKey = APIKey End Sub ... Sub ABMComp_Build( internalID As String) As String ' InternalPage param removed Return $" <div id="${internalID}render" class="g-recaptcha" data-sitekey="${mAPIKey}"></div> "$ End Sub
Until next Time!
Alwaysbusy