How to read Google Recaptcha V3 site key from a file in Angular application

Viewed 360

I am using Recaptcha V3 in my angular application and site keys are hardcoded in two files given below

  1. app.module.ts
providers: [WindowRef,
        { provide: RECAPTCHA_V3_SITE_KEY, useValue: "**site_key**" } ],
  1. 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.

0 Answers
Related