{"id":20256299,"url":"https://github.com/devcybiko/myspotify","last_synced_at":"2025-10-15T00:04:02.639Z","repository":{"id":64576651,"uuid":"195150343","full_name":"devcybiko/mySpotify","owner":"devcybiko","description":"A simple API for oAuth and XHR Calls","archived":false,"fork":false,"pushed_at":"2023-01-19T15:22:02.000Z","size":588,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-11T10:13:58.692Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devcybiko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-04T01:43:53.000Z","updated_at":"2019-12-18T07:57:38.000Z","dependencies_parsed_at":"2023-02-11T06:30:38.189Z","dependency_job_id":null,"html_url":"https://github.com/devcybiko/mySpotify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devcybiko/mySpotify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devcybiko%2FmySpotify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devcybiko%2FmySpotify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devcybiko%2FmySpotify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devcybiko%2FmySpotify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devcybiko","download_url":"https://codeload.github.com/devcybiko/mySpotify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devcybiko%2FmySpotify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279030096,"owners_count":26089026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T10:46:10.393Z","updated_at":"2025-10-15T00:04:02.611Z","avatar_url":"https://github.com/devcybiko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spotify Sample Code\n\nIn case it isn't abundantly clear, you'll need to ``clone`` this repo onto your hard drive.\n\nThis is a sample project for a simple Spotify API. The most difficult part is the oAuth authentication with Spotify. There are at least three scenarios for authenticating with Spotify - two of them are for server-side apps. This sample code works in the browser only.\n\nSee the Spotify Docs on [Implicit Grant Flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow) for more details.\n\nYou'll have to _white list_ your web pages (see ##spotify.login) and also run a local webserver to test your pages locally.\n\n\n## Running the local `server.js`\n\nSpotify won't allow files served directly from the file system to be _white listed_ (URLs that start with **file:///**, for example). So I've written a very small file server for you.\n\nYou have to initialize the software. If you haven't already, install _npm_ and _node_ on your computer. You can tell if you have them by typeing the following:\n\n```bash\n$ node --version\nv12.4.0\n```\nIf you don't have that go here: [Nodejs.org](https://nodejs.org/en/)\n\nNext, you'll have to initialized the software:\n\n```bash\n$ cd /Users/greg/git/mySpotify ### go to the mySpotify repo you cloned\n$ npm install -g\n```\n\nFinally, run the local server:\n(Be sure to `cd your-project-with-html-files` first)\n\n```bash\n$ cd /User/greg/git/myProject\n$ myserver\nserver is listening on 80\n```\n\nIf you see errors like this:\n\n```bash\n$ myserver\nevents.js:177\n      throw er; // Unhandled 'error' event\n      ^\nError: listen EADDRINUSE: address already in use :::80\n```\n\nYou have a server already running on port 80. You can go into the `server.js` and change the `80` to some other port number (like `8888`) - but make sure `server.js` isn't running somewhere else on your machine first!\n\nNow, you can access all the pages in your project (at the same directory folder as the `server.js` file) with the URL...\n\nhttp://localhost/__yourfilename__.html\n\nNOTE: If you are using a different port number (like `8888`) the URL will look like this:\n\nhttp://localhost:__8888__/yourfilename.html\n\n\n## spotify.js\n\n`spotify.js` depends on JQuery to function. So be sure you've included `jquery.js` (see the `index.html` file included in the project as a sample).\n\nInclude the `spotify.js` file into your `.html` file using the usual way:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"assets/js/spotify.js\"\u003e\u003c/script\u003e\n```\n\n## spotify.login()\n\nNone of the `spotify.js` functions will work until the user logs in to Spotify.com. You can offer a Login Button on your app, or just call the login function at the start of the app.\n\nYou'll have to register as a developer at Spotify's website. And, you'll have to create an `app`. The instructions are at [Spotify's Developer](https://developer.spotify.com/documentation/general/guides/app-settings/#register-your-app) page.\n\nYou can use whatever app name you like (and create as many apps as you like). But you'll also have to _white list_ all your URLS. This is a [PITA](https://www.urbandictionary.com/define.php?term=pain%20in%20the%20ass) because you have to register EVERY URL - _both on your localhost and in your Github.io domain_.\n\nWhen you create an app, you'll also get a `clientId` that is your ticket to use the Spotify API for free. You'll need to pass that into the spotify.login() function.\n\nYou'll also have to pass in the \"callbackURL\". This is any page in your website. But I recommend you just use the current page - which is the `window.location.href` as seen in the sample code below.\n\n```html\n\u003cbutton onclick=\"myLogin()\"\u003eLogin\u003c/button\u003e\u003cbr /\u003e\n```\n```javascript\nfunction myLogin() {\n    var clientId = 'ae735174e6d74af294e078eeeaa6e5c6'; // from https://developer.spotify.com/dashboard/applications\n    var callbackURL = window.location.href; // the current web page\n    spotify.login(clientId, callbackURL);\n}\n```\n\n**Don't be surprised when your webpage redirects to Spotify's login page.** Once the user logs in, the user will be redirected back to your site.\n\nThe `spotify.js` code will grab the `access_token` from the URL and store it in a cookie for safe keeping. From here on out, you're done with Spotify's oAuth authentication. The `spotify.js` will handle the oAuth details under the covers.\n\n## spotify.logout()\n\nYou can force the user to logout of the app by calling `spotify.logout()`. It doesn't do much more than delete the `access_token` cookie so that all future calls will fail.\n\nThere's no need to call `spotify.logout()` unless you really want to.\n\n```html\n\u003cbutton onclick=\"myLogout()\"\u003eLogout\u003c/button\u003e\u003cbr /\u003e\n```\n```javascript\nfunction myLogout() {\n    spotify.logout();\n}\n```\n## spotify.call()\n\nThe `spotify.call()` function is a very thin wrapper around the `$.ajax()` call that embeds the `access_token` into the Spotify API headers. You'll use this to call all the Spotify APIs.\n\nYou have to provide the `apiURL`, the `data` the api requires (as a JavaScript object) and a `callbackFunction` that will get the returned data as a parameter. If an error occurs, an `alert()` will be displayed showin you the error. \n\n_Alerts_ are frowned upon as part of the UI. If you like, you can edit the `spotify.js` code and comment out the `alert()` on line 81. But it does come in handy when the cookies expires or if the user forgets to login.\n\n```html\n\u003cbutton onclick=\"mySearch('depeche mode')\"\u003eDepeche Mode\u003c/button\u003e\u003cbr /\u003e\n\u003cbutton onclick=\"mySearch('weird al')\"\u003eWeird Al\u003c/button\u003e\u003cbr /\u003e\n```\n```javascript\nfunction myCallback(data) {\n    $('#main').html('\u003cp\u003e' + JSON.stringify(data) + '\u003c/p\u003e');\n}\n\nfunction mySearch(searchTerms) {\n  $('#main').html('');\n  spotify.call(\n    'https://api.spotify.com/v1/search',\n    { q: searchTerms, type: 'track,artist', market: 'US', limit: '10', offset: '0' },\n   myCallback);\n}\n```\n\n## Spotify APIs\n\nThe best way to fine the Spotify APIs is to check out the [Spotify Console](https://developer.spotify.com/console/) page. You can actually test each API and figure out what values to pass in and what results you'll get back.\n\n## White Listing your URLs\n\n### Local Host URLs\n\nGo to the [Spotify Dashboard](https://developer.spotify.com/dashboard/applications) and click on your application. Then, click on the green `Edit Settings` in the upper-right corner of the screen. Under the \"Redirect URIs\" section you have to list every page that is going to call the Spotify API - **EXACTLY** as it will appear in the user's browser.\n\nFor example you should include this URL:\n\nhttp://localhost/__yourfilename__.html\n\nAND, if you are using a special port number (say `8888`)...\n\nhttp://localhost:__8888__/yourfilename.html\n\nYou'll have to do this for EVERY page that will call Spotify APIs.\n\n### Github Pages URLs, TOO!\n\nYou have to also include your Github Pages URLs, too. When you deploy your apps to production, your URLs change. So be sure to __White List__ them, too.\n\n`https://devcybiko.github.io/mySpotify/`\n\nas well as each page by name\n\n`https://devcybiko.github.io/mySpotify/index.html`\n\n### AN ALTERNATIVE:\n\nThe alternative would be to __white list__ only your github pages and constantly PUSH to your master branch. Worth thinking about.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevcybiko%2Fmyspotify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevcybiko%2Fmyspotify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevcybiko%2Fmyspotify/lists"}