Introduction is a development platform for building WEB, mobile, and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 14, and Google is the main maintainer of the project. Angular is a simple and configurable reCAPTCHA v2 and v3 component library. ng-recaptcha Prerequisites Before you start, you need to install and configure the tools: git Node.js and npm Angular CLI IDE (e.g. ) Visual Studio Code Getting started Create and configure the account on the Google reCAPTCHA Let's create the account. Access the site and click on the button . 1. https://www.google.com/recaptcha/ v3 Admin Console Fill in the field and click on the button to login with your Google account and if you don't have an account, just create a new account. 2. Email or phone Next Fill in the field , click on the option , Fill in the field , click on the checkbox and click on the button . 3. Label reCAPTCHA v2 Domains Accept the reCAPTCHA Terms of Service Submit Click on the button to copy the key. In my case, the key was copied because this key will be configured in the Angular application. 4. COPY SITE KEY 6LfKNi0cAAAAACeYwFRY9_d_qjGhpiwYUo5gNW5- Ready! The keys have been generated. 5. Create the Angular Application Let’s create the application with the Angular base structure using the with the route file and the SCSS style format. 1. @angular/cli ng new angular-recaptcha-v2
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-recaptcha-v2/README.md (1064 bytes)
CREATE angular-recaptcha-v2/.editorconfig (274 bytes)
CREATE angular-recaptcha-v2/.gitignore (604 bytes)
CREATE angular-recaptcha-v2/angular.json (3291 bytes)
CREATE angular-recaptcha-v2/package.json (1082 bytes)
CREATE angular-recaptcha-v2/tsconfig.json (783 bytes)
CREATE angular-recaptcha-v2/.browserslistrc (703 bytes)
CREATE angular-recaptcha-v2/karma.conf.js (1437 bytes)
CREATE angular-recaptcha-v2/tsconfig.app.json (287 bytes)
CREATE angular-recaptcha-v2/tsconfig.spec.json (333 bytes)
CREATE angular-recaptcha-v2/src/favicon.ico (948 bytes)
CREATE angular-recaptcha-v2/src/index.html (304 bytes)
CREATE angular-recaptcha-v2/src/main.ts (372 bytes)
CREATE angular-recaptcha-v2/src/polyfills.ts (2820 bytes)
CREATE angular-recaptcha-v2/src/styles.scss (80 bytes)
CREATE angular-recaptcha-v2/src/test.ts (788 bytes)
CREATE angular-recaptcha-v2/src/assets/.gitkeep (0 bytes)
CREATE angular-recaptcha-v2/src/environments/environment.prod.ts (51 bytes)
CREATE angular-recaptcha-v2/src/environments/environment.ts (658 bytes)
CREATE angular-recaptcha-v2/src/app/app-routing.module.ts (245 bytes)
CREATE angular-recaptcha-v2/src/app/app.module.ts (393 bytes)
CREATE angular-recaptcha-v2/src/app/app.component.scss (0 bytes)
CREATE angular-recaptcha-v2/src/app/app.component.html (24617 bytes)
CREATE angular-recaptcha-v2/src/app/app.component.spec.ts (1115 bytes)
CREATE angular-recaptcha-v2/src/app/app.component.ts (225 bytes)
✔ Packages installed successfully. Install and configure the Bootstrap CSS framework. Then, do steps 2 and 3 of the post, . 2. Adding the Bootstrap CSS framework to an Angular application Configure the variable with the Google reCAPTCHA key in the and files as below. 3. siteKey src/environments/environment.ts src/environments/environment.prod.ts recaptcha: {
  siteKey: '6LfKNi0cAAAAACeYwFRY9_d_qjGhpiwYUo5gNW5-',
}, Install the library. 4. ng-recaptcha npm install ng-recaptcha Import the , , modules. Configure the Google reCAPTCHA key. Change the file and add the lines as below. 5. FormsModule RecaptchaFormsModule RecaptchaModule app.module.ts import { FormsModule } from '@angular/forms';
import { RECAPTCHA_SETTINGS, RecaptchaFormsModule, RecaptchaModule, RecaptchaSettings } from 'ng-recaptcha';

import { environment } from '../environments/environment';

imports: [
  BrowserModule,
  FormsModule,
  AppRoutingModule,
  RecaptchaModule,
  RecaptchaFormsModule,
],
providers: [
  {
    provide: RECAPTCHA_SETTINGS,
    useValue: {
      siteKey: environment.recaptcha.siteKey,
    } as RecaptchaSettings,
  },
], Remove the contents of the class from the file. Import the component and create the method as below. 6. AppComponent src/app/app.component.ts NgForm send import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  token: string|undefined;

  constructor() {
    this.token = undefined;
  }

  public send(form: NgForm): void {
    if (form.invalid) {
      for (const control of Object.keys(form.controls)) {
        form.controls[control].markAsTouched();
      }
      return;
    }

    console.debug(`Token [${this.token}] generated`);
  }

} Remove the contents of the file. Add the component as below. 7. src/app/app.component.html re-captcha <div class="container-fluid py-3">
  <h1>Angular reCAPTCHA v2</h1>

  <form #form="ngForm">
    <div class="row mt-3">
      <div class="col-sm-12 mb-2">
        <re-captcha id="recaptcha" name="recaptcha" #recaptcha="ngModel" [(ngModel)]="token" required [class.is-invalid]="recaptcha.invalid && (recaptcha.dirty || recaptcha.touched)"></re-captcha>
        <div *ngIf="recaptcha.invalid && (recaptcha.dirty || recaptcha.touched)" class="invalid-feedback">
          <div *ngIf="recaptcha.errors?.['required']">This field is required.</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 mb-2">
        <button type="button" class="btn btn-sm btn-primary" (click)="send(form)">Send</button>
      </div>
    </div>
  </form>
</div> Add the style in the file as below. 8. src/app/app.component.scss re-captcha.is-invalid > div {
  border: 1px solid #dc3545 !important;
  border-radius: 0.2rem;
} Run the application with the command below. 9. npm start

> angular-recaptcha-v2@0.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.73 MB
styles.css          | styles        | 266.58 kB
polyfills.js        | polyfills     | 128.52 kB
scripts.js          | scripts       |  76.67 kB
main.js             | main          |  15.54 kB
runtime.js          | runtime       |   6.64 kB

                    | Initial Total |   3.21 MB

Build at: 2021-08-28T12:35:07.166Z - Hash: 0612b9d911a0acdf2b42 - Time: 10102ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully. Ready! Access the URL and check if the application is working. See the application working on and . 10. http://localhost:4200/ GitHub Pages Stackblitz The application repository is available at . https://github.com/rodrigokamada/angular-recaptcha-v2 This tutorial was posted on my in Portuguese. blog

Google

Adding the log component to an Angular application

Adding the social media share buttons component to an Angular application

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

Too Long; Didn't Read

Make resilience your competitive advantage

Adding the Google reCAPTCHA v2 to an Angular application

Adding the Google reCAPTCHA v2 to an Angular application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Hosting an Angular application on GitHub Pages using GitHub Actions

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Hosting an Angular application on GitHub Pages using GitHub Actions

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps