Practice Pull Request #3
Conversation
run app.js to enable spotify api calls for future
| * https://developer.spotify.com/web-api/authorization-guide/#authorization_code_flow | ||
| */ | ||
|
|
||
| var express = require('express'); // Express web server framework |
There was a problem hiding this comment.
So first off, what is OAuth2?
https://aaronparecki.com/oauth-2-simplified/
In short, it is a way for a program to request information and/or control over another 3rd party service in a limited way. What does this mean? Say you want to log into awesomeWebsite.com with Google. You click login, and then are redirected to google.com, where you enter your credentials. Then google.com tells awesomeWebsite.com that you are good to go.
This example is exactly that, but instead of awesomeWebsite.com, its the html file and the backend.
Note: in your design document you mentioned writing the backend in python using flask. This example is building a backend in node.js using express. The principles are the same, and you'll need a backend server no matter what.
In this file, there are a three endpoints.
/login
/callback
/refresh_token
I will explain each in-line. For OAuth you'll need all three usually.
| * @param {number} length The length of the string | ||
| * @return {string} The generated string | ||
| */ | ||
| var generateRandomString = function(length) { |
There was a problem hiding this comment.
This is just noise. Its making a big random string.
| return text; | ||
| }; | ||
|
|
||
| var stateKey = 'spotify_auth_state'; |
There was a problem hiding this comment.
This is the name of the cookie.
What are cookies? A cookie is a small key-value pair stored as a string by a browser. Web servers can set cookies onto visitors browsers. Cookies are used for lots of things including authorization and tracking.
This example uses spotify_auth_state to track when a user goes to the website, then goes to spotify's site to login, and then to go back the the website.
| .use(cors()) | ||
| .use(cookieParser()); | ||
|
|
||
| app.get('/login', function(req, res) { |
There was a problem hiding this comment.
This is a pretty straightforward endpoint. The website requests logging in with Spotify. See below.
| app.get('/login', function(req, res) { | ||
|
|
||
| var state = generateRandomString(16); | ||
| res.cookie(stateKey, state); |
There was a problem hiding this comment.
This sets a cookie on the response, res. When the browser receives the response, it will store stateKey locally on the machine.
| var access_token = body.access_token, | ||
| refresh_token = body.refresh_token; | ||
|
|
||
| var options = { |
There was a problem hiding this comment.
This is an example call to the spotify api using the access token of a user.
Its calling an api endpoint, setting the Authorization header to Bearer accessTokenStringThatsProbablyAJWTButWhoKnows and sending it as JSON (although this GET request has no body in the request :/)
Any call you make to the spotify api is going to include that Authorization header. You can now talk to spotify on behalf of that user, but are restricted to a limited set of actions and information! You OAuthed!
| }); | ||
|
|
||
| // we can also pass the token to the browser to make requests from there | ||
| res.redirect('/#' + |
There was a problem hiding this comment.
This is tied to the html file below.
Its telling the browser to redirect, but includes the access token and refresh token in the url, which the browser can then pull out and use to make its own requests using javascript.
I don't recommend this method as we (the web application community) have invented better ways to do this. But it works with the example code
| } | ||
| }); | ||
|
|
||
| app.get('/refresh_token', function(req, res) { |
There was a problem hiding this comment.
This is just the logic to refresh a token after it has expired.
| }); | ||
|
|
||
| console.log('Listening on 8888'); | ||
| app.listen(8888); |
There was a problem hiding this comment.
This turns on the webserver on port 8888
| @@ -0,0 +1,142 @@ | |||
| <!doctype html> | |||
There was a problem hiding this comment.
I'm not going to go through this whole file.
Basically its an html page that uses templates and a bit of javascript.
It looks at the url to pull out spotify access tokens and uses AJAX to make http requests from the browser.
I made this so I can leave in-line code comments. If you haven't seen this before, no problem, you will. Otherwise it should be familiar to you. I will add comments to the files below.