-
Notifications
You must be signed in to change notification settings - Fork 0
/
Progression
127 lines (84 loc) · 6.25 KB
/
Progression
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
Start date: 13th May
End date: 9th June
Reason for choosing JAVA:
Just took CS2030S in NUS CS, I want to make use of my acquired knowledge
and apply it as extensively and as in depth as possible
IMPORTANT ISSUES:
Refreshing token process?
Logging down client ID, credientials... during log in process?
Fixing code verifier issue (else just fixate on a given verifier)?
CSS HTMl and Home page design
Skills learnt:
- Hashing algorithms, SHA256
- Authorization callback handler using Java servlets
- State, prevent CSRF attacks
- PKCE, Proof Key for Code Exchanges, Security purposes
- Callback URLs
- Spring Framework
- Sessions using jakarta, XSS attacks
Features:
Consume Spotify's Rest API to show user's :
Top played tracks of all time/past 6 months/past month
Top played artists of all time/past 6 months/past month
Top listened to genres of all time/past 6 months/past month
Current playing track
Able to check out any artist / genre / track
Future additions:
User statistics, AI generated recommendations, Recommended songs/artist/album
1. CodeChallenge, CodeVerify
The hashing is a one-way compression function to convert inputs of different%2C%20we%20can%20use,digest(input)%3B
- Generates a random string of characters up to a specified length (Recommended to be from 43 to 128)
- Generates a hash code of code verifier using SHA-256 hashing algorithm (MessageDigest not thread safe, try not to perform async way)
- Generates a base64 represenation of a byte[] array
2. Request authorization (Current) "OAuth 2.0 Method"
To request authorization from the user, a GET request must be made to the /authorize endpoint. This request should include the same parameters as the authorization code flow, along with two additional parameters: code_challenge and code_challenge_method:
The app generates a PKCE code challenge and redirects to the Spotify authorization server login page by updating the window.location object value. This allows the user to grant permissions to our application
Please note that the code verifier value is stored locally using the localStorage JavaScript property for use in the next step of the authorization flow.
2.1 Able to produce the correct link to Spotify authentication page
- Scope controls the set of resources and operations that an access token permits
- State adds layer of security
2.2 How to collect the callback link?
- Here's a common example of how a callback works
Basically a callback URL gives directions to an external system on where to go next.
What is at that URL could be anything. It doesn't have to be a static URL.
- Another use case could be something like OAuth, it's may not be called by the API directly,
instead the callback URL will be called by the browser after completing the authencation with the identity
provider. Normally after end user key in the username password, the identity service provider will trigger a
browser redirect to your "callback" url with the temporary authroization code, e.g.
https://example.com/callback?code=AUTHORIZATION_CODE
Then your application could use this authorization code to request a
access token with the identity provider which has a much longer lifetime.
- Proceeding with Spring + Java Wrapper for Spotify API class found on github (BACKEND)
- For accessing web links javascript will be used as the front end (FRONTEND)
-PKCE; Code verifier must be base64 encoded and not using Java.util.base64 but org.apache.base64 (find out why?)
-Access token, Refresh token obtained
2.3 Front End, Back End finsihed
- Finished the process of logging in into spotify --> now the auth code is obtained --> access token + refresh token obtained --> redirected back to the home page of DJ Lite
2.4 Dockerised the front end and back end
- Now they can be hosted with much ease
2.5 Created services and controller folders
- Controllers: Serve as endpoints for api fetch calls from ReactJS frontend
- Services: Serve as simple functions that take in required information in their arguments and perform API calls to Spotify database returning it in the form of JSON data
- Separating services and controllers into 2 separate folders make it more clean and reduces cluttering of code into a single folder/file
2.6 Securing the access token
- Access Code: this data must be considered secret, and must only be known by your application and the provider. There is no reason to make it know to any other parties, including the user, therefore it should NOT be included in cookies. If you need to store it, keep it locally in your servers (perhaps in your database, referencing your users session ID)
- Local/session storage https://docs.cyberark.com/identity/Latest/en/Content/Developer/oidc/tokens/token-storage.htm#Localsessionstorage
- Cookies https://docs.cyberark.com/identity/Latest/en/Content/Developer/oidc/tokens/token-storage.htm#Cookies
- Spring session https://www.linkedin.com/pulse/session-management-spring-boot-abid-anjum
- Settled down with Jakarta's HTTPSession to store useful information, and can be accessed across different folders and files
3. Accessing Spotify user information
3.1 Process of getting information
- front end makes an api call -> the backend receives the matching call to its endpoint via getmapping (Spring) -> uses the access token along with other important parameter settings -> calls the method in the respective service class
- gets the response -> can be converted to response body
(2 weeks passed; 27th May)
4. Dashboard design
- Dashboard has 2 sections
A. User profile picture + Current song playing (if any) --> 2 Components into 1 Component (A)
B. Relevant stats
Charts of Artists, Tracks, Genres (Short term, medium, long) (First 10 or 50, for genres only show 10) 3Components --> 3 Bigger components --> 1 Big Compoent (B)
5. Additional functionalities
5.1 Real time data for song progress(DONE)
5.2 Add Pause/Resume button functionality (DONE)
5.3 Add play song option from song chart (DONE)
5.4 Top genres OR Album feature (DONE)
5.5 Login page animation (DONE)