ng-recaptcha - npm Package Compare versions

Comparing version 13.0.0 to 13.1.0

CHANGELOG.md

		@@ -0,1 +1,11 @@
		<a name="13.1.0"></a>
		# [13.1.0](https://github.com/DethAriel/ng-recaptcha/compare/v13.0.0...v13.1.0) (2023-11-24)


		### Features

		* component: load recaptcha script using code compatible with trusted types ([88d257b](https://github.com/DethAriel/ng-recaptcha/commit/88d257b)), closes [#304](https://github.com/DethAriel/ng-recaptcha/issues/304)



		<a name="13.0.0"></a>
		@@ -2,0 +12,0 @@

lib/load-script.d.ts

		@@ -10,3 +10,7 @@ /// <reference types="grecaptcha" />
		};
		declare function loadScript(renderMode: RenderMode, onLoaded: (grecaptcha: ReCaptchaV2.ReCaptcha) => void, urlParams: string, url?: string, nonce?: string): void;
		declare function loadScript(renderMode: RenderMode, onLoaded: (grecaptcha: ReCaptchaV2.ReCaptcha) => void, { url, lang, nonce }?: {
		url?: string;
		lang?: string;
		nonce?: string;
		}): void;
		export declare const loader: {
		@@ -13,0 +17,0 @@ loadScript: typeof loadScript;

package.json

		{
		"name": "ng-recaptcha",
		"description": "Angular component for Google reCAPTCHA",
		"version": "13.0.0",
		"version": "13.1.0",
		"author": "Ruslan Arkhipau <dethariel@gmail.com>",
		@@ -6,0 +6,0 @@ "license": "MIT",

README.md

		@@ -558,2 +558,61 @@ # Angular component for Google reCAPTCHA

		### <a name="async-config-load"></a>Loading reCAPTCHA keys asynchronously

		If your use-case needs to load the reCAPTCHA v2/v3 key from the backend (as opposed to specifying it in-code during build time), the Angular-idiomatic way to do that is by relying on [`APP_INITIALIZER`](https://angular.io/api/core/APP_INITIALIZER). You can find an example of how this could look like below, and you can also consult the source code for the demo site.

		```ts
		// config.service.ts
		import { Injectable } from "@angular/core";

		@Injectable({
		providedIn: "root",
		})
		export class ConfigService {
		public recaptchaSiteKeyV2: string \| null = null;
		public recaptchaSiteKeyV3: string \| null = null;

		public async loadConfig(): Promise<void> {
		const { siteKeyV2, siteKeyV3 } = await fetchConfig(/* some API call */);
		this.recaptchaSiteKeyV2 = siteKeyV2;
		this.recaptchaSiteKeyV3 = siteKeyV3;
		}
		}

		// app.module.ts
		import { APP_INITIALIZER, NgModule } from "@angular/core";
		import { RECAPTCHA_SETTINGS, RecaptchaSettings, RECAPTCHA_V3_SITE_KEY } from "ng-recaptcha";

		import { ConfigService } from "./config.service";

		function appLoadFactory(config: ConfigService) {
		return () => config.loadConfig().then(() => console.log(`config resolved`, config));
		}

		@NgModule({
		providers: [
		{
		provide: RECAPTCHA_V3_SITE_KEY,
		useFactory: (config: ConfigService) => {
		return config.recaptchaSiteKeyV3;
		},
		deps: [ConfigService],
		},
		{
		provide: RECAPTCHA_SETTINGS,
		useFactory: (config: ConfigService): RecaptchaSettings => {
		return { siteKey: config.recaptchaSiteKeyV2 };
		},
		deps: [ConfigService],
		},
		{
		provide: APP_INITIALIZER,
		useFactory: appLoadFactory,
		deps: [ConfigService],
		multi: true,
		},
		],
		})
		export class AppModule {}
		```

		### <a name="hide-recaptcha-badge"></a>Hiding reCAPTCHA badge
		@@ -560,0 +619,0 @@

esm2022/lib/load-script.mjs