Explaining the idea and first steps
Today, I had the idea to do a website which displays my current position. I searched in the App Store for an App and found one named SendLocation. This App provides an interface for sending GET requests to an server with some geometrical data. This is how the data gets send:
http://yourserver.com/yourscript.php?lat=***&lon=***&speed=***&heading=***&vacc=***&hacc=***&altitude=***&deviceid=**&battery=***&ts=***&quick=***&background=***
File Structure
./location.php
./data.json
./index.html
Writing the server side script
After setting the app up and achieving the connection, I wrote an php script to get the data and store it into an JSON file to use it for example on a website. I don't want to set up a database for this and want to have this in an accessible file, so storing it in a .json file was totally easy and fast.
<?php
if (file_exists('data.json')) {
$current_data = file_get_contents('data.json');
$array_data = json_decode($current_data, true);
$formdata = array(
'lat' => $_GET['lat'],
'lon' => $_GET['lon'],
'speed' => $_GET['speed'],
'heading' => $_GET['heading'],
);
$array_data[] = $formdata;
$final_data = json_encode($array_data);
if (file_put_contents('data.json', $final_data)) {
echo 'Data saved successfully';
}
} else {
echo 'JSON File not exits';
}
Access the data from the frontend
I am going on with parsing the .json file and get the data of the last entry which is my current likely position. After, with the lat and lon, I do a Google Maps API call and get my real name position and log it to the console (yet).
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>This is my location</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$.getJSON("data.json").then(function (json) {
// get latest position
var lastElement = json[json.length - 1];
// extract coordinates from position
var lat = lastElement.lat;
var lon = lastElement.lon;
console.log(lat);
// get name of coordinates
getAddress(lat, lon);
// get adress from google
function getAddress(latitude, longitude) {
var key = "api-key-goes-here";
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," +
longitude + "&key=" + key,
function (json) {
console.log(json);
console.log(json.results[9].formatted_address);
});
}
});
});
</script>
</body>
</html>
Screenshots of console output
My questions
- How can I hide the API key of the Google Map service to make it more secure?
- Which improvements can be made to make the
GETwriting the.jsonmore safe? I though about limit the writing to 3 a day or similar. - How can I hide the
data.jsonfrom Google or normal visitors of my page, that only my code can access the file, is this even possible? - What can I do to make the JS faster and maybe more secure?
- What else can be done?
Any feedback really appreciated.
-
\$\begingroup\$ To the close voters: this is not a feature request. This is a request for review with specific questions because the OP has thought well enough ahead and acknowledges the issues the code currently has. \$\endgroup\$Mast– Mast ♦2019年06月03日 06:55:37 +00:00Commented Jun 3, 2019 at 6:55
1 Answer 1
One thing you can do to secure your Google API key is to make the whole request to Google Map API on the server. So, instead of having a call from the frontend to Google API, you create a new
GETrequest on the server that just wraps the call to Google API. And then, from your website, just make a request to your server instead to Google API.If by safe you mean "I want every request to be written in the file and not to lose any data because of parallel requests", then you need some sort of locking mechanism. I'm not a PHP developer, and I'm not sure what's the best way to achieve this. A quick search on the internet for PHP lock resulted in this and this. So once you have some way of locking, you just need to surround your the
truepart of your condition with the locking mechanism.You can do so by configuring your web server. If you're using Apache, then you can take a look at this SO question.
I don't see any problem with your JS. You are using JQuery for making requests to the server and I guess this is fine. If you would to query for some HTML element, then I think that native APIs outperform JQuery, so that would be a thing to take into consideration. Maybe consider using native Fetch API if you use JQuery only for the server call. This will only speed up the page load time, since the browser won't need to load the remote library.
I don't have anything else to add.
-
\$\begingroup\$ thank you very much, the help is really appreciated. maybe there are some other answers and I leave this answer for now with not marking it as the accepted one. will do that if there are no other answers. \$\endgroup\$Felix Haeberle– Felix Haeberle2019年05月29日 19:13:25 +00:00Commented May 29, 2019 at 19:13
-
1\$\begingroup\$ I'm not here for the "most accepted answers", I'm here to spread the knowledge, so no worries :) Glad you find it helpful. \$\endgroup\$Pritilender– Pritilender2019年05月29日 19:14:25 +00:00Commented May 29, 2019 at 19:14