reCAPTCHA v3
In the steps below, we will implement the reCAPTCHA v3 on our page. This is a simple page displaying a list of articles where the user has the option to add products or delete them. We will have the reCAPTCHA v3 implemented on those two buttons and before the user's action takes the chosen action, the reCATPCHA v3 will run.
1. Make the component available on your application.
Install the component on your environment and manage the dependencies on the application you want to consume it. Select the various elements all referring to the reCAPTCHA v3 represented on the image below:
Select all the elements needed for the reCAPTCHA v3 to work
2. Get your google reCAPTCHA API key pair.
Create two site properties on your application to receive the google API keys, call them v3_Key and v3_Secret. Their data type is text. They should now be available to fill on your applications Service Center page.
To fill in these site properties you need to sign up for an API key pair for your site .The key pair consists of a site key and secret key. The site key is used to invoke reCAPTCHA service on your site or mobile application. The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user's response. After the sign up, set those two key values in the two respectively site properties in Service Center.
Sign up to get the API key pair
Copy the values and paste then in the Service Center respective keys
3. Place the component in your screen
With all the component's elements in our application ready to use and the Site Properties properly filled, we can now drag and drop the RecaptchaV3 web-block to our screen , define its inputs and start creating our logic to implement the google reCAPTCHA v3 protection.
The recaptchaTheme, reCaptchaBadge and HideBadge are inputs to help with the look of the recaptcha on the screen. The first two can be defined with the help of the Static Entities that are provided by the component. To see a demonstration of these different inputs and their impact on the screen go to the Preferences screen on the demo. The SiteKey input is the site property defined in the step above (v3_key). You should create a Data Action on your screen to retrieve this site property and have access to it on the screen. Then just simply use it to fill the SiteKey input on the web block.
Define the RecaptchaV3 web block inputs
4. Create the logic to support the reCAPTCHA v3
We need to create three client actions, we will call them RecaptchaV3Render, RecaptchaV3Execute and RecaptchaV3Callback:
RecaptchaV3Render: Use this action to attribute an ID to your reCAPTCHA webBlock, this is useful when we have more than one reCAPTCHA implementations to different elements in our screen. First create a local variable reCAPTCHAv3_Id of type text on your screen and then create the RecaptchaV3Render client action with one input parameter called Id (type:text). Inside this action, assign the local variable Id to this ID.
RecaptchaV3Render Client Action
RecaptchaV3Render Assign.
Define this Client Action as a Handler of the Render Event on the RecaptchaV3 web-block referenced on step 3.
RecaptchaV3Execute: This is the client action that should be defined as the on click action on your button/link. This will run JavaScript (v3Execute) that will provide the data to the next action (linking it with your backend) and calculate the user 'score'. Don't create any business logic on this action.
Create a client action named RecaptchaV3Execute and create an input parameter named ActionName. Create a flow matching the following one (for the inputs asked by the v3Execute, place the local variable for the RecapchaId and the ActionName input for the Action) :
RecaptchaV3Execute client action
Place then this client action as the on click Event of our Add Product and Remove Selected buttons, define the action name as well with the text that you find more suitable, this input will come handy later on these instructions.
Place the V3Execute client action as the on click event of your Button.
RecaptchaV3Callback: this callback action will run after the RecaptchaV3Execute and will determine if the business action is safe or not to be executed, based on the resulting score and the threshold defined by the developer. This result is obtained by running the v3Verify_Wrapper server action inside this client action, which will be defined now.
Create a v3Verify_Wrapper server action that will gather the response from the server, this server action should have two input parameters (In_Response (text) and In_RemoteIP(Boolean) and an output parameter of the type structure (PostSiteverifyResponse structure that comes with the component), inside the flow you should run the verify token server action that comes with the component and then assign the output of the verify token to the output of the server action. The server action flow should be similar to this:
v3Verify_Wrapper server action
VerifyToken server action
v3Verify_Wrapper assignment
With this server action created, we can now create the RecaptchaV3Callback client action. The goal of this action is to retrieve the score obtained by the interaction of the user with the website and have the logic to decide if we should let the user continue with the intended business action or block it. This is obtained by creating an if statement comparing our defining threshold with the score output that comes from the wrapper server action created just above. This score provided by the server action will be between 0.0 and 1.0. 1.0 is very likely a good interaction and 0.0 is very likely a bot.
If the verification succeeds, we need then to have a way to define what business action to execute (remember that this callback action will run when you press the add product or remove products buttons). We can define this logic by placing an if widget after the validation of the captcha and using the action name defined on the step above at the buttons on the On Click event.
Example RecaptchaV3Callback client action available on the demo.
Condition of the If statement
Place this client action as the handler of the Callback trigger that exists on the web block that we just placed on the screen on step 3. After concluding it will have the following configuration:
reCAPTCHAv3 web block configuration finalized.
5. Final overview/Conclusion.
As we mention in the introduction, the goal of these steps was to implement a google reCAPTCHA v3 security system to our simple web page. After following these steps we should have this reCAPTCHA v3 working without problems, please check the demo for this use-case and the demo code that is also available with the component.
reCAPTCHA v2 Checkbox
In the steps below, we will implement the reCAPTCHA v2 Checkbox on our page. This is a simple page where the user has the option to submit a form. In the end of the following instructions, we will have the reCAPTCHA v2 Checkbox implemented and the user will only be able to perform the action after properly selecting the Checkbox.
Install the component on your environment and manage the dependencies on the application you want to consume it. Select the various elements all referring to the reCAPTCHA v2 Checkbox represented on the images below:
Google reCAPTCHA v2 CheckBox Dependencies
Create two site properties on your application to receive the google API keys, call them v2_checkbox_Key and v2_checobox_Secret. Their data type is text. They should now be available to fill on your applications Service Center page.
3. Place the component in your screen.
With all the component's elements in our application ready to use and the Site Properties properly filled, we can now drag and drop the RecaptchaV2 checkbox web-block to our screen , define its inputs and start creating our logic to implement the google reCAPTCHA v3 protection.
The recaptchaTheme and reCaptchaBadge are inputs to help with the look of the recaptcha on the screen. The first two can be defined with the help of the Static Entities that are provided by the component. To see a demonstration of these different inputs and their impact on the screen go to the Preferences screen on the demo. The SiteKey input is the site property defined in the step above (v3_key). You should create a Data Action on your screen to retrieve this site property and have access to it on the screen. Then just simply use it to fill the SiteKey input on the web block.
Fill in the parameters with the help of the Static Entities provided by the component.
4. Create the logic to support the reCAPTCHA v2 Checkbox.
We need to define now a couple of client actions to deal with our newly-placed web-block and our button to submit a form.
reCaptchaCheckbox1Render : Use this action to attribute an ID to your reCAPTCHA v2 Checkbox webBlock, this is useful when we have more than one reCAPTCHA v2 Checkbox implementations on different elements in our screen. First create a local variable Checkbox1_Id of type text on your screen and then create the reCaptchaCheckbox1Render client action with one input parameter called Id (type:text). Inside this action assign the local variable to this ID.
Checkbox1Render client action
Checkbox1Render Assign.
Define this client action as a Handler of the Render Event on the checkbox web-block referred on step 3.
Your business oriented client action : This is the action that will run when the user interacts with the screen but before running it, it will check if the checkbox was properly clicked by the user. In our use case we are implementing a button to submit a form, so before this action occurs we need to understand if the reCaptcha v2 Checkbox was ticked. To achieve this, drag and drop the client action named GetResponse and fill the WidgetId input parameter with the created local variable Checkbox1_Id. This output will contain the response to If our checkbox was ticked or not, so we need to create an If statement to decide based on that. The client action flow for our action will look like this:
Example of the flow on the demo for the business oriented action
Condition on the If Widget to check if the checkbox was properly ticket.
An optional callback action: You can define an action to run when the user ticks the Checkbox action. In our demo, we are just logging into our console the results of ticking the checkbox. This server and client action available in this callback action are defined on the demo. The v2CheckboxVerify_Wrapper checks the response from the server and returns this response and the client action just displays it on the browsers console. Check the demo code to find more details about these actions.
You can implement your business action on this callback so that action fires automatically when the user ticks the checkbox.
CheckboxCallback optional callback example on the available demo
After defining all the actions, define the handlers of the checkbox web block with two of these created client actions, in the end it should look like this:
Checkbox Web block with the appropriate handlers.
5. Final Overview/Conclusion
As we mention in the introduction, the goal of these steps was to implement a google reCAPTCHA v2 checkbox security system to our simple web page that lets a user submit a form. After following these steps we should have a recaptcha V2 Checkbox system that only lets the user submit the information after successfully completing the ticking of the checkbox. Check the demo available to see this simple use case and the demo code that is also available with the component.
reCAPTCHA v2 Invisible
In the steps below, we will implement the reCAPTCHA v2 Invisible on our page. This is a simple page where the user has the option to submit a form. In the end of the following instructions, we will have the reCAPTCHA v2 Invisible implemented so every time the user uses the submit button, this reCAPTCHA will run.
Install the component on your environment and manage the dependencies on the application you want to consume it. Select the various elements all referring to the reCAPTCHA v2 Invisible represented on the image below:
Google reCAPTCHA v2 Invisible Dependencies
Create two site properties on your application to receive the google API keys, call them v2_Invisible_Key and v2_Invisible_Secret. Their data type is text. They should now be available to fill on your applications Service Center page.
With all the component's elements in our application ready to use and the Site Properties properly filled, we can now drag and drop the RecaptchaV2 checkbox web-block to our screen , define its inputs and start creating our logic to implement the google reCAPTCHA v2 Invisible protection.
Define the Invisible web-block inputs.
4. Create the logic to support the reCAPTCHA v2 Invisible.
We need to define now a couple of client actions and a local variable to deal with our newly-placed web-block and our button to submit the form.
Create a local variable of type record with the data type Record with the following configuration:
Set a local variable of the data type Record
Create a client action to attribute an ID to your reCAPTCHA v2 Invisible webBlock with an input parameter named Id. This is useful when we have more than one reCAPTCHA v2 Invisible implementations on different elements in our screen. Inside this action just assign the Id attribute of the local variable to the Id input of the client action.
InvisibleRender Client Action
Assign the local variable Id to the input Id
Create the client action to deal with the event when the user interacts with the website (in this case the button to submit the form). This action should not contain any business logic. It should trigger a client action available by the component named execute - pass the local variable Id as the widget_id of this client action. Your flow should look like this:
Client Action defined on the button of the Demo
Create a callback client action to be executed after the Execute runs in the action defined just above. This callback is executed when the user successfully solves the captcha (meaning that either the user solved the challenge or it was not necessary). This is the action where you need to put your business logic. Place the Reset client action available by the component on the flow and link it with the Id attribute of the local variable. Your flow should look like this:
Business related Client Action
As we mention in the introduction, the goal of these steps was to implement a google reCAPTCHA v2 Invisible security system to our simple web page that lets a user submit a form. After following these steps we should have this reCAPTCHA v2 Invisible component working without problems please check the demo for this use-case and the demo code that is also available with the component.
Summary of how to use this component :
reCAPTCHA v3:
reCAPTCHA Checkbox:
reCAPTCHA v2 Invisible: