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
Classes
Interfaces
Type Aliases
Variables
variable RECAPTCHA_BASE_URL
const RECAPTCHA_BASE_URL: InjectionToken<string>;
Deprecated
Use
LOADER_OPTIONS
instead. SeeRecaptchaLoaderOptions.onBeforeLoad
variable RECAPTCHA_LANGUAGE
const RECAPTCHA_LANGUAGE: InjectionToken<string>;
Deprecated
Use
LOADER_OPTIONS
instead. SeeRecaptchaLoaderOptions.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. SeeRecaptchaLoaderOptions.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 {}
class RecaptchaV3Module
class RecaptchaV3Module {}
class ReCaptchaV3Service
class ReCaptchaV3Service {}
The main service for working with reCAPTCHA v3 APIs.
Use the
execute
method for executing a single action, andonExecute
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 stringtoken
value whenever ready. The returnedObservable
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 {}
interface OnExecuteErrorData
interface OnExecuteErrorData {}
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 oneto 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>
- Updated .
Package analyzed in 4092 ms. - Missing or incorrect documentation? Open an issue for this package.