Get reCAPTCHA site key from backend env (#1400)

# What this PR does
Move reCAPTCHA site key to backend environment for easier management to
support multiple environments.

## Which issue(s) this PR fixes

## Checklist

- [ ] Tests updated
- [ ] Documentation added
- [x] `CHANGELOG.md` updated

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Moved reCAPTCHA to backend environment variable for more flexible configuration between different environments.
 - Add pagination to schedule listing
 
 ## v1.1.29 (2023-02-23)

engine/apps/grafana_plugin/views/sync.py

@@ -75,5 +75,6 @@ class PluginSyncView(GrafanaHeadersMixin, APIView):
                 "token_ok": token_ok,
                 "license": settings.LICENSE,
                 "version": settings.VERSION,
+                "recaptcha_site_key": settings.RECAPTCHA_SITE_KEY,
             },
         )

engine/settings/base.py

@@ -539,9 +539,6 @@ SOCIAL_AUTH_FIELDS_STORED_IN_SESSION = []
 SOCIAL_AUTH_REDIRECT_IS_HTTPS = getenv_boolean("SOCIAL_AUTH_REDIRECT_IS_HTTPS", default=True)
 SOCIAL_AUTH_SLUGIFY_USERNAMES = True
 
-FEATURE_CAPTCHA_ENABLED = getenv_boolean("FEATURE_CAPTCHA_ENABLED", default=False)
-RECAPTCHA_SECRET_KEY = os.environ.get("RECAPTCHA_SECRET_KEY")
-
 PUBLIC_PRIMARY_KEY_MIN_LENGTH = 12
 # excluding (O,0) Result: (25 + 9)^12 combinations
 PUBLIC_PRIMARY_KEY_ALLOWED_CHARS = "ABCDEFGHIJKLMNPQRSTUVWXYZ123456789"
@@ -667,6 +664,7 @@ DRF_RECAPTCHA_SECRET_KEY = os.environ.get("DRF_RECAPTCHA_SECRET_KEY", default=No
 DRF_RECAPTCHA_DEFAULT_V3_SCORE = 0.5
 DRF_RECAPTCHA_TESTING = True
 DRF_RECAPTCHA_TESTING_PASS = True
+RECAPTCHA_SITE_KEY = os.environ.get("RECAPTCHA_SITE_KEY", default="6LeIPJ8kAAAAAJdUfjO3uUtQtVxsYf93y46mTec1")
 
 MIGRATION_LINTER_OPTIONS = {"exclude_apps": ["social_django", "silk", "fcm_django"]}
 # Run migrations linter on each `python manage.py makemigrations`

grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx

@@ -8,10 +8,10 @@ import PluginLink from 'components/PluginLink/PluginLink';
 import Text from 'components/Text/Text';
 import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl';
 import { User } from 'models/user/user.types';
+import { rootStore } from 'state';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 import { isUserActionAllowed, UserAction, UserActions } from 'utils/authorization';
-import { reCAPTCHA_site_key } from 'utils/consts';
 
 import styles from './PhoneVerification.module.css';
 
@@ -96,7 +96,7 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
     } else {
       window.grecaptcha.ready(function () {
         window.grecaptcha
-          .execute(reCAPTCHA_site_key, { action: 'mobile_verification_code' })
+          .execute(rootStore.recaptchaSiteKey, { action: 'mobile_verification_code' })
           .then(async function (token) {
             await userStore.updateUser({
               pk: userPk,

grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx

@@ -40,7 +40,6 @@ import 'interceptors';
 import { rootStore } from 'state';
 import { useStore } from 'state/useStore';
 import { isUserActionAllowed } from 'utils/authorization';
-import { reCAPTCHA_site_key } from 'utils/consts';
 import loadJs from 'utils/loadJs';
 
 dayjs.extend(utc);
@@ -101,7 +100,7 @@ export const Root = observer((props: AppRootProps) => {
   }, []);
 
   useEffect(() => {
-    loadJs(`https://www.google.com/recaptcha/api.js?render=${reCAPTCHA_site_key}`);
+    loadJs(`https://www.google.com/recaptcha/api.js?render=${rootStore.recaptchaSiteKey}`);
   }, []);
 
   const updateBasicData = async () => {

grafana-plugin/src/state/plugin/index.ts

@@ -15,6 +15,7 @@ export type PluginStatusResponseBase = Pick<OnCallPluginMetaJSONData, 'license'>
 
 export type PluginSyncStatusResponse = PluginStatusResponseBase & {
   token_ok: boolean;
+  recaptcha_site_key: string;
 };
 
 type PluginConnectedStatusResponse = PluginStatusResponseBase & {

grafana-plugin/src/state/plugin/plugin.test.ts

@@ -220,6 +220,7 @@ describe('PluginState.getPluginSyncStatus', () => {
       license: 'asdasdf',
       version: 'asdasf',
       token_ok: true,
+      recaptcha_site_key: 'asdasdf',
     };
     makeRequest.mockResolvedValueOnce(mockedResp);
 

grafana-plugin/src/state/rootBaseStore/index.ts

@@ -47,6 +47,9 @@ export class RootBaseStore {
   @observable
   backendLicense = '';
 
+  @observable
+  recaptchaSiteKey = '';
+
   @observable
   initializationError = null;
 
@@ -195,6 +198,7 @@ export class RootBaseStore {
       // everything is all synced successfully at this point..
       this.backendVersion = syncDataResponse.version;
       this.backendLicense = syncDataResponse.license;
+      this.recaptchaSiteKey = syncDataResponse.recaptcha_site_key;
     }
 
     try {

grafana-plugin/src/utils/consts.ts

@@ -15,9 +15,6 @@ export const DEFAULT_PAGE = 'incidents';
 
 export const PLUGIN_ROOT = '/a/grafana-oncall-app';
 
-// https://developers.google.com/recaptcha/docs/v3
-export const reCAPTCHA_site_key = '6LeIPJ8kAAAAAJdUfjO3uUtQtVxsYf93y46mTec1';
-
 // Environment options list for onCallApiUrl
 export const ONCALL_PROD = 'https://oncall-prod-us-central-0.grafana.net/oncall';
 export const ONCALL_OPS = 'https://oncall-ops-us-east-0.grafana.net/oncall';