31:[] 2f:{"title":"Spotify Login","cells":[{"id":0,"value":"md`# Spotify Login`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`_A tiny widget for client-side authentication using the Spotify API! Made by [@harrislapiroff](/@harrislapiroff) and [@ruthie](/@ruthie)._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"spotifyLogin(CLIENT_ID, { scope: 'user-read-recently-played user-top-read' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`## Usage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`This widget uses Spotify's [implicit grant authorization flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow) which allows us short-term non-refreshable access to a user's data after they authenticate.\n\nTo use this token you will first need to [create a Spotify application](https://developer.spotify.com/dashboard/) and procure a client ID. You _cannot_ use the client ID in this notebook—it will only work for this notebook.\n\nYou will also need to whitelist your notebook for redirection from Spotify authorization flow. To do this:\n\n1. from the [Spotify developer dashboard](https://developer.spotify.com/dashboard/applications) click on your application,\n2. click on **Edit Settings**, and\n3. add the notebook URL under **Redirect URIs**\n\nNow, include the Spotify authentication widget in your notebook by importing:\n\n~~~js\nimport { spotifyLogin } from '@harrislapiroff/spotify-login'\n~~~\n\nAnd use it like so:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof spotifyToken = spotifyLogin(CLIENT_ID, { scope: 'user-read-recently-played user-top-read' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`The second argument is an optional \\`params\\` object which can have keys for any of the params in the [implicit grant flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow) _except_ \\`response_type\\`, \\`client_id\\`, and \\`redirect_uri\\`, which will all be set automatically. You can also leave it out and you will get the default permission scope.\n\nYou can then make API calls using the received token. Note that you should provide a fallback for the token being \\`null\\`—when the reader has not authenticated yet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"{\n if (spotifyToken === null) return md`**⚠️ You must log in to Spotify above to see this information!**`\n \n const topTracks = await (await fetch(\n 'https://api.spotify.com/v1/me/top/tracks?time_range=short_term&limit=5',\n { headers: { Authorization: `Bearer ${spotifyToken}`} }\n )).json()\n \n return html`

Your Recent Top Tracks

${d.name}

\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`## Possible Explorations for the Future\n\n* Is it possible to use the [authorization code with PKCE flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow-with-proof-key-for-code-exchange-pkce) and \\`localStorage\\` to create a semi-permanent authorization?\n* Can we use the \\`state\\` param for the implicit grant flow to support multiple login buttons in a single notebook? (Probably not and also, why would you?)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"spotifyLogin = async (clientId, params = {}) => {\n let output\n const spotifyToken = new URLSearchParams(window.location.hash.replace('#', '?')).get('access_token')\n \n if (!spotifyToken) {\n output = loginButton(clientId, params)\n } else {\n const spotifyProfileResponse = await fetch(\n 'https://api.spotify.com/v1/me',\n { headers: { Authorization: `Bearer ${spotifyToken}` } }\n )\n const spotifyProfile = await spotifyProfileResponse.json()\n output = profileDetails(spotifyProfile)\n }\n \n return Object.assign(output, { value: spotifyToken })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"loginButton = (clientId, params = {}) => {\n const notebookUrl = html``.href\n const queryStringWriter = new URLSearchParams()\n\n queryStringWriter.append('response_type', 'token')\n queryStringWriter.append('client_id', clientId)\n queryStringWriter.append('redirect_uri', notebookUrl)\n Object.entries(params).forEach(([k, v]) => queryStringWriter.append(k, v))\n \n return html`\n \n Log in with Spotify\n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"profileDetails = (profile) => html`\n Logged in to Spotify as\n ${'images' in profile && profile.images.length > 0 ? html`\n \n ` : ''}\n ${profile.display_name}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"CLIENT_ID = 'c974972fa3a346af815aa755a3c53c42'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}