Using the Apple Music API with Next.js
Yesterday I took on the challenge of displaying my most recently played music on my About page. Spoiler: I'm not sure if I was 100% successful, and I wouldn't recommend following suit without finding a more solid solution.
Anyway, the first thing I had to do to start making requests for music was to get a developer token - a long, secret password that tells Apple I'm authorized to make requests from them. To get this, I had to sign in to the Apple Developer portal, create an identifier and private key in the form of a
.p8 text file, which I then had to plug into an open source Apple Music token generator to finally get the JSON web token (JWT) which is the developer token I could use to make requests.
If this sounds complicated... that's because it was, and note that at this point I had yet to make a single request. I was helped by the fact that I'd already spent a bunch of time in the Apple Developer portal while working on lily dex. I'm not even sure you're able to do all of this without a paid account ($99/year).
At this point, I was flying... straight into a brick wall. I was able to make requests for specific albums, playlists, songs, and more, but as soon as I tried to get personal music data (recently played, heavy rotation, etc) I received a bunch of 403 error responses, meaning I wasn't authorized to make these requests. After some digging, I discovered I'd need yet another token,
This token's primary purpose, as far as I can tell, is to let users authenticate with your 3rd-party Apple Music-integrated app or website. Again, this is not what I wanted to do, I just wanted to read my own Apple Music data... but I figured I could accomplish my goal with this token anyway.
If you're familiar with the “Sign In with Facebook” or “Sign In with Google” flow, that's how a token like this gets generated - you are directed over to another website to authenticate with them, and they return a token saying you're A-OK. Despite not having an app that customers would be signing into, I had to replicate this flow for myself to get the token I needed. The easiest solution I found was to clone and run a fake MusicKit-integrated website, sign in with Apple from there, copy the generated
Music-User-Token and use that for my website.
Finally, I was able to make requests for my most recently played music and more! Yay!
My main fear right now is I have no idea if and when the tokens I'm using will expire. I assume the user token will at some point, at which point I'll have to fire up the fake Apple Music app again to generate a new one.
In the meantime, my About page includes the 6 most recent playlists, albums, and stations I've listened to! This blog post displays 12 and updates live when I start listening to new music. COOL.