Skip to content

Commit 684ad7d

Browse files
JMPerezJMPerez
committed
first commit
0 parents  commit 684ad7d

File tree

9 files changed

+478
-0
lines changed

9 files changed

+478
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Spotify Accounts Authentication Examples
2+
3+
This project contains basic demos showing the different oAuth2 flows for [authenticating against the Spotify Web API](https://developer.spotify.com/spotify-web-api/authorization-guide/).
4+
5+
These examples cover:
6+
7+
* Authorization Code flow
8+
* Client Credentials flow
9+
* Implicit Grant flow
10+
11+
## Installation
12+
13+
These examples run on Node.js. On [its website](http://www.nodejs.org/download/) you can find instructions on how to install it. You can also follow [this gist](https://gist.github.com/isaacs/579814) for a quick and easy way to install Node.js and npm.
14+
15+
Once installed, clone the repository and install its dependencies running:
16+
17+
$ npm install
18+
19+
## Running the examples
20+
In order to run the different examples, open the folder with the name of the flow you want to try out, and run its `app.js` file. For instance, to run the Authorization Code example do:
21+
22+
$ cd authorization_code
23+
$ node app.js
24+
25+
Then, open `http://localhost:8888` in a browser.
26+
27+
### Using your own credentials
28+
The examples contains a working client ID and secret key. Note, however, that they might be rate limited if they are used frequently. If you are planning to create an application, we recommend you register your app and get your own credentials instead of using the ones in this project.
29+
30+
Go to [My Applications on Spotify Developer](https://developer.spotify.com/my-applications) and create your application. For the examples, we registered these Redirect URIs:
31+
32+
* http://localhost:8888 (needed for the implicit grant flow)
33+
* http://localhost:8888/callback
34+
35+
Once you have created your app, replace the `client_id`, `redirect_uri` and `secret_key` in the examples with the ones you get from My Applications.
36+

‎app.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var http = require("http");
2+
http.createServer(function(request, response) {
3+
response.writeHead(200, {"Content-Type": "text/plain"});
4+
response.write("Hello World");
5+
response.end();
6+
}).listen(8888);

‎authorization_code/app.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/**
2+
* This is an example of a basic node.js script that performs
3+
* the Authorization Code oAuth2 flow to authenticate against
4+
* the Spotify Accounts.
5+
*
6+
* For more information, read
7+
* https://developer.spotify.com/spotify-web-api/authorization-guide/#authorization_code_flow
8+
*/
9+
10+
var express = require('express'); // Express web server framework
11+
var request = require('request'); // "Request" library
12+
var querystring = require('querystring');
13+
14+
var client_id = '03ffe0cac0a0401aa6673c3cf6d02ced'; // Your client id
15+
var secret_key = 'a57c43efb9644574a96d6623fb8bfbc2'; // Your secret key
16+
var redirect_uri = 'http://localhost:8888/callback'; // Your redirect uri
17+
18+
var app = express();
19+
20+
app.use(express.static(__dirname + '/public'));
21+
22+
app.get('/login', function(req, res) {
23+
24+
// your application requests authorization
25+
var scope = 'user-read-private user-read-email';
26+
res.redirect('https://accounts.spotify.com/authorize?' +
27+
querystring.stringify({
28+
response_type: 'code',
29+
client_id: client_id,
30+
scope: scope,
31+
redirect_uri: redirect_uri
32+
}));
33+
});
34+
35+
app.get('/callback', function(req, res) {
36+
37+
// your application requests refresh and access tokens
38+
var code = req.query.code;
39+
var authOptions = {
40+
url: 'https://accounts.spotify.com/api/token',
41+
headers: {
42+
'Authorization': 'Basic ' + (new Buffer(client_id + ':' + secret_key).toString('base64'))
43+
},
44+
form: {
45+
code: code,
46+
redirect_uri: redirect_uri,
47+
grant_type: 'authorization_code'
48+
},
49+
json: true
50+
};
51+
request.post(authOptions, function(error, response, body) {
52+
if (!error && response.statusCode === 200) {
53+
54+
var access_token = body.access_token,
55+
refresh_token = body.refresh_token;
56+
57+
var options = {
58+
url: 'https://api.spotify.com/v1/me',
59+
headers: { 'Authorization': 'Bearer ' + access_token },
60+
json: true
61+
};
62+
63+
// use the access token to access the Spotify Web API
64+
request.get(options, function(error, response, body) {
65+
console.log(body);
66+
});
67+
68+
// we can also pass the token to the browser to make requests from there
69+
res.redirect('/#' +
70+
querystring.stringify({
71+
access_token: access_token,
72+
refresh_token: refresh_token
73+
}));
74+
}
75+
});
76+
});
77+
78+
app.get('/refresh_token', function(req, res) {
79+
80+
// requesting access token from refresh token
81+
var refresh_token = req.query.refresh_token;
82+
var authOptions = {
83+
url: 'https://accounts.spotify.com/api/token',
84+
headers: { 'Authorization': 'Basic ' + (new Buffer(client_id + ':' + secret_key).toString('base64')) },
85+
form: {
86+
grant_type: 'refresh_token',
87+
refresh_token: refresh_token
88+
},
89+
json: true
90+
};
91+
92+
request.post(authOptions, function(error, response, body) {
93+
if (!error && response.statusCode === 200) {
94+
var access_token = body.access_token;
95+
res.send({
96+
'access_token': access_token
97+
});
98+
}
99+
});
100+
});
101+
102+
app.listen(8888);

‎authorization_code/public/index.html

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Example of the Authorization Code flow with Spotify</title>
5+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
6+
<style type="text/css">
7+
#login, #loggedin {
8+
display: none;
9+
}
10+
.text-overflow {
11+
overflow: hidden;
12+
text-overflow: ellipsis;
13+
white-space: nowrap;
14+
width: 500px;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<div class="container">
21+
<div id="login">
22+
<h1>This is an example of the Authorization Code flow</h1>
23+
<a href="/login" class="btn btn-primary">Log in with Spotify</a>
24+
</div>
25+
<div id="loggedin">
26+
<div id="user-profile">
27+
</div>
28+
<div id="oauth">
29+
</div>
30+
<button class="btn btn-default" id="obtain-new-token">Obtain new token using the refresh token</button>
31+
</div>
32+
</div>
33+
34+
<script id="user-profile-template" type="text/x-handlebars-template">
35+
<h1>Logged in as {{display_name}}</h1>
36+
<div class="media">
37+
<div class="pull-left">
38+
<img class="media-object" width="150" src="{{image.url}}" />
39+
</div>
40+
<div class="media-body">
41+
<dl class="dl-horizontal">
42+
<dt>Display name</dt><dd>{{display_name}}</dd>
43+
<dt>Id</dt><dd>{{id}}</dd>
44+
<dt>Email</dt><dd>{{email}}</dd>
45+
<dt>Spotify URI</dt><dd><a href="{{self.uri}}">{{self.uri}}</a></dd>
46+
<dt>Link</dt><dd><a href="{{self.web}}">{{self.web}}</a></dd>
47+
<dt>Profile Image</dt><dd><a href="{{image.url}}">{{image.url}}</a></dd>
48+
</dl>
49+
</div>
50+
</div>
51+
</script>
52+
53+
<script id="oauth-template" type="text/x-handlebars-template">
54+
<h2>oAuth info</h2>
55+
<dl class="dl-horizontal">
56+
<dt>Access token</dt><dd class="text-overflow">{{access_token}}</dd>
57+
<dt>Refresh token</dt><dd class="text-overflow">{{refresh_token}}></dd>
58+
</dl>
59+
</script>
60+
61+
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
62+
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
63+
<script>
64+
(function() {
65+
66+
/**
67+
* Obtains parameters from the hash of the URL
68+
* @return Object
69+
*/
70+
function getHashParams() {
71+
var hashParams = {};
72+
var e, r = /([^&;=]+)=?([^&;]*)/g,
73+
q = window.location.hash.substring(1);
74+
while ( e = r.exec(q)) {
75+
hashParams[e[1]] = decodeURIComponent(e[2]);
76+
}
77+
return hashParams;
78+
}
79+
80+
var userProfileSource = document.getElementById('user-profile-template').innerHTML,
81+
userProfileTemplate = Handlebars.compile(userProfileSource),
82+
userProfilePlaceholder = document.getElementById('user-profile');
83+
84+
oauthSource = document.getElementById('oauth-template').innerHTML,
85+
oauthTemplate = Handlebars.compile(oauthSource),
86+
oauthPlaceholder = document.getElementById('oauth');
87+
88+
var params = getHashParams();
89+
90+
var access_token = params.access_token
91+
refresh_token = params.refresh_token;
92+
93+
oauthPlaceholder.innerHTML = oauthTemplate({
94+
access_token: access_token,
95+
refresh_token: refresh_token
96+
});
97+
98+
if (access_token) {
99+
$.ajax({
100+
url: 'https://api.spotify.com/v1/me',
101+
headers: {
102+
'Authorization': 'Bearer ' + access_token
103+
},
104+
success: function(response) {
105+
userProfilePlaceholder.innerHTML = userProfileTemplate(response);
106+
107+
$('#login').hide();
108+
$('#loggedin').show();
109+
}
110+
});
111+
} else {
112+
$('#login').show();
113+
$('#loggedin').hide();
114+
}
115+
116+
document.getElementById('obtain-new-token').addEventListener('click', function() {
117+
$.ajax({
118+
url: '/refresh_token',
119+
data: {
120+
'refresh_token': refresh_token
121+
}
122+
}).done(function(data) {
123+
access_token = data.access_token;
124+
oauthPlaceholder.innerHTML = oauthTemplate({
125+
access_token: access_token,
126+
refresh_token: refresh_token
127+
});
128+
});
129+
}, false);
130+
131+
})();
132+
</script>
133+
</html>
134+

‎client_credentials/app.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* This is an example of a basic node.js script that performs
3+
* the Client Credentials oAuth2 flow to authenticate against
4+
* the Spotify Accounts.
5+
*
6+
* For more information, read
7+
* https://developer.spotify.com/spotify-web-api/authorization-guide/#client_credentials_flow
8+
*/
9+
10+
var request = require('request'); // "Request" library
11+
12+
var client_id = '03ffe0cac0a0401aa6673c3cf6d02ced'; // Your client id
13+
var secret_key = 'a57c43efb9644574a96d6623fb8bfbc2'; // Your secret key
14+
var redirect_uri = 'http://localhost:8888/callback'; // Your redirect uri
15+
16+
// your application requests authorization
17+
var authOptions = {
18+
url: 'https://accounts.spotify.com/api/token',
19+
headers: {
20+
'Authorization': 'Basic ' + (new Buffer(client_id + ':' + secret_key).toString('base64'))
21+
},
22+
form: {
23+
grant_type: 'client_credentials'
24+
},
25+
json: true
26+
};
27+
28+
request.post(authOptions, function(error, response, body) {
29+
if (!error && response.statusCode === 200) {
30+
31+
// use the access token to access the Spotify Web API
32+
var token = body.access_token;
33+
var options = {
34+
url: 'https://api.spotify.com/v1/users/jmperezperez',
35+
headers: {
36+
'Authorization': 'Bearer ' + token
37+
},
38+
json: true
39+
};
40+
request.get(options, function(error, response, body) {
41+
console.log(body);
42+
});
43+
}
44+
});

‎implicit_grant/app.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* This is an example of a basic node.js script that performs
3+
* the Implicit Grant oAuth2 flow to authenticate against
4+
* the Spotify Accounts.
5+
*
6+
* For more information, read
7+
* https://developer.spotify.com/spotify-web-api/authorization-guide/#implicit_grant_flow
8+
*/
9+
10+
var express = require('express'); // Express web server framework
11+
var app = express();
12+
app.use(express.static(__dirname + '/public'));
13+
app.listen(8888);

0 commit comments

Comments
 (0)