Google’s recaptcha v2 integration with angular forms

If you want to add simple security to your UI form such that it does not hinder the customer’s experience, then google’s recaptcha is an apt solution.

In this article we will see how to add google’s recaptcha v2 to your angular form.

Step 1: Register for recaptcha v2 and get the site tokens

First and foremost you will need to sign in with your google account and register to get the “site key” which will be used by angular to display the recaptcha.

To register, signin with you google account and then go to the recaptcha admin page.

• Provide a label. For ex: “recaptcha-demo”.
• Select reCAPTCHA v2 and “I’m not a robot” Checkbox.
• Then add your domain(in our case we will be giving localhost).
• Accept Terms and Services and Submit.

Once submitted, we get the Site Key and Site Secret. Copy and have these 2 tokens.

Step 2: Add recaptcha to your angular form

• In your angular project install ng-recaptcha (npm install ng-recaptcha).
• Import RecaptchaModule and RecaptchaFormsModule in app.module.ts and add them to the imports array.
• In your form component, inside the div container where you want recaptcha to display, add the re-captcha component as below and replace the “YOUR-SITE-KEY” with the Site Key token which was copied in step 1.

FOR REACTIVE FORM:
<re-captcha
   formControlName="recaptchaReactive" siteKey="YOUR-SITE-KEY">
</re-captcha>
FOR TEMPLATE DRIVEN FROM:
<re-captcha
   name="recaptchaReactive" ngModel siteKey="YOUR-SITE-KEY">
</re-captcha>

• Now launch your angular app and you will be able to see the recaptcha

Step 3: Disable form submission until captcha is resolved

The final step in our case now is to disable the form submission so that the user cannot submit the form unless captcha is resolved. For this we will be using the disabled directive in angular.

We can apply disable property on a button using the disabled directive which checks for a boolean condition. Generally this is used with form validation. In our case though, we will be checking if the captcha is resolved before enabling the button.

• Create a boolean variable captchaResolved which is false by default.

public captchaResolved : boolean = false;

• Now create a method to check captcha response

checkCaptcha(captchaResponse : string) {
    this.captchaResolved = (captchaResponse && captchaResponse.length > 0) ? true : false
}

• Now event bind this method to resolved event of re-captcha component

<re-captcha (resolved)="checkCaptcha($event)"
  name="recaptchaReactive"ngModel siteKey="YOUR-SITE-KEY">
</re-captcha>

• Finally data bind the captchaResolved field with the disabled attribute directive.

<div class="form-group centered">
   <button [disabled]="!captchaResolved" type="submit" class="btn btn-primary">SignIn</button>
</div>

• Now if we load our form, we can see that the submit button is disabled unless we resolve the captcha

• If recaptcha identifies some kind of fraudulent activity happening, it will display the image verification pop up.

• And now your form is secured with recaptcha.

Conclusion:

In this article we just saw a simple demo for adding recaptcha with Angular forms. You can use the same library to configure recaptcha v3. Visit the official documentation here.