I am trying to make a web app that uses data from fitbit API. The app was working properly and can retrieved the json data by issuing a GET request after clicking the login. However, the web app is not working anymore and json data is no longer returning to my webpage. (I am new to web programming)
I followed this tutorial : https://softauthor.com/fitbit-api-javascript-oauth2/#fitbit-oauth2-implicit-grant-flow-client-side
Here is my code, it is a PHP file that run on localhost. The JSON data was supposed to fill in the html input box after successful login. You may need to change the json URL for the "GET". Any help will be appreciated....
<?php
error_reporting(0);
if(file_exists('output.json'))
{
$namo = array('namo' => $_POST['namo']);
//$final = json_encode($namo);
if(file_put_contents('output.json', $namo))
{
$message = "<label class='text-success'>Data already output to JSON</p>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Fitbit API JavaScript</title>
</head>
<body>
<!--<a href="https://www.fitbit.com/oauth2/authorize?response_type=token&client_id=22DJQF&redirect_uri=http%3A%2F%2Flocalhost%2Fscp&scope=activity%20heartrate%20location%20nutrition%20profile%20settings%20sleep%20social%20weight&expires_in=604800">login</a>
-->
<a href = "https://www.fitbit.com/oauth2/authorize?response_type=token&client_id=22DJNX&redirect_uri=http%3A%2F%2Flocalhost%2Fscp&scope=activity%20heartrate%20location%20nutrition%20profile%20settings%20sleep%20social%20weight&expires_in=604800">login link</a>
<script>
// get the url
var url = window.location.href;
//getting the access token from url
var access_token = url.split("#")[1].split("=")[1].ssplit("&")[0];
// get the userid
var userId = url.split("#")[1].split("=")[2].split("&")[0];
console.log(access_token);
console.log(userId);
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.fitbit.com/1/user/7C5GTS/activities/date/2019-02-22.json');
xhr.setRequestHeader("Authorization", 'Bearer ' + access_token);
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
document.write(xhr.responseText);
prompt(xhr.responseText);
var line = xhr.responseText;
document.writeln("write line -> " + line);
document.getElementById("r1").value=line;
}
};
xhr.send();
</script>
<form method = "post">
<label>Retrieved data</label> <br/>
<input type="text" id='r1' name="namo" class="form-control" ></input><br />
<input type="submit" name="submit" value="Save to file" class="btn btn-info" /><br />
</form>
<table>
<tr><td>dummy</td></tr>
</table>
</body>
</html>
