<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="OnPageLoad()">
<label for="clientId"></label>
<input id="clientId" type="text" placeholder="Client ID" required>
<label for="clientSecret"></label>
<input id="clientSecret" type="text" placeholder="Client Secret" required>
<label for="uri"></label>
<input id="uri" type="text" placeholder="Current uri" required>
<button onclick="getCode()">Get Code</button>
<h3>Code: </h3><h3 id="code"></h3>
<h3>Access Token: </h3><h3 id="access_token"></h3>
<h3>Refresh Token: </h3><h3 id="refresh_token"></h3>
<button>Log currently playing (requires Access Token)</button>
</body>
<script>
var ClientId = document.getElementById("clientId");
var ClientSecret = document.getElementById("clientSecret");
var Uri = document.getElementById("uri");
const urlParams = new URL(window.location.toString()).searchParams;
const code = urlParams.get('code');
var AccessToken= document.getElementById("access_token");
var RefreshToken= document.getElementById("refresh_token");
function getCode(){
localStorage.setItem("clientId",ClientId.value);
localStorage.setItem("clientSecret",ClientSecret.value);
localStorage.setItem("uri",Uri.value);
location.href = "https://accounts.spotify.com/authorize"+"?client_id="+ClientId.value+"&response_type=code&scope=user-read-currently-playing&redirect_uri="+Uri.value;
}
function OnPageLoad(){
let c_id= localStorage.getItem("clientId");
if(c_id != null){
ClientId.value=c_id;
}
let c_secret= localStorage.getItem("clientSecret");
if(c_secret != null){
ClientSecret.value=c_secret;
}
let uri= localStorage.getItem("uri");
if(uri != null){
Uri.value= uri;
}
let aT= localStorage.getItem("access_token");
if(aT != null){
document.getElementById("access_token").innerHTML= aT;
}
let rT= localStorage.getItem("refresh_token");
if(rT != null){
document.getElementById("refresh_token").innerHTML= rT;
}
if(code!= null){
document.getElementById("code").innerHTML=code;
getToken();
}
}
async function getToken() {
const url = 'https://accounts.spotify.com/api/token';
const data = "grant_type=authorization_code&code=" + code + "&redirect_uri=" + encodeURI(Uri.value) + "&client_id=" + ClientId.value + "&client_secret=" + ClientSecret.value;
let response = await fetch(url, {
method: 'POST',
headers: {
'Authorization': 'Basic ' + btoa(ClientId.value + ":" + ClientSecret.value),
'Content-Type': 'application/x-www-form-urlencoded',
},
body: data,
});
let responseData = await response.json();
localStorage.setItem("access_token",responseData.access_token);
localStorage.setItem("refresh_token",responseData.refresh_token);
AccessToken.innerHTML = responseData.access_token;
RefreshToken.innerHTML = responseData.refresh_token;
}
async function logCP(){
if(localStorage.getItem("access_token")!=null){
let response = await fetch("https://api.spotify.com/v1/me/player/currently-playing",{
method:"GET",
headers:{
"Authorization":"Bearer "+localStorage.getItem("access_token"),
}
})
console.log(await response.json())
}
}
</script>
</html>