Install Google reCAPTCHA in your Angular or Angular Universal project
Have you ever entered a website and, when filling in a form, had to "prove" that you are a human being?
That validation with slightly distorted text or image selection is known as reCAPTCHA, a Google security resource designed to protect websites against spam and abusive activity by distinguishing humans from automated bots.
In this article we are going to explain how to install the following reCAPTCHA, step by step, in your Angular Universal project.
Indexable summary
The important point in this implementation is that the browser only obtains a temporary reCAPTCHA token. The final verification must happen in the backend, where the private key is stored and where the response from Google can be trusted before accepting a form submission or API action.
If you are building a newer Angular Universal project and prefer hCaptcha, the related article hCaptcha in Angular Universal follows a similar security pattern. For APIs that should not expose credentials to the browser, see also the Nginx and FastAPI proxy pattern.
Here is the repository https://github.com/al118345/angular_recaptcha_gooogle for reference and the following explanatory video:
Register in Google reCAPTCHA
In this article we assume that you already have a Gmail account.
The first step is to register at https://www.google.com/recaptcha/admin/create. Once you access the page and log into your Gmail account, the following form will appear and must be filled in.
Important: create two registrations, one for the chosen domain and another one for localhost in order to perform tests before going into production.
Once the form has been completed, the next screen will appear with the information about the key needed to use the service.
Angular HttpClientModule setup
First of all, through the following repository link https://github.com/al118345/angular_recaptcha_gooogle/tree/main/src/app/components/asincrono you can access an example of this type of communication. For the backend side, you have the following example in the repository https://github.com/al118345/TestComunicacionApiRest_Angular.
To perform this installation, the project must be split between a frontend and a backend. On the frontend side, in this part of the project we chose to use an Angular library that allows communication with the backend. The library is calledHttpClientModule.
If your project is going to use another framework, for example React or Vue, you will need to look for the library that best fits your project. A multiplatform library is XmlHttpRequest https://www.npmjs.com/package/xmlhttprequest, and an example of how to use it is shown in the next section of this project.
With HttpClientModule, the communication will be asynchronous. The frontend handles the user interaction and the backend communicates with Google, but the user does not perceive that work. Navigation does not stop and you can, for example, show a loading state while waiting for the response on the page.
From Angular, we install the ng-recaptcha package with the following command:
In addition, we create the following service to communicate with the Python API.
We import the module into our app with the following code:
And we add the functionality to the component:
Finally, we modify the API so it can receive the frontend request by creating the following route in the project https://github.com/al118345/envio_email_api_python.
To finish, at https://www.google.com/u/3/recaptcha/admin/ you can consult a view like the following image where you can check how many people have logged in and the average score obtained.
Running example with async verification
Async Google reCAPTCHA example using HttpClient
Are you a robot? According to Google reCAPTCHA, at the moment you are:
You are a robot
Synchronous XmlHttpRequest version
Important: with this installation, the execution of your page will stop until the captcha result is obtained. That means it cannot show a loading message or perform any kind of scrolling meanwhile.
First of all, through the following repository link https://github.com/al118345/angular_recaptcha_gooogle/tree/main/src/app/components/sincrono you can access an example of this type of communication. For the backend you have the following example in the repository https://github.com/al118345/TestComunicacionApiRest_Angular.
To perform this installation, the project must be split between a frontend and a backend. The frontend will handle user interaction and the backend will communicate with Google.
From Angular we install the ng-recaptcha package with the following command:
In addition, we create the following service to communicate with the Python API.
We import the module into our app with the following code:
And we add the functionality to the component:
Finally, we modify the API so it can receive the frontend request by creating the following route in the project https://github.com/al118345/envio_email_api_python.
To finish, at https://www.google.com/u/3/recaptcha/admin/ you can consult a view like the following image where you can check how many people have logged in and the average score obtained.
Running example
Synchronous XmlHttpRequest example
Are you a robot? According to Google reCAPTCHA:
You are a robot