Hi friends!
In this article you will learn how quickly and easily integrate Google reCaptcha in your UI5 project (on the example reCaptcha v2).
The integration process is divided into 2 main steps:
– connecting the Google API file responsible for work reCaptcha
– display reCaptcha
Connecting the Google API
In our example, connecting to the Google API file, we will do in the *.controller.js file that is responsible for the view where reCaptcha will be displayed:
Display reCaptcha
To display the reCaptcha, we need to insert a HTML code (it is the reCaptcha widget itself) to the appropriate place of our project.
How can we make such “injection” from HTML, if the entire UI is written only on XML?!
Using the sap.ui.core library and its special component <HTML /> which embedding HTML standard in the SAPUI5 control tree:
Checking the result reCaptcha
When reCaptcha is connected – it adds to the project’s own global variable grecaptcha.
Here is an example of the reCaptcha validator:
