I am using Recaptcha V3 in my angular application and site keys are hardcoded in two files given below
- app.module.ts
providers: [WindowRef,
{ provide: RECAPTCHA_V3_SITE_KEY, useValue: "**site_key**" } ],
- index.html
<script src="https://www.google.com/recaptcha/api.js?render="**site_key**"></script>
I want to keep site keys in environment-specific files and read from there
Let's say I am adding an entry in environment.uat.ts
export const environment = {
production: false,
uat: true,
recaptchaSiteKey: '**site_key**',
}
I want to read site_key from environment.uat.ts file and apply it in app.module.ts and index.html.
I know how to read the value in app.module.ts using environment.recaptchaSiteKey
but I am not sure how to do it in index.html file.
Please suggest a way to acheive this
My ultimate aim is ==> Don't hardcode site key and get it based on environments dynamically.