From df505fd0476bb3d268c3d6084e0ded5053fa8e49 Mon Sep 17 00:00:00 2001 From: Ruslan Arkhipau Date: Wed, 24 Oct 2018 14:21:44 -0700 Subject: [PATCH] feat(component): allow to specify a base url for loading recaptcha "google.com" domain might be unavailable in certain countries, so we're adding the ability to specify a different base url for the script. Closes #101 --- README.md | 18 ++++++++++++++++++ index.ts | 2 +- recaptcha/recaptcha-loader.service.ts | 8 +++++++- 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5c8d907..d316741 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,7 @@ A simple, configurable, easy-to-start component for handling reCAPTCHA. * [Working with invisible reCAPTCHA](#example-invisible) * [Resizing](#example-resizing) * [SystemJS configuration](#example-systemjs) + * [Loading from a different location](#example-different-url) ## Installation @@ -339,3 +340,20 @@ To configure the package to work with SystemJS, you would configure it approxima }); })(); ``` + +### Loading from a different location + +Since `"google.com"` domain might be unavailable in some countries, reCAPTCHA core team has a solution for that - using `"recaptcha.net"` domain. You can configure the component to use that by providing the `RECAPTCHA_BASE_URL` token, for example: + +```javascript +import { RECAPTCHA_BASE_URL } from 'ng-recaptcha'; + +@NgModule({ + providers: [ + { + provide: RECAPTCHA_BASE_URL, + useValue: 'https://recaptcha.net/recaptcha/api.js', // use recaptcha.net script source for some of our users + }, + ], +}) export class MyModule { } +``` diff --git a/index.ts b/index.ts index e29a07f..3fbe848 100644 --- a/index.ts +++ b/index.ts @@ -1,4 +1,4 @@ export { RecaptchaComponent } from './recaptcha/recaptcha.component'; -export { RecaptchaLoaderService, RECAPTCHA_LANGUAGE } from './recaptcha/recaptcha-loader.service'; +export { RecaptchaLoaderService, RECAPTCHA_LANGUAGE, RECAPTCHA_BASE_URL } from './recaptcha/recaptcha-loader.service'; export { RecaptchaModule } from './recaptcha/recaptcha.module'; export { RECAPTCHA_SETTINGS, RecaptchaSettings } from './recaptcha/recaptcha-settings'; diff --git a/recaptcha/recaptcha-loader.service.ts b/recaptcha/recaptcha-loader.service.ts index 43a8e55..73cb064 100644 --- a/recaptcha/recaptcha-loader.service.ts +++ b/recaptcha/recaptcha-loader.service.ts @@ -9,6 +9,7 @@ import { import { BehaviorSubject, Observable, of } from 'rxjs'; export const RECAPTCHA_LANGUAGE = new InjectionToken('recaptcha-language'); +export const RECAPTCHA_BASE_URL = new InjectionToken('recaptcha-base-url'); @Injectable() export class RecaptchaLoaderService { @@ -22,13 +23,17 @@ export class RecaptchaLoaderService { /** @internal */ private language: string; + /** @internal */ + private baseUrl: string; constructor( // tslint:disable-next-line:no-any @Inject(PLATFORM_ID) private readonly platformId: any, @Optional() @Inject(RECAPTCHA_LANGUAGE) language?: string, + @Optional() @Inject(RECAPTCHA_BASE_URL) baseUrl?: string, ) { this.language = language; + this.baseUrl = baseUrl; this.init(); this.ready = isPlatformBrowser(this.platformId) ? RecaptchaLoaderService.ready.asObservable() : of(); } @@ -46,7 +51,8 @@ export class RecaptchaLoaderService { const script = document.createElement('script') as HTMLScriptElement; script.innerHTML = ''; const langParam = this.language ? '&hl=' + this.language : ''; - script.src = `https://www.google.com/recaptcha/api.js?render=explicit&onload=ng2recaptchaloaded${langParam}`; + const baseUrl = this.baseUrl || 'https://www.google.com/recaptcha/api.js'; + script.src = `${baseUrl}?render=explicit&onload=ng2recaptchaloaded${langParam}`; script.async = true; script.defer = true; document.head.appendChild(script);