eddiemoore / angular-spotify Goto Github PK

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

Implement this
https://developer.spotify.com/web-api/check-user-following-playlist/

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 😰

Version 3.0.3 of codecov was just published.

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.

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.

The devDependency coveralls was updated from 3.0.2 to 3.0.3.

🚨 View failing branch.

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.

Your Greenkeeper Bot 🌴

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml
• The new Node.js version is in-range for the engines in 1 of your package.json files, so that was left alone

If 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.

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 :-(

Version 3.4.0 of grunt-contrib-uglify was just published.

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.

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.

Version 1.0.3 of grunt was just published.

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.

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>

Version 1.14.6 of jasmine-node was just published.

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.

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/

Version 2.1.16 of phantomjs-prebuilt was just published.

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.

Your Greenkeeper Bot 🌴

Version 2.9.6 of jshint was just published.

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.

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.

My code.

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.