alterno logo 2024_Negative (1)

SAPUI5 & Google reCaptcha

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:

Any questions?

Just write us a message!

Fill out the form and we will be in touch as soon as possible!