eddiemoore / angular-spotify Goto Github PK
View Code? Open in Web Editor NEWAngular Service to connect to Spotify Web API
License: MIT License
Angular Service to connect to Spotify Web API
License: MIT License
After I login I get back a token and have it saved in localStorage:
app.controller('MainCtrl', function($scope, $http, $window, $rootScope, Spotify, SpotifyProvider){
$rootScope.token = $window.localStorage.getItem('spotify-token') || false;
$scope.requestSpotifyLogin = function(){
Spotify.login().then(function(data){
$rootScope.token = data;
});
};
});
Then when I send a request like (Spotify.userFollowingContains('type', 'ids')
) I get an error that my request is not authorized even though I am logged in:
GET https://api.spotify.com/v1/me/following/contains?ids=ids&type=type 401 (Unauthorized)
I think that is because I have not set my auth token with SpotifyProvider.setAuthToken('zoasliu1248sdfuiknuha7882iu4rnuwehifskmkiuwhjg23');
. However when the Provider phase runs I do not have a token.
What I would like to do is Spotify.setAuthToken($rootScope.token)
and maybe Spotify.getAuthToken()
so that once a user logs in I can begin authorizing requests
Hi, thank's for this awesome project!
I'm a newbie. So my question will be stupid.
Can you help me to understand the perfect login flow to store the token after the login?
I'm trying to do it in Angular.
So in the main controller, after the user click on the button Login, i can access Spotify to retrive the token and with your example (callback.html) i'm able to store in the localStorage.
But after that i can't figure how to use it to make the Authorized api call.
Please help me 😰
Branch | Build failing 🚨 |
---|---|
Dependency | codecov |
Current Version | 3.0.2 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
codecov is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
Fix for not git repos
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi, do you consider using Authorization Code Flow so that we could get a refresh token to use when needed.
TypeError: $http(...).success is not a function
at NgSpotify.api (vendor.js:41735)
at NgSpotify.getAlbum (vendor.js:41765)
at root.controller.js:19
at Scope.$emit (vendor.js:18425)
at SearchInputController.ctrl.onclick (searchinput.controller.js:8)
at fn (eval at compile (vendor.js:15351), :4:177)
at callback (vendor.js:26969)
at Scope.$eval (vendor.js:18172)
at Scope.$apply (vendor.js:18272)
at HTMLDivElement. (vendor.js:26974)
Add an api call to the Spotify charts.
http://charts.spotify.com/docs
Hi there, thanks for this dope library!
Everything works fine except getting the audio features of a track (tempo, danceability etc..). The problem is, that the methods getTrackAudioFeatures
and getTracksAudioFeatures
do not send an access token, which is required, see spotify api docs for audio-features.
A simple fix could be:
Line 474, change
return this.api('/audio-features/' + track);
to
return this.api('/audio-features/' + track, 'GET', null, null, this._auth());
this will send the token in the header!
Similar need to append this._auth() to getTracksAudioFeatures
.
I could send a PR if you want!
Have a nice day,
Felix
Eddie - thank you so much for this angular service. As a newb to web development this has been huge in motivating me to learn more. I've hit a bit of a snag on the authorization example - I'm not certain if my mistake or not.
Login opens the dialog window, I login to spotify with my credentials.
When the example's callback.html is triggered I see that the spotify-token is correctly parsed and set on the localStorage.
But I never see the added event listener trigger the storageChanged() method.
Therefore the dialog window hangs open, and auth is never considered complete.
I've tried firefox and chrome and see the same issue.
Any idea what might be going on?
Any help is much appreciated.
Thanks
-Scott
I'm following all needed steps in order to get angular-spotify working (setting clientId, token, etc)
But when performing the call to spotify api, I get a 401 error response saying token is not provided. I looked at the call headers, and I see it is not sending the token for authentication:
access-control-allow-credentials true access-control-allow-headers Accept, Authorization, Origin, Content-Type, Retry-After access-control-allow-methods GET, POST, OPTIONS, PUT, DELETE, PATCH access-control-allow-origin * access-control-max-age 604800 alt-svc clear content-encoding gzip content-length 90 content-type application/json date Sat, 04 Aug 2018 23:26:01 GMT via 1.1 google www-authenticate Bearer realm="spotify" X-Firefox-Spdy
If i add manually the 'Authorization' parameter with my token to the query, it performs the call correctly, and gives me the data I want.
Any idea why is not attaching the token to the call params? Thank you!
P.S.: I'm using tag 1.4.2 in order to make it work with angular 1.5
It would be really useful if the module could get the current user id as that is used in a number of places to retrieve further info.
3.0.2
to 3.0.3
.This version is covered by your current version range and after updating it in your project the build failed.
coveralls is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
As suggested by NPM and Snyk.
The new version differs by 1 commits.
aa2519c
dependency security audit fixes from npm & snyk (#210)
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:
.travis.yml
package.json
files, so that was left aloneIf you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.
Greenkeeper has checked the engines
key in any package.json
file, the .nvmrc
file, and the .travis.yml
file, if present.
engines
was only updated if it defined a single version, not a range..nvmrc
was updated to Node.js 10.travis.yml
was only changed if there was a root-level node_js
that didn’t already include Node.js 10, such as node
or lts/*
. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.For many simpler .travis.yml
configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
How is possible to add callback function when auth popup authentication is closed by user?
$Spotify.login().then(function (data) {
if (data) {
} else {
}
})
// maybe like this:
.error(function () {
console.log("User has canceled auth popup!");
});
Regards.
New API endpoint https://developer.spotify.com/web-api/reorder-playlists-tracks/
I am using SpotifyProvider.setRedirectUri
in my app.config block like so:
SpotifyProvider.setRedirectUri('http://localhost:3000/api/spotify/callback');
Now I have deployed my application to heroku at http://showjunkie.herokuapp.com/#/. How can I conditionally set the rederict uri based on the environment? I don't want the production env to point to localhost but it is nice for development
Hey eddiemoore,
Thanks for putting this together, it's been rather useful.
I just encountered an issue however when I try to use the getCategories function.
It seems that the version of angular-spotify available over bower hasn't had its /dist/ file updated to the latest changes. I can see the getCategories function in the /src/js file, but not the /dist/js file.
Cheers,
Simon
When I log in with spotify everything works peachy on localhost. However for my heroku deploy I will log in to spotify and the callback.html will appear with an access token in the url string, but the box does not close itself. LocalStorage is updated on the callback.html but not for the main site, index.html
The issue is that in production the callback.html box does not go away by itself after contacting spotify successfully. It works when running on localhost though..
Hi, Im following your example but my auth token is not set so all future request return 401,
What can i do?
hi am getting this error when trying to authenticate with spotify services, these are my configurations:
.config(function (SpotifyProvider) {
SpotifyProvider.setClientId('<CLIENT_ID>');
SpotifyProvider.setRedirectUri('http://localhost/ideas/spotify/callback');
SpotifyProvider.setScope('playlist-read-private');
})
in my controller i have the login function that runs when users click a login button
$scope.login = function () {
Spotify.login();
};
in my index page am loading this to js files: angular.min.js and angular-spotify.js in that order. can you help me figure out what am missing or what am doing wrong
Hi,
thank you a lot for your great work with this plugin! I'm currently working on an Hybrid App (ionic Framework) and in don't get the Login to work.
What has the callback uri to be for a mobile application? i tried to make an html on an external server and everything works fine besides the localSotorage value isn't set in the right window. It is set in the Popup Window of my callback URI but not in the App window.
I need some help here :-(
Branch | Build failing 🚨 |
---|---|
Dependency | grunt-contrib-uglify |
Current Version | 3.3.0 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
grunt-contrib-uglify is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi,
The newest update introduces a regression.
var songString = 'eminem lose';
Spotify.search(songString, 'track')
generates a get request to https://api.spotify.com/v1/search?query=eminem%2520lose&offset=0&limit=20&type=track
As you see the url is double encoded.
Branch | Build failing 🚨 |
---|---|
Dependency |
grunt
|
Current Version | 1.0.2 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
grunt is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 10 commits.
9ba3a99
1.0.3
eee4c33
Changelog v1.0.3
46da7f2
Merge pull request #1636 from gruntjs/upt
00f4d8a
Drop support for Node 0.10 and 0.12
e852727
util update
56d702e
Update deps
0105524
Fix race condition with file.mkdir and make it operate more similarily to mkdir -p (#1627) r=@vladikoff
303d445
https links (#1629)
d969132
Merge pull request #1624 from gruntjs/rm-bump-deps
289ff91
Remove old bump task and deps
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
The example project work perfectly for me. However when I transfer the code to my own project I get this error. XMLHttpRequest cannot load https://api.spotify.com/v1/search?q=h&type=artist. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.
Thank you very much.
app.js
angular.module('plunker', ['ui.bootstrap', 'ngFacebook', 'spotify'])
.config( function( $facebookProvider, SpotifyProvider ) {
$facebookProvider.setAppId('481111111190694');
$facebookProvider.setPermissions("email");
SpotifyProvider.setClientId('123456789123456789');
SpotifyProvider.setRedirectUri('http://example.com/callback.html');
SpotifyProvider.setScope('playlist-read-private');
})
.run( function( $rootScope ) {
// Load the facebook SDK asynchronously
(function(){
// If we've already installed the SDK, we're done
if (document.getElementById('facebook-jssdk')) {return;}
// Get the first script element, which we'll use to find the parent node
var firstScriptElement = document.getElementsByTagName('script')[0];
// Create a new script element and set its id
var facebookJS = document.createElement('script');
facebookJS.id = 'facebook-jssdk';
// Set the new script's source to the source of the Facebook JS SDK
facebookJS.src = '//connect.facebook.net/en_US/all.js';
// Insert the Facebook JS SDK into the DOM
firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
}());
})
;
var DemoCtrl = function ($scope, $facebook, Spotify) {
$scope.isLoggedIn = false;
$scope.login = function() {
$facebook.login().then(function() {
refresh();
});
}
function refresh() {
$facebook.api("/me").then(
function(response) {
$scope.welcomeMsg = "Welcome " + response.name + " please choose a song";
$scope.name = response.name
$scope.response = response;
$scope.isLoggedIn = true;
},
function(err) {
$scope.welcomeMsg = "Please log in";
});
}
refresh();
$scope.searchArtist = function () {
Spotify.search($scope.searchartist, 'artist').then(function (data) {
$scope.artists = data.artists.items;
});
};
};
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js">
</script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js">
</script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//rawgithub.com/GoDisco/ngFacebook/master/ngFacebook.js"></script>
<script src="app.js"></script>
<script src="bower_components/strophe/strophe.min.js"></script>
<script src="bower_components/angular-spotify/src/angular-spotify.js"></script>
</head>
<body ng-controller="DemoCtrl">
<div class="container">
<h4 ng-hide="!isLoggedIn">
Hello {{name}}
Please choose a song
</h4>
<button type="button" ng-click="login()" ng-hide="isLoggedIn" class="btn">
Login
</button>
<div id="spotify-search" ng-hide="!isLoggedIn">
<input type="text" ng-model="searchartist" ng-change="searchArtist()" placeholder="Search for an artist">
<ul>
<li ng-repeat="artist in artists">
<a class="media" ng-href="{{artist.external_urls.spotify}}" target="_blank">
<img ng-src="{{artist.images[0].url}}" alt="">
<div class="media-details">
{{artist.name}}
</div>
</a>
</li>
</ul>
</div>
</div>
<div id="fb-root">
</div>
</body>
</html>
Branch | Build failing 🚨 |
---|---|
Dependency |
[jasmine-node](https://github.com/mhevery/jasmine-node)
|
Current Version | 1.14.5 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
jasmine-node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
On 29th May 2017 the /search /tracks /albums /artists and /users (and related) endpoints will start requiring an access token, bringing them in-line with all other Web API endpoints.
https://developer.spotify.com/news-stories/2017/01/27/removing-unauthenticated-calls-to-the-web-api/
Branch | Build failing 🚨 |
---|---|
Dependency | phantomjs-prebuilt |
Current Version | 2.1.15 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
phantomjs-prebuilt is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Branch | Build failing 🚨 |
---|---|
Dependency | jshint |
Current Version | 2.9.5 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
jshint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
for
stmt (56a4379)switch
statements (aa2be10)spyOnProperty
(827237f), closes #3183super
usage to valid forms (8f3f880)void
operand (3f920b5)The new version differs by 113 commits.
d5c1a00
v2.9.6
ab3ab85
[[FIX]] Do not warn about non-ambiguous linebreaks
eaca85b
[[CHORE]] Improve test coverage for ASI warning
0a66710
[[FIX]] Relax restriction on asgnmnt to arguments
3aa02db
[[FIX]] Tolerate division following closing brace
55aa54e
[[FIX]] Correct restriction on function name
ff71d3c
[[FIX]] Remove warning W100
bcb3b23
[[CHORE]] Complete Lodash update (#3283)
030713d
[[DOCS]] Introduce administration e-mail address
7993101
[[FIX]] Fix "is is" message typos
578575d
Merge pull request #3254 from mathiasbynens/unicode-10
d763e70
Use old Unicode version for ES5 identifiers
77414e8
Update to Unicode v11
5995a9f
[[FIX]] Restrict IdentifierNames in ES5 code
f2ce8fe
[[TEST]] Add regression test
There are 113 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hello everybody.
I'm using angular v1.6.4 and angular-spotify for angular 1.6.
I'm just trying to login. Until now, my app just should do that. So I don't have much code. I'm using all code provided as example in this repository, just for learning.
My callback.html looks like just as in the bottom of the README page.
My problem is: I can't login or I can't get the token. When I press the login button, the login window is created. I insert my credentials. But after, in the same login window, I am redirected to my app home. So I remain with two windows in my app home. When I force to close the window that was created when I pressed the login button, I verify that the login wasn't successful.
Can somebody help me? I don't know if it is a bug or if I am missing something.
Hi Eddie,
I keep getting 401 errors when making calls to getUserPlaylists and createPlaylist.
I have the following scopes authorized: 'playlist-modify-public, playlist-read-private, playlist-modify-private', so I should be able to read and write playlists, but these permissions errors keep coming up.
For some reason, calling "bower install angular-spotify --save" on Mac OSX will only retrieve 1.3.0. Same issue if I do "bower install angular-spotify#1.4.0 --save" directly
Dump:
bower not-cached https://github.com/eddiemoore/angular-spotify.git#1.4.0
bower resolve https://github.com/eddiemoore/angular-spotify.git#1.4.0
bower ENORESTARGET No tag found that was able to satisfy 1.4.0
Additional error details:
Available versions in https://github.com/eddiemoore/angular-spotify.git: 1.3.0, 1.2.1, 1.2.0, 1.1.1, 1.0.0, 0.14.0, 0.13.0, 0.12.0, 0.11.0, 0.10.0, 0.9.3, 0.8.1, 0.8.0, 0.7.0, 0.6.0, 0.5.4, 0.5.0, 0.3.0, 0.1.15, 0.1.14, 0.1.13, 0.1.12, 0.1.11, 0.1.10
userTracksConains calls /me/tracks instead of /me/tracks/contains
There is a problem with postMessage
in IE when the login window that was opened redirects back to the callback.html page. When it hits this page calling postMessage
on the window.opener
doesn't work. window.opener
is null.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.