When we deal with some websites you may experience that there is a validation called reCAPTCHA, which proves that you are not a robot.
reCAPTCHA is a type of Human Interaction Proof and CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. It is owned by Google and it has several types like type a word or tick matching images to do the validation using reCAPTCHA. It is a kind of a challenge that helps to identify real users and the computer programs that they are deal with.
Let’s look into how to add reCAPTCHA validation to your application using the Angular framework.
- You can add this to your existing Angular project or if not you can create a new project using
ng new your_project_name.
After the successful creation of the Angular project, it is needed to open the project and open the terminal.
2. In order to add CAPTCHA validation to your project it is necessary to install “NgxCaptchaModule” to the existing project. Therefore open your terminal and use this command npm i ngx-captcha .
3. Then import “NgxCaptchaModule” to the app.module.ts.
It is important to notice that, most of the time we use CAPTCHA validation in a form. Therefore we need to implement an Angular form using “ReactiveFormsModule” and “FormsModule”. For that purpose make sure to import “ReactiveFormsModule” and “FormsModule” to the app.module.ts.
4. Then we need to create a form in the app.component.html and app.component.ts as follows.
Under the ngx-recaptcha2 tag in app.component.html, there are several parameters you can customize. But in this case, we need only the “siteKey” and “formControlName”. In your app.component.ts, import necessary modules and create necessary variables. Here there is a field called site key. You need to get it by registering on Google reCAPTCHA by visiting https://www.google.com/recaptcha/admin/create. When you are going to get the site key, it is needed to fill the following mentioned fields.
Here you have to provide your website name as the label. Then need to choose either v3 or v2 version of Google reCAPTCHA validation. After that provide localhost as Domain. Under the “Owners”, it will come as an automatically filled area with your email that used to sign in to your Google Account. Then put a tick if you are agreed to the Terms and Conditions provides by Google reCAPTCHA. Then click the “Submit” button.
Then you will redirect to the page that has the “siteKey” and copy the key.
5. Then move to your app.component.ts file and paste the siteKey by creating an instance of siteKey.
Now save all the changes and run the project. You can observe that your Angular web page contains the CAPTCHA validation. After you can customize your own form fields and do further form implementations. As an example, you can disable submit button till the CAPTCHA response validates. By below piece of code adding to the app.component.html, you can disable the submit button of the form which you have created. (Here button has added MD Bootstrap stying)
<button type="button" mdbBtn color="primary [disabled]="!aFormGroup.valid">Submit</button>By doing the above steps you can successfully create an Angular form with reCAPTCHA validation.
Thank you for reading. Hit a clap if this article is useful for you!!! 🤗
