Learn About Angular ReCaptcha

In this blog, we will learn how to use Angular2 Re-Captcha in Angular programming.

Step 1

First, we need to create an Angular project using Angular CLI.

ng new demo --skip-tests --spec false

--skip-tests command is for removing the test projects

--spec false command is for skipping the test file generation

Step 2

Add angular2-recaptcha package to the project.

npm install angular2-recaptcha

Step 3

Import ReCaptchaModule in app.module.ts.

Step 4

Use recatcha template in app.component.html.

<re-captcha (captchaResponse)="handleCorrectCaptcha($event)" site_key="enter site key"></re-captcha>
<button (click)="checkCaptcha()">Check Captcha</button>

site_key is the Google reCaptcha public key.

Step 5

Handle the captcha response in app.component.ts.

Step 6

Run your application.

ng serve -o

Now, click on the "check captcha" option. It shows the validation.

After success.

Conclusion

Thanks a lot for reading. I hope you liked this article. Please share your suggestions and feedback.