-
Notifications
You must be signed in to change notification settings - Fork 12
/
auth.html
119 lines (117 loc) · 4.12 KB
/
auth.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>Authorizing APIs</title>
<style type="text/css">
div{
margin: 16px;
}
input{
width: 100%;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", ()=>{
var redirectUrl = `${window.location.protocol}//${window.location.host}/static/authcode.html`;
var inputApiName = document.getElementById("apiName");
var inputClientId = document.getElementById("clientId");
var inputClientSecret = document.getElementById("clientSecret");
var elementRedirectUri = document.getElementById("elementRedirectUri");
elementRedirectUri.innerHTML = redirectUrl;
var setCachedValue = () => {
var value = localStorage[inputApiName.value];
localStorage.apiName = inputApiName.value;
var clientId = "";
var clientSecret = "";
if(value){
var data = JSON.parse(value);
clientId = data.clientId;
clientSecret = data.clientSecret;
}
inputClientId.value = clientId;
inputClientSecret.value = clientSecret;
}
var saveApiData = (apiName,data) => {
localStorage[apiName] = JSON.stringify({
"clientId":data.clientId,
"clientSecret":data.clientSecret
});
}
var storeValueCache = () => {
saveApiData(inputApiName.value,{
"clientId":inputClientId.value,
"clientSecret":inputClientSecret.value
});
};
if(!localStorage.hasRanOnce){
localStorage.hasRanOnce = true;
/*saveApiData("spotify",{
"clientId":"9b02327a476441aca11d40e793856b3f",
"clientSecret":"6327ebcf25f8499e836ee9b51639a6c2"
});
alert("These are example values. You should change them for your own APIs. You can also use these to test the Spotify API.")*/
}
var inputs = document.querySelectorAll("input");
for(input of inputs){
input.onkeyup = e => storeValueCache();
}
inputApiName.onchange = e => setCachedValue();
fetch("/apinames")
.then(res => res.json())
.then(result=>{
for(apiName of result.apiNames){
var option = document.createElement("option");
option.value = apiName;
option.text = apiName;
inputApiName.appendChild(option);
}
if(localStorage.apiName){
inputApiName.value = localStorage.apiName;
}
setCachedValue();
});
var buttonSubmit = document.getElementById("buttonSubmit");
buttonSubmit.onclick = e=>{
buttonSubmit.disabled = true;
buttonSubmit.value = "Authorizing...";
var data = {
apiName: inputApiName.value,
clientId: inputClientId.value,
clientSecret: inputClientSecret.value,
redirectUrl: redirectUrl
};
fetch("/auth",
{
method: "POST",
body: JSON.stringify(data)
})
.then(res => res.json())
.then(json => {
if(json.error){
buttonSubmit.value = json.error;
return;
}
console.log(json);
localStorage.apiName = data.apiName;
window.location = `${json.authUrl}?client_id=${inputClientId.value}&response_type=code&redirect_uri=${encodeURIComponent(redirectUrl)}&state=${inputClientId.value}&scope=${json.scopes}&access_type=offline&approval_prompt=force`;
});
}
});
</script>
</head>
<body>
<div>API: <select type="text" id="apiName"></select></div>
<div>Client ID: <input type="text" id="clientId" /></div>
<div>Client Secret: <input type="text" id="clientSecret" /></div>
<input type="button" id="buttonSubmit" value="Submit" />
<h3>Authenticating on APIs</h3>
<div>This page will allow to authenticate on any APIs whose handlers are subclasses of the <b>AssistantHandlerWithAuthCode</b> class.</div>
<div>You need to create your own Client IDs and Secrets in the APIs.</div>
<div>When creating your client ID and secret make sure to set the redirect URI to <b><span id="elementRedirectUri">redirect uri</span></b></div>
<div>Some examples where you can create these:</div>
<ul>
<li><a href="https://developer.spotify.com/my-applications/#!/applications">Spotify</a></li>
<li><a href="https://console.developers.google.com/apis/credentials/">Google APIs</a> - click on <b>Create Credentials</b>-><b>OAuth client Id</b>-><b>Web Application</b></li>
</ul>
</body>
</html>