ng-recaptcha

  • Version 13.2.1
  • Published
  • 208 kB
  • 2 dependencies
  • MIT license

Install

npm i ng-recaptcha
yarn add ng-recaptcha
pnpm add ng-recaptcha

Overview

Angular component for Google reCAPTCHA

Index

Variables

variable RECAPTCHA_BASE_URL

const RECAPTCHA_BASE_URL: InjectionToken<string>;
  • Deprecated

    Use LOADER_OPTIONS instead. See RecaptchaLoaderOptions.onBeforeLoad

variable RECAPTCHA_LANGUAGE

const RECAPTCHA_LANGUAGE: InjectionToken<string>;
  • Deprecated

    Use LOADER_OPTIONS instead. See RecaptchaLoaderOptions.onBeforeLoad

variable RECAPTCHA_LOADER_OPTIONS

const RECAPTCHA_LOADER_OPTIONS: InjectionToken<RecaptchaLoaderOptions>;
  • See the documentation for RecaptchaLoaderOptions.

variable RECAPTCHA_NONCE

const RECAPTCHA_NONCE: InjectionToken<string>;
  • Deprecated

    Use LOADER_OPTIONS instead. See RecaptchaLoaderOptions.onBeforeLoad

variable RECAPTCHA_SETTINGS

const RECAPTCHA_SETTINGS: InjectionToken<RecaptchaSettings>;

    variable RECAPTCHA_V3_SITE_KEY

    const RECAPTCHA_V3_SITE_KEY: InjectionToken<string>;

      Classes

      class RecaptchaComponent

      class RecaptchaComponent implements AfterViewInit, OnDestroy {}

        constructor

        constructor(
        elementRef: ElementRef<HTMLElement>,
        loader: RecaptchaLoaderService,
        zone: NgZone,
        settings?: RecaptchaSettings
        );

          property badge

          badge?: ReCaptchaV2.Badge;

            property error

            error: EventEmitter<[]>;
            • Deprecated

              `(error) output will be removed in the next major version. Use (errored) instead

            property errored

            errored: EventEmitter<[]>;

              property errorMode

              errorMode: 'handled' | 'default';

                property id

                id: string;

                  property ɵcmp

                  static ɵcmp: i0.ɵɵComponentDeclaration<
                  RecaptchaComponent,
                  're-captcha',
                  ['reCaptcha'],
                  {
                  id: { alias: 'id'; required: false };
                  siteKey: { alias: 'siteKey'; required: false };
                  theme: { alias: 'theme'; required: false };
                  type: { alias: 'type'; required: false };
                  size: { alias: 'size'; required: false };
                  tabIndex: { alias: 'tabIndex'; required: false };
                  badge: { alias: 'badge'; required: false };
                  errorMode: { alias: 'errorMode'; required: false };
                  },
                  { resolved: 'resolved'; error: 'error'; errored: 'errored' },
                  never,
                  never,
                  false,
                  never
                  >;

                    property ɵfac

                    static ɵfac: i0.ɵɵFactoryDeclaration<
                    RecaptchaComponent,
                    [null, null, null, { optional: true }]
                    >;

                      property resolved

                      resolved: EventEmitter<string>;

                        property siteKey

                        siteKey?: string;

                          property size

                          size?: ReCaptchaV2.Size;

                            property tabIndex

                            tabIndex?: number;

                              property theme

                              theme?: ReCaptchaV2.Theme;

                                property type

                                type?: ReCaptchaV2.Type;

                                  method execute

                                  execute: () => void;
                                  • Executes the invisible recaptcha. Does nothing if component's size is not set to "invisible".

                                  method ngAfterViewInit

                                  ngAfterViewInit: () => void;

                                    method ngOnDestroy

                                    ngOnDestroy: () => void;

                                      method reset

                                      reset: () => void;

                                        class RecaptchaFormsModule

                                        class RecaptchaFormsModule {}

                                          property ɵfac

                                          static ɵfac: i0.ɵɵFactoryDeclaration<RecaptchaFormsModule, never>;

                                            property ɵinj

                                            static ɵinj: i0.ɵɵInjectorDeclaration<RecaptchaFormsModule>;

                                              property ɵmod

                                              static ɵmod: i0.ɵɵNgModuleDeclaration<
                                              RecaptchaFormsModule,
                                              [typeof i1.RecaptchaValueAccessorDirective],
                                              [any, typeof i3.RecaptchaCommonModule],
                                              [typeof i1.RecaptchaValueAccessorDirective]
                                              >;

                                                class RecaptchaLoaderService

                                                class RecaptchaLoaderService {}

                                                  constructor

                                                  constructor(
                                                  platformId: Object,
                                                  language?: string,
                                                  baseUrl?: string,
                                                  nonce?: string,
                                                  v3SiteKey?: string,
                                                  options?: RecaptchaLoaderOptions
                                                  );

                                                    property ɵfac

                                                    static ɵfac: i0.ɵɵFactoryDeclaration<
                                                    RecaptchaLoaderService,
                                                    [
                                                    null,
                                                    { optional: true },
                                                    { optional: true },
                                                    { optional: true },
                                                    { optional: true },
                                                    { optional: true }
                                                    ]
                                                    >;

                                                      property ɵprov

                                                      static ɵprov: i0.ɵɵInjectableDeclaration<RecaptchaLoaderService>;

                                                        property ready

                                                        ready: Observable<ReCaptchaV2.ReCaptcha>;

                                                          class RecaptchaModule

                                                          class RecaptchaModule {}

                                                            property ɵfac

                                                            static ɵfac: i0.ɵɵFactoryDeclaration<RecaptchaModule, never>;

                                                              property ɵinj

                                                              static ɵinj: i0.ɵɵInjectorDeclaration<RecaptchaModule>;

                                                                property ɵmod

                                                                static ɵmod: i0.ɵɵNgModuleDeclaration<
                                                                RecaptchaModule,
                                                                never,
                                                                [typeof i1.RecaptchaCommonModule],
                                                                [typeof i2.RecaptchaComponent]
                                                                >;

                                                                  class RecaptchaV3Module

                                                                  class RecaptchaV3Module {}

                                                                    property ɵfac

                                                                    static ɵfac: i0.ɵɵFactoryDeclaration<RecaptchaV3Module, never>;

                                                                      property ɵinj

                                                                      static ɵinj: i0.ɵɵInjectorDeclaration<RecaptchaV3Module>;

                                                                        property ɵmod

                                                                        static ɵmod: i0.ɵɵNgModuleDeclaration<RecaptchaV3Module, never, never, never>;

                                                                          class ReCaptchaV3Service

                                                                          class ReCaptchaV3Service {}
                                                                          • The main service for working with reCAPTCHA v3 APIs.

                                                                            Use the execute method for executing a single action, and onExecute observable for listening to all actions at once.

                                                                          constructor

                                                                          constructor(
                                                                          zone: NgZone,
                                                                          recaptchaLoader: RecaptchaLoaderService,
                                                                          siteKey: string
                                                                          );

                                                                            property onExecute

                                                                            readonly onExecute: Observable<OnExecuteData>;

                                                                              property onExecuteError

                                                                              readonly onExecuteError: Observable<OnExecuteErrorData>;

                                                                                property ɵfac

                                                                                static ɵfac: i0.ɵɵFactoryDeclaration<ReCaptchaV3Service, never>;

                                                                                  property ɵprov

                                                                                  static ɵprov: i0.ɵɵInjectableDeclaration<ReCaptchaV3Service>;

                                                                                    property recaptchaLoader

                                                                                    recaptchaLoader: RecaptchaLoaderService;

                                                                                      method execute

                                                                                      execute: (action: string) => Observable<string>;
                                                                                      • Executes the provided action with reCAPTCHA v3 API. Use the emitted token value for verification purposes on the backend.

                                                                                        For more information about reCAPTCHA v3 actions and tokens refer to the official documentation at https://developers.google.com/recaptcha/docs/v3.

                                                                                        Parameter action

                                                                                        the action to execute

                                                                                        Returns

                                                                                        {Observable} an Observable that will emit the reCAPTCHA v3 string token value whenever ready. The returned Observable completes immediately after emitting a value.

                                                                                      class RecaptchaValueAccessorDirective

                                                                                      class RecaptchaValueAccessorDirective implements ControlValueAccessor {}

                                                                                        constructor

                                                                                        constructor(host: RecaptchaComponent);

                                                                                          property ɵdir

                                                                                          static ɵdir: i0.ɵɵDirectiveDeclaration<
                                                                                          RecaptchaValueAccessorDirective,
                                                                                          're-captcha[formControlName],re-captcha[formControl],re-captcha[ngModel]',
                                                                                          never,
                                                                                          {},
                                                                                          {},
                                                                                          never,
                                                                                          never,
                                                                                          false,
                                                                                          never
                                                                                          >;

                                                                                            property ɵfac

                                                                                            static ɵfac: i0.ɵɵFactoryDeclaration<RecaptchaValueAccessorDirective, never>;

                                                                                              method onResolve

                                                                                              onResolve: ($event: string) => void;

                                                                                                method registerOnChange

                                                                                                registerOnChange: (fn: (value: string) => void) => void;

                                                                                                  method registerOnTouched

                                                                                                  registerOnTouched: (fn: () => void) => void;

                                                                                                    method writeValue

                                                                                                    writeValue: (value: string) => void;

                                                                                                      Interfaces

                                                                                                      interface OnExecuteData

                                                                                                      interface OnExecuteData {}

                                                                                                        property action

                                                                                                        action: string;
                                                                                                        • The name of the action that has been executed.

                                                                                                        property token

                                                                                                        token: string;
                                                                                                        • The token that reCAPTCHA v3 provided when executing the action.

                                                                                                        interface OnExecuteErrorData

                                                                                                        interface OnExecuteErrorData {}

                                                                                                          property action

                                                                                                          action: string;
                                                                                                          • The name of the action that has been executed.

                                                                                                          property error

                                                                                                          error: any;
                                                                                                          • The error which was encountered

                                                                                                          interface RecaptchaSettings

                                                                                                          interface RecaptchaSettings {}

                                                                                                            property badge

                                                                                                            badge?: ReCaptchaV2.Badge;

                                                                                                              property siteKey

                                                                                                              siteKey?: string;

                                                                                                                property size

                                                                                                                size?: ReCaptchaV2.Size;

                                                                                                                  property theme

                                                                                                                  theme?: ReCaptchaV2.Theme;

                                                                                                                    property type

                                                                                                                    type?: ReCaptchaV2.Type;

                                                                                                                      Type Aliases

                                                                                                                      type RecaptchaErrorParameters

                                                                                                                      type RecaptchaErrorParameters = Parameters<
                                                                                                                      NeverUndefined<ReCaptchaV2.Parameters['error-callback']>
                                                                                                                      >;

                                                                                                                        type RecaptchaLoaderOptions

                                                                                                                        type RecaptchaLoaderOptions = {
                                                                                                                        /**
                                                                                                                        * Invoked before the `<script>` tag is appended to the DOM.
                                                                                                                        * Use this function as an opportunity to set `nonce`, as well as modify the URL of the tag.
                                                                                                                        *
                                                                                                                        * Use the `url.searchParams` to set additional query string attributes (including reCAPTCHA language),
                                                                                                                        * or use an entirely different base URL altogether.
                                                                                                                        *
                                                                                                                        * The URL that you provide will then properly set the `"render"` and `"onload"` attributes which are required for proper `ng-recaptcha` wire-up.
                                                                                                                        *
                                                                                                                        * @param url the current URL that was composed. Either modify it in-place, or return a completely new URL.
                                                                                                                        * @returns the final URL that is going to be used as the `src` for the `<script>` tag, along with (optionally) a nonce.
                                                                                                                        *
                                                                                                                        * @example
                                                                                                                        * Provide nonce:
                                                                                                                        * ```ts
                                                                                                                        * {
                                                                                                                        * provide: RECAPTCHA_LOADER_OPTIONS,
                                                                                                                        * useValue: {
                                                                                                                        * onBeforeLoad(url) {
                                                                                                                        * return {
                                                                                                                        * url,
                                                                                                                        * nonce: "YOUR_NONCE"
                                                                                                                        * };
                                                                                                                        * }
                                                                                                                        * }
                                                                                                                        * }
                                                                                                                        * ```
                                                                                                                        *
                                                                                                                        * Set the reCAPTCHA language:
                                                                                                                        * ```ts
                                                                                                                        * {
                                                                                                                        * provide: RECAPTCHA_LOADER_OPTIONS,
                                                                                                                        * useValue: {
                                                                                                                        * onBeforeLoad(url) {
                                                                                                                        * url.searchParams.set("hl", "en-GB")
                                                                                                                        *
                                                                                                                        * return { url };
                                                                                                                        * }
                                                                                                                        * }
                                                                                                                        * }
                                                                                                                        * ```
                                                                                                                        *
                                                                                                                        * Use a different base URL for loading reCAPTCHA
                                                                                                                        * ```ts
                                                                                                                        * {
                                                                                                                        * provide: RECAPTCHA_LOADER_OPTIONS,
                                                                                                                        * useValue: {
                                                                                                                        * onBeforeLoad(_url) {
                                                                                                                        * const chinaCompatibleUrl = new URL("https://www.recaptcha.net/recaptcha/api.js");
                                                                                                                        * // optionally, set the locale:
                                                                                                                        * // chinaCompatibleUrl.searchParams.set("hl", "zh-CN");
                                                                                                                        *
                                                                                                                        * return {
                                                                                                                        * url: chinaCompatibleUrl
                                                                                                                        * };
                                                                                                                        * }
                                                                                                                        * }
                                                                                                                        * }
                                                                                                                        * ```
                                                                                                                        */
                                                                                                                        onBeforeLoad?(url: URL): {
                                                                                                                        url: URL;
                                                                                                                        nonce?: string;
                                                                                                                        };
                                                                                                                        /**
                                                                                                                        * Allows you to change the `grecaptcha` that the `ng-recaptcha` will be relying on.
                                                                                                                        * This method is useful when you need to use `grecaptcha.enterprise` instead of the base `grecaptcha`
                                                                                                                        *
                                                                                                                        * @param recaptcha the value of `window.grecaptcha` upon script load.
                                                                                                                        * @returns the {ReCaptchaV2.ReCaptcha} instance that the `ng-recaptcha` lib will use.
                                                                                                                        *
                                                                                                                        * @example
                                                                                                                        * Using the Enterprise version of `grecaptcha`:
                                                                                                                        *
                                                                                                                        * ```ts
                                                                                                                        * {
                                                                                                                        * provide: RECAPTCHA_LOADER_OPTIONS,
                                                                                                                        * useValue: {
                                                                                                                        * onBeforeLoad() {
                                                                                                                        * const recaptchaEnterpriseUrl = new URL("https://www.google.com/recaptcha/enterprise.js");
                                                                                                                        * // optionally, if you're using the reCAPTCHA session-tokens, set the `&waf=session` param,
                                                                                                                        * // see https://cloud.google.com/recaptcha-enterprise/docs/implement-waf-ca#session-token
                                                                                                                        * // recaptchaEnterpriseUrl.searchParams.set("waf", "session");
                                                                                                                        *
                                                                                                                        * return {
                                                                                                                        * url: recaptchaEnterpriseUrl,
                                                                                                                        * }
                                                                                                                        * },
                                                                                                                        * onLoaded(recaptcha) {
                                                                                                                        * return recaptcha.enterprise;
                                                                                                                        * }
                                                                                                                        * }
                                                                                                                        * }
                                                                                                                        * ```
                                                                                                                        */
                                                                                                                        onLoaded?(recaptcha: ReCaptchaV2.ReCaptcha): ReCaptchaV2.ReCaptcha;
                                                                                                                        };
                                                                                                                        • Specifies the options for loading the reCAPTCHA script tag.

                                                                                                                        Package Files (10)

                                                                                                                        Dependencies (2)

                                                                                                                        Dev Dependencies (0)

                                                                                                                        No dev dependencies.

                                                                                                                        Peer Dependencies (1)

                                                                                                                        Badge

                                                                                                                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ng-recaptcha.

                                                                                                                        • Markdown
                                                                                                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ng-recaptcha)
                                                                                                                        • HTML
                                                                                                                          <a href="https://www.jsdocs.io/package/ng-recaptcha"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>