Implement User Login
Closes #6. User can now log in and be redirected to a data display page(needs to be fleshed out).
This commit is contained in:
Chris
@@ -1,12 +1,9 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Example of the Authorization Code flow with Spotify</title>
|
<title>User Login</title>
|
||||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
#login, #loggedin {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.text-overflow {
|
.text-overflow {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@@ -22,111 +19,6 @@
|
|||||||
<h1>This is an example of the Authorization Code flow</h1>
|
<h1>This is an example of the Authorization Code flow</h1>
|
||||||
<a href="/login" class="btn btn-primary">Log in with Spotify</a>
|
<a href="/login" class="btn btn-primary">Log in with Spotify</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="loggedin">
|
|
||||||
<div id="user-profile">
|
|
||||||
</div>
|
|
||||||
<div id="oauth">
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-default" id="obtain-new-token">Obtain new token using the refresh token</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script id="user-profile-template" type="text/x-handlebars-template">
|
|
||||||
<h1>Logged in as {{display_name}}</h1>
|
|
||||||
<div class="media">
|
|
||||||
<div class="pull-left">
|
|
||||||
<img class="media-object" width="150" src="{{images.0.url}}" />
|
|
||||||
</div>
|
|
||||||
<div class="media-body">
|
|
||||||
<dl class="dl-horizontal">
|
|
||||||
<dt>Display name</dt><dd class="clearfix">{{display_name}}</dd>
|
|
||||||
<dt>Id</dt><dd>{{id}}</dd>
|
|
||||||
<dt>Email</dt><dd>{{email}}</dd>
|
|
||||||
<dt>Spotify URI</dt><dd><a href="{{external_urls.spotify}}">{{external_urls.spotify}}</a></dd>
|
|
||||||
<dt>Link</dt><dd><a href="{{href}}">{{href}}</a></dd>
|
|
||||||
<dt>Profile Image</dt><dd class="clearfix"><a href="{{images.0.url}}">{{images.0.url}}</a></dd>
|
|
||||||
<dt>Country</dt><dd>{{country}}</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script id="oauth-template" type="text/x-handlebars-template">
|
|
||||||
<h2>oAuth info</h2>
|
|
||||||
<dl class="dl-horizontal">
|
|
||||||
<dt>Access token</dt><dd class="text-overflow">{{access_token}}</dd>
|
|
||||||
<dt>Refresh token</dt><dd class="text-overflow">{{refresh_token}}</dd>
|
|
||||||
</dl>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
|
|
||||||
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
/**
|
|
||||||
* Obtains parameters from the hash of the URL
|
|
||||||
* @return Object
|
|
||||||
*/
|
|
||||||
function getHashParams() {
|
|
||||||
var hashParams = {};
|
|
||||||
var e, r = /([^&;=]+)=?([^&;]*)/g,
|
|
||||||
q = window.location.hash.substring(1);
|
|
||||||
while ( e = r.exec(q)) {
|
|
||||||
hashParams[e[1]] = decodeURIComponent(e[2]);
|
|
||||||
}
|
|
||||||
return hashParams;
|
|
||||||
}
|
|
||||||
var userProfileSource = document.getElementById('user-profile-template').innerHTML,
|
|
||||||
userProfileTemplate = Handlebars.compile(userProfileSource),
|
|
||||||
userProfilePlaceholder = document.getElementById('user-profile');
|
|
||||||
var oauthSource = document.getElementById('oauth-template').innerHTML,
|
|
||||||
oauthTemplate = Handlebars.compile(oauthSource),
|
|
||||||
oauthPlaceholder = document.getElementById('oauth');
|
|
||||||
var params = getHashParams();
|
|
||||||
var access_token = params.access_token,
|
|
||||||
refresh_token = params.refresh_token,
|
|
||||||
error = params.error;
|
|
||||||
if (error) {
|
|
||||||
alert('There was an error during the authentication');
|
|
||||||
} else {
|
|
||||||
if (access_token) {
|
|
||||||
// render oauth info
|
|
||||||
oauthPlaceholder.innerHTML = oauthTemplate({
|
|
||||||
access_token: access_token,
|
|
||||||
refresh_token: refresh_token
|
|
||||||
});
|
|
||||||
$.ajax({
|
|
||||||
url: 'https://api.spotify.com/v1/me',
|
|
||||||
headers: {
|
|
||||||
'Authorization': 'Bearer ' + access_token
|
|
||||||
},
|
|
||||||
success: function(response) {
|
|
||||||
userProfilePlaceholder.innerHTML = userProfileTemplate(response);
|
|
||||||
$('#login').hide();
|
|
||||||
$('#loggedin').show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// render initial screen
|
|
||||||
$('#login').show();
|
|
||||||
$('#loggedin').hide();
|
|
||||||
}
|
|
||||||
document.getElementById('obtain-new-token').addEventListener('click', function() {
|
|
||||||
$.ajax({
|
|
||||||
url: '/refresh_token',
|
|
||||||
data: {
|
|
||||||
'refresh_token': refresh_token
|
|
||||||
}
|
|
||||||
}).done(function(data) {
|
|
||||||
access_token = data.access_token;
|
|
||||||
oauthPlaceholder.innerHTML = oauthTemplate({
|
|
||||||
access_token: access_token,
|
|
||||||
refresh_token: refresh_token
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}, false);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
20
spotifyvis/templates/spotifyvis/user_data.html
Normal file
20
spotifyvis/templates/spotifyvis/user_data.html
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||||
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||||
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||||
|
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>User Spotify Data</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--[if lt IE 7]>
|
||||||
|
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
|
||||||
|
<![endif]-->
|
||||||
|
<h1>Logged in as {{ id }}</h1>
|
||||||
|
<h2>Display name {{ user_name }}</h2>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -77,9 +77,21 @@ def callback(request):
|
|||||||
|
|
||||||
response = requests.post('https://accounts.spotify.com/api/token', data = payload).json()
|
response = requests.post('https://accounts.spotify.com/api/token', data = payload).json()
|
||||||
# despite its name, datetime.today() returns a datetime object, not a date object
|
# despite its name, datetime.today() returns a datetime object, not a date object
|
||||||
request.session['token_obtained_at'] = str(datetime.datetime.today())
|
# use datetime.strptime() to get a datetime object from a string
|
||||||
|
request.session['token_obtained_at'] = str(datetime.datetime.today())
|
||||||
request.session['access_token'] = response['access_token']
|
request.session['access_token'] = response['access_token']
|
||||||
request.session['refresh_token'] = response['refresh_token']
|
request.session['refresh_token'] = response['refresh_token']
|
||||||
request.session['valid_for'] = response['expires_in']
|
request.session['valid_for'] = response['expires_in']
|
||||||
print(response)
|
print(response)
|
||||||
return HttpResponse("At callback")
|
|
||||||
|
auth_token_str = "Bearer " + response['access_token']
|
||||||
|
headers = {
|
||||||
|
'Authorization': auth_token_str
|
||||||
|
}
|
||||||
|
|
||||||
|
user_data_response = requests.get('https://api.spotify.com/v1/me', headers = headers).json()
|
||||||
|
context = {
|
||||||
|
'user_name': user_data_response['display_name'],
|
||||||
|
'id': user_data_response['id'],
|
||||||
|
}
|
||||||
|
return render(request, 'spotifyvis/user_data.html', context)
|
||||||
Reference in New Issue
Block a user