Install hCaptcha in Angular and Angular Universal to monetize your website

As you already know, it is essential to have a system in your web projects that prevents the massive arrival of fake users or automated bots. Until a few months ago, Google reCAPTCHA, presented in the article https://1938.com.es/ejemplo-captcha, was the most widely used system to avoid this type of attack. However, hCaptcha has gradually been gaining market share, surpassing 20% through its more privacy-oriented systems and its monetization model.

In a recent announcement, hCaptcha said it is the largest independent CAPTCHA service on the Internet. They claim to be active on 15% of the Internet, a share they say has largely been taken from Google and its legendary reCAPTCHA. A major push for its growth was undoubtedly the integration with Cloudflare. Internet giant Cloudflare decided to drop Google reCAPTCHA in April of that year and move to hCaptcha.

In this article we are going to show how to install the following hCaptcha, step by step, in your Angular Universal project and obtain extra income from your site.

hCaptcha, reCAPTCHA and Turnstile

These tools solve a similar problem but they do not have the same trade-offs. Google reCAPTCHA is familiar and widely documented, hCaptcha focuses on privacy and independent CAPTCHA infrastructure, and Cloudflare Turnstile tries to reduce visible challenges by using browser and risk signals. In every case, the secure pattern is the same: the Angular app receives a token, but the backend must verify that token before trusting the request.

For an Angular Universal app, the widget must only render in the browser. The server-rendered HTML should still contain the tutorial content, while the CAPTCHA script and browser-only component are delayed until hydration.

Here is the repository https://github.com/al118345/ejemplo-hcaptcha-en-angular-universal for reference and the following explanatory video:

Why hCaptcha

The following list summarizes the advantages of hCaptcha over reCAPTCHA.

Free: hCaptcha is completely free. Google reCAPTCHA is also free, except if you have a very high traffic volume.
You earn revenue: CAPTCHAs solved through hCaptcha are tasks that require people to solve them. Every time a CAPTCHA is solved, hCaptcha gives a token to the site administrator. Those tokens can be converted into money or donated to a nonprofit organization.
You help train new algorithms: solving CAPTCHAs helps train algorithms to better understand human behavior and improve pattern recognition.

Register in hCaptcha

In this article we assume that you already have a Gmail account.

The first step is to register at https://hCaptcha.com/?r=335d4419fb51. Once you access the site and log in with your Gmail account, the following view will appear.

Or from the sites view:

Once inside, we must fill in the form with the domain where we are going to execute it. Below is the example applied to the website 1938.com.es.

Once the form has been completed, the following screen appears with information about the key used to operate the service.

If we click on settings, we can consult the public key to use in our project. Clicking this button takes us to the following tab:

We also need the private key, so we must access the settings tab to obtain it as shown below.

Finally, the private key is located in the settings tab:

Important: for localhost tests, you can use:

Site Key: 10000000-ffff-ffff-ffff-000000000001
Secret Key: 0x0000000000000000000000000000000000000000

Installation

To perform this installation, the project must be split into a frontend and a backend. The frontend will handle user interaction and the backend will communicate with hCaptcha.

From Angular, we install the ng-hcaptcha 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 in the component.html:

And in the component.ts:

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://dashboard.hcaptcha.com/overview you can consult a view like the following image where you can check how much revenue you have obtained.

Running example

Are you a robot? According to hCaptcha:

You are a robot, solve the CAPTCHA

Angular Universal

If you want to install it in Angular Universal, add a small check to avoid server-side rendering problems.

To start, for a correct Angular Universal installation you need to run the following command:

ng add @nguniversal/express-engine

If you get an error like:

ERESOLVE unable to resolve dependency tree

Do not worry. Alternate between this command:

npm install --force @nguniversal/express-engine

and then:

ng add @nguniversal/express-engine

Repeat those last two steps as many times as necessary until the error disappears.

First, here is the code from the component.ts where the logic is added to detect whether it is running on the server side or in the browser.

You may get an error on line 2, @Inject(PLATFORM_ID) private platformId, such as:

TS7006: Parameter 'platformId' implicitly has an 'any' type.

In that case, add the following line to the tsconfig.json file:

And now add the required code in the view, component.html, to avoid the server-rendering problem.