Merge pull request #169 from BuildFire/reove-static-key

mas-iota · web-flow · commit 335a3216cec7 · 2024-09-24T23:00:25.000+03:00
fix(static-key): remove static google api key
diff --git a/plugin.json b/plugin.json
@@ -29,5 +29,8 @@
 
   "features": [{ "name": "Geo" }],
   "languages": ["en"],
+  "usesApiKeys": [
+    { "name": "googleMapKey" }
+  ],
   "webpack": 8080
 }
diff --git a/src/control/content/components/LocationsActionBar.js b/src/control/content/components/LocationsActionBar.js
@@ -73,12 +73,14 @@ class LocationsActionBar extends React.Component {
         // use google maps api to fetch them async
         // otherwise just return the location
         if (!address_lat || !address_lng) {
+          const { apiKeys } = buildfire.getContext();
+          const { googleMapKey } = apiKeys;
           promises.push(
             new Promise((resolve, reject) => {
               const formattedAddress = name
                 .replace(/,/g, "")
                 .replace(/ /g, "+");
-              const url = `https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyBOp1GltsWARlkHhF1H_cb6xtdR1pvNDAk&address=${formattedAddress}`;
+              const url = `https://maps.googleapis.com/maps/api/geocode/json?key=${googleMapKey}&address=${formattedAddress}`;
               // get geodata from google api
               fetch(url)
                 .then((response) => response.json())
diff --git a/src/control/content/index.html b/src/control/content/index.html
@@ -16,7 +16,6 @@
     <script src="../../../../scripts/buildfire/components/pluginInstance/sortableList.js"></script>
     <script src="../../../../scripts/buildfire/components/actionItems/sortableList.js"></script>
     <script src="../../../../scripts/tinymce/tinymce.min.js"></script>
-    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBOp1GltsWARlkHhF1H_cb6xtdR1pvNDAk"></script>
     <script src="../../../../scripts/buildfire/services/searchEngine/searchEngine.js"></script>
 </head>
 <body>
diff --git a/src/control/content/index.js b/src/control/content/index.js
@@ -4,7 +4,35 @@ import Content from './content';
 
 const container = document.getElementById('mount');
 
+const initGoogleMapsSDK = () => {
+  const { apiKeys } = buildfire.getContext();
+  const { googleMapKey } = apiKeys;
+  const script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = `https://maps.googleapis.com/maps/api/js?libraries=places&key=${
+    googleMapKey
+  }`;
+  script.onload = () => {
+    console.info("Successfully loaded Google's Maps SDK.");
+  };
+  script.onerror = () => {
+    buildfire.dialog.alert({
+      title: 'Error',
+      message: 'Failed to load Google Maps API.',
+    });
+  };
+  window.gm_authFailure = () => {
+    buildfire.dialog.alert({
+      title: 'Error',
+      message: 'Failed to load Google Maps API.',
+    });
+  };
+  document.head.appendChild(script);
+};
+
 function renderApp() {
+
+  initGoogleMapsSDK();
   render(<Content />, container);
 }
 
diff --git a/src/widget/index.html b/src/widget/index.html
@@ -3,7 +3,6 @@
 <head>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta charset="utf-8">
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOp1GltsWARlkHhF1H_cb6xtdR1pvNDAk&sensor=false"></script>
     <script src="../../../scripts/_bundles/buildfire_lightcarousel.min.js"></script>
     <link rel="stylesheet" href="https://cdn.quilljs.com/1.0.0/quill.snow.css"/>
     <script src="../../../scripts/buildfire/components/toast/toast.js"></script>
diff --git a/src/widget/js/app.js b/src/widget/js/app.js
@@ -18,6 +18,32 @@ import "../js/shared/strings";
 
 window.strings = new buildfire.services.Strings("en-us", stringsConfig);
 
+const initGoogleMapsSDK = () => {
+  const { apiKeys } = buildfire.getContext();
+  const { googleMapKey } = apiKeys;
+  const script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = `https://maps.googleapis.com/maps/api/js?key=${
+    googleMapKey
+  }&sensor=false`;
+  script.onload = () => {
+    console.info("Successfully loaded Google's Maps SDK.");
+  };
+  script.onerror = () => {
+    buildfire.dialog.alert({
+      title: 'Error',
+      message: 'Failed to load Google Maps API.',
+    });
+  };
+  window.gm_authFailure = () => {
+    buildfire.dialog.alert({
+      title: 'Error',
+      message: 'Failed to load Google Maps API.',
+    });
+  };
+  document.head.appendChild(script);
+};
+
 window.app = {
   goBack: null,
   settings: {
@@ -115,7 +141,7 @@ window.app = {
      window.app.loadPage(0,50,(err,places)=>{
       window.listView.setItems(places);
       window.app.state.places=places;
-    }); 
+    });
   },
   loadPage: (page, pageSize, callback) => {
     let places = [];
@@ -194,7 +220,7 @@ window.app = {
           latitude: window.app.state.location.lat,
           longitude: window.app.state.location.lng,
         };
-    
+
         let destination = {
           latitude: address.lat,
           longitude: address.lng
@@ -223,6 +249,7 @@ window.app = {
   },
   init: (placesCallback, positionCallback) => {
 
+    initGoogleMapsSDK();
     let userLocation = JSON.parse(localStorage.getItem("user_location"));
     buildfire.datastore.get(
       window.app.settings.placesTag,

Original file line number	Diff line number	Diff line change
`@@ -29,5 +29,8 @@`
`29`	`29`
`30`	`30`	`"features": [{ "name": "Geo" }],`
`31`	`31`	`"languages": ["en"],`
	`32`	`+ "usesApiKeys": [`
	`33`	`+ { "name": "googleMapKey" }`
	`34`	`+ ],`
`32`	`35`	`"webpack": 8080`
`33`	`36`	`}`