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.
Apple's framework for working with music is MusicKit. It focuses specifically on letting users play their own music through 3rd-party apps and websites... not totally in line with my goal of displaying my music on my website, but one should allow for the other (so I thought). MusicKit also includes a JavaScript library, which again was mostly tangential to my needs.
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, Music-User-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.