Simple Reusable Captcha Component in AngularJS 2

Simple Reusable Captcha Component in AngularJS 2

Woohoo, I’m almost done with my new web platform using cutting edge Angular JS2 with Bootstrap 4 alpha 6, powered by Laravel 5.2.

The power of these new technologies are just fucking amazing. During the development process, there were many times I was simply in awe at how easy and convenient it was to create and achieve stuff.

Eg. making a member section post list? Just make a member posts container component, and insert the standard post-list component with a username/id parameter. In the words of the late Steve Jobs,

It just works.

So today I’m sharing a little captcha component I created that can be reused in all your forms. I wanted something light and easy, without integration into the official captcha services. If you’re looking for a real Captcha tutorial, please skip this.

The idea is simply to validate a simple dynamic mathematic question.

The UI would look like this.

We’re calling this the antibot component. Make one by typing this in the command line. If you’re manually creating component files in angular2, you’re doing it wrong.

this will generate these files in your project folder, and also automatically declare them in your app.module.ts

The code of the antibot.component.ts is super lean.

So we’re basically generating two random numbers from 1-20 , the answer will be the sum of the both of them.

We create a checkAnswer() method that checks if the user input = the sum of both parts. If so, we return true. Otherwise, we return an error message which gets printed in the view.

Speaking of the view..

Just some flex box bootstrap 4 alpha 6 code.

We interpolate the two numbers to be shown, and bind the text input to the answer variable.

The error div only shows up if the error variable isn’t null.

That’s it! So how do we use it?

We make use of the ViewChild method to achieve two-way binding between the components.

Here is how the antibot component is implemented in the parent contact form’s view.

And in the contact form component, we just need to perform 4 steps.

Import the Antibot component:

Initialize our Antibot component as a ViewChild:

Import the antibot component before the constructor with ViewChild.

This means that from here on, you can pass data to and from the antibot component via this.antiBot

Lastly, on the onSubmit method, simply run the antibot check. If it returns true, proceed with submitting the form. We don’t even need to handle the error here as it is done within the antibot component. We do however need to revert the loading state of the button back to normal.

And that’s it! We just need to perform these 4 steps for every other form component that we want to implement the antibot component to!

All hail, AngularJS 2!!!

 

No Comments

Cancel