-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (126 loc) · 7.55 KB
/
index.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
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Oliver Stapleton">
<title>Splunk Spotify Auth Helper</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="d-flex flex-column h-100">
<script>
function qs(search_for) {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0 && search_for == parms[i].substring(0,pos)) {
return parms[i].substring(pos+1);
}
}
return "";
}
</script>
<main role="main" class="flex-shrink-0">
<div class="container" id='p1'>
<p class="lead mt-5">Authenticating the <a href="https://github.com/st4ple/splunk-spotify-add-on">Spotify Add‑on for Splunk</a> Modular Input with the <a href="https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow">Spotify API</a> <span class="badge badge-secondary">1/2</span></p>
<p><strong>I. Create an app in the Spotify developer portal:</strong></p>
<ol>
<li>Go to your <a href="https://developer.spotify.com/dashboard/applications">Spotify Developer Dashboard</a>. Log in if necessary.</li>
<li>Click <mark>Create Client ID</mark> in the top right-hand corner.</li>
<li>Fill in the form as follows:
<ul>
<li><mark>App or Hardware Name:</mark> <code id="name">Splunk Modular Input</code><button type="button" class="btn btn-link" data-clipboard-target="#name" id="copy_name">Copy</button></li>
<li><mark>App or Hardware Description:</mark> <code id="desc">This app manages access for Splunk to the Spotify API.</code><button type="button" class="btn btn-link" data-clipboard-target="#desc" id="copy_desc">Copy</button></li>
<li><mark>What are you building:</mark> Select <code>Website</code></li>
</ul>
</li>
<li>State that you are not developing a commercial integration.</li>
<li>Accept to understand all disclaimers and click <mark>Submit</mark>.</li>
</ol>
<p><strong>II. Configure your Spotify app:</strong></p>
<ol>
<li>Click <mark>Edit Settings</mark> in the top right-hand corner.</li>
<li>In the section <mark>Redirect URI</mark>, fill in <code id="reduri"><script type="text/javascript">
document.write(window.location.href.split('?')[0]);
</script></code><button type="button" class="btn btn-link" data-clipboard-target="#reduri" id="copy_reduri">Copy</button></li>
<li>Scroll to the bottom of the modal and click <mark>Save</mark>.</li>
</ol>
<p><strong>III.Grant your app permission to access your data:</strong></p>
<ol>
<li>Copy the <mark>Client ID</mark> of your Spotify app from the <a href="https://developer.spotify.com/dashboard/applications">Spotify Developer Dashboard</a> to your clipboard.</li>
<li>Paste the <mark>Client ID</mark> in the form below.</li>
<li>Click the <mark>Authorize and Continue</mark> Button to get redirected to Spotify.</li>
<li>Grant your app the requested permissions and click <mark>Accept</mark>.</li>
</ol>
<p><strong>IV. Generate Authorization Code:</strong></p>
<ul><li>
<form class="form-inline" action="https://accounts.spotify.com/en/authorize?">
<input type="text" class="form-control mb-2 mr-sm-2" name="client_id" placeholder="Client ID">
<input type="hidden" name="response_type" value="code">
<input type="hidden" name="redirect_uri" id="redirect_uri_input">
<input type="hidden" name="scope" value="user-top-read user-read-currently-playing user-read-recently-played playlist-read-private user-read-email user-library-read playlist-read-collaborative user-read-playback-state user-read-private user-follow-read ">
<button type="submit" class="btn btn-primary mb-2">Authorize and Continue</button>
</form></li></ul>
</div>
<div class="container" id='p2'>
<p class="lead mt-5">Authenticating the <a href="">Spotify Add‑on for Splunk</a> Modular Input with the <a href="https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow">Spotify API</a> <span class="badge badge-secondary">2/2</span></p>
<p><strong>V. Create a Modular Input stanza for the Spotify add-on for Splunk in your Splunk environment:</strong></p>
<ol>
<li>On your Splunk Web GUI, click on <mark>Settings</mark> -> <mark>Data Inputs</mark> and select <mark>Spotify</mark> from the list of Local Inputs.</li>
<li>Click <mark>New</mark> in the top righ-hand corner.</li>
<li>Fill in the form as follows:
<ul>
<li><mark>Name</mark>: whatever you want to call this input stanza (e.g. your Spotify <code>username</code>)</li>
<li><mark>Client ID</mark> & <mark>Client Secret</mark>: Copy from your <a href="https://developer.spotify.com/dashboard/applications">Spotify Developer Dashboard</a>.</li>
<li><mark>Redirect URI</mark>:
<code id="uri"><script type="text/javascript">document.write(window.location.href.split('?')[0]);</script></code><button type="button" class="btn btn-link" data-clipboard-target="#uri" id="copy_uri">Copy</button></li>
<li><mark>Authorization Code</mark>:
<code id="auth"><script type="text/javascript">document.write(qs("code"));</script></code><button type="button" class="btn btn-link" data-clipboard-target="#auth" id="copy_auth">Copy</button></li>
<li>Click the <mark>More Settings</mark> button if you wish to adjust the <mark>Interval</mark>, <mark>Index</mark>, etc.</li>
</ul>
</li>
</ol>
<p><strong>VI. Explore your Spotify listening history in Splunk:</strong></p>
<ul>
<li><code>search host=Spotify ...</code></li>
</ul>
</div>
<footer class="footer mt-auto py-3">
<div class="container">
</div>
</footer>
<script>
document.getElementById("redirect_uri_input").value = window.location.href.split('?')[0];
var page1 = document.getElementById('p1');
var page2 = document.getElementById('p2');
if (qs("code")==""){
page2.style.display = 'none';
}
else {
page1.style.display = 'none';
}
</script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
var btn_name = document.getElementById('copy_name');
var btn_desc = document.getElementById('copy_desc');
var btn_reduri = document.getElementById('copy_reduri');
var btn_uri = document.getElementById('copy_uri');
var btn_auth = document.getElementById('copy_auth');
var clipboard = new ClipboardJS(btn_name);
var clipboard = new ClipboardJS(btn_desc);
var clipboard = new ClipboardJS(btn_uri);
var clipboard = new ClipboardJS(btn_reduri);
var clipboard = new ClipboardJS(btn_auth);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>