Google reCAPTCHA React

Stable version 2.0.2 (Compatible with OutSystems 11)
Published on 17 Sep (4 weeks ago) by 
0.0
 (0 ratings)

Google reCAPTCHA React

Documentation

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.

 

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 v2 Checkbox represented on the images below:

 

Google reCAPTCHA v2 CheckBox Dependencies

 

2. Get your google reCAPTCHA API key pair.

 

 

 

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.

 

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 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.

 

 

 

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 v2 Invisible represented on the image below:

 

 

Google reCAPTCHA v2 Invisible Dependencies

 

 

 

2. Get your google reCAPTCHA API key pair.

 

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.

 

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 RecaptchaV2 checkbox web-block to our screen , define its inputs and start creating our logic to implement the google reCAPTCHA v2 Invisible 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 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

 

5. Final Overview/Conclusion

 

 

 

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:

 
  1. Place the block anywhere on the screen, configure the parameters.
  2. Implement the Render event saving the captcha's Id.
  3. Call v3Execute client action on each action you wish to protect.
  4. Either use the response token from v3Execute or implement the Callback event to verify the user's response.
 

reCAPTCHA Checkbox:

 
  1. Place the block anywhere on the screen, configure the parameters.
  2. Either call GetResponse or implement the Callback event to obtain the token and verify the user's response.
 

reCAPTCHA v2 Invisible:

 
  1. Place the block anywhere on the screen, configure the parameters.
  2. Call Execute whenever you wish to challenge the user (the challenge may raise or not depending on the user's interaction with the site).
  3. Implement the Callback event to obtain the token and verify the user's response.