Negating Past Mistakes

    @alekremi/ngx-recaptcha-v3
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Library to integrate Recaptcha v3 with Angular

    npm version npm bundle size Depfu

    Google reCaptcha v3 service implementation for Angular 12 and beyond.

    Demo

    StackBlitz live example.

    Installation

    npm install --save @alekremi/ngx-recaptcha-v3

    Usage

    Import NgxRecaptchaV3Module to Angular AppModule.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
    
    import { NgxRecaptchaV3Module } from '@alekremi/ngx-recaptcha-v3';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      imports: [BrowserModule, HttpClientModule, HttpClientXsrfModule, NgxRecaptchaV3Module],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    Jnject NgxRecaptchaV3Service in your component / service and then use execute method with your action. Once you have the token, you need to verify it on your backend to get meaningful results.

    For example if your external LoginService looks like:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { User } from './user';
    
    @Injectable()
    export class LoginService {
      constructor(private httpClient: HttpClient) {}
    
      login(username: string, password: string): Observable<User> {
        return this.httpClient.post<User>('https://my-domain.com/api/login', { username, password });
      }
    }

    then NgxRecaptchaV3Service using:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { User } from './user';
    
    import { NgxRecaptchaV3Service } from '@alekremi/ngx-recaptcha-v3';
    
    @Injectable()
    export class LoginService {
      constructor(private httpClient: HttpClient, private recaptchaV3Service: NgxRecaptchaV3Service) {}
    
      login(username: string, password: string): Observable<User> {
        return this.recaptchaV3Service
          .execute(RECAPTCHA_SITE_KEY, 'login')
          .pipe(mergeMap((token) => this.httpClient.post<User>('https://my-domain.com/api/login', { username, password, token })));
      }
    }

    Advanced usage

    Additionaly you can provide NgxRecaptchaOptions:

    Option Optional Description
    language Yes reCaptcha language (badge, errors and etc.)
    badgeHidden Yes provide if you want execute reCaptcha action with hidden badge

    Execute action with provided language:

    reCaptcha supported languages: https://developers.google.com/recaptcha/docs/language

    this.recaptchaV3Service.execute(RECAPTCHA_SITE_KEY, 'login', { language: 'de' });

    Execute action with hidden badge:

    this.recaptchaV3Service.execute(RECAPTCHA_SITE_KEY, 'login', { badgeHidden: true });

    Note: You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

    This site is protected by reCAPTCHA and the Google
        <a href="https://policies.google.com/privacy">Privacy Policy</a> and
        <a href="https://policies.google.com/terms">Terms of Service</a> apply.

    For more info see FAQ: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

    Unload reCaptcha manually:

    this.recaptchaV3Service.unload();

    This method will remove recaptcha badge and scripts.

    Install

    npm i @alekremi/ngx-recaptcha-v3

    DownloadsWeekly Downloads

    5

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    58.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • alekremi