So, I made updates to this code to fix some issues that were pointed out in another question. The function runs, but returns {"readyState":0,"status":0,"statusText":"error"}. I switched from $.getJSON to $.ajax so I could send headers to hopefully fix the error, but it's still giving me the same error without much detail.
<HTML>
<head>
<title>Ecobee API PIN TEST</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function PINCode() {
apiKey = 'kmkbJCrEUbMBpO2I6E90QeYcueAz1p00'
// set all apiKey inputs to have apiKey value entered
$(".apiKey").each(function() {
$(this).val(apiKey);
});
var url = 'https://api.ecobee.com/authorize?response_type=ecobeePin&client_id=' + apiKey + '&scope=smartWrite';
$.ajax({
dataType: "json",
url: url,
headers: { 'Access-Control-Allow-Origin': '*' },
success: function(data) {
$("#authCode").val(data.code);
alert("JSON Ran");
var response = JSON.stringify(data, null, 4);
$('#response1').html(response);
}
})
// $.getJSON(url,function(data) {
// // set authCode to be code attribute of response
// $("#authCode").val(data.code);
// alert("JSON Ran")
// var response = JSON.stringify(data, null, 4);
// $('#response1').html(response);
// })
.fail(function(jqXHR, textStatus) {
$('#response1').html("The following error was returned: <br><br>" + JSON.stringify(jqXHR) + "<p>Please Contact <b>M2 AV Consulting</b> at <a href=mailto:support@m2avc.com?subject='EcobeePINSupport'>support@m2avc.com</a>")
console.log(textStatus);
});
})
</script>
<pre id="response1" class="code-json">(Response JSON will appear here...I hope.)</pre>
</body>
</HTML>