Festify / cordova-spotify-oauth

🔐 Easy Spotify authentication for Cordova / PhoneGap apps
MIT License
16 stars 18 forks source link

error in auth: 404 - ionic://localhost is not allowed by Access-Control-Allow-Origin #25

Closed karolinicaca closed 4 years ago

karolinicaca commented 4 years ago

Upon starting the mobile app (built in Cordova) in XCode we get the following error in the Safari Developer View and we had been getting those errors even before when the app functionality was in no way hindered.

Failed to load resource - the server responded with a status of 404() - ionic://localhost/plugins/cordova-spotify-oauth/www/build/spotify-oauth.min.js.map Failed to load resource - the server responded with a status of 404() - ionic://localhost/plugins/cordova-spotify/www/build/cordova-spotify.min.js.map

2,5 months ago approximately the app functionality from Spotify stopped working and now I am wondering if it is possible that it has to do with these errors or if it depends on Spotify upgrading or changing their API.

The code for playing the button in app.js does not even catch the error for the unreturned Promise or do we get any other console log besides "Play button pressed" and "In try clause". It never reaches the spotify play function.

Any idea what might be happening here?

function spotify_play ( element, accessToken, expiresAt ) { console.log('Inside spotify_play'); var spotify_uri = element.dataset.spotify_uri; var spotify_state = element.dataset.spotify_state; var spotify_pos = element.dataset.spotify_pos; var play_src = './static/img/_ionicons_svg_ios-play.svg'; var pause_src = './static/img/_ionicons_svg_ios-pause.svg'; if ( spotify_state == "stopped" ) { cordova.plugins.spotify.play(spotify_uri, { clientId: spotify_client_id, token: accessToken }) $(element).attr('data-spotify_state','playing'); //Change to pausebutton image. $(element).find('.play-image').attr('src', pause_src); } else if ( spotify_state == "playing" ) { var position = ""; cordova.plugins.spotify.getPosition() .then(pos => $(element).attr('data-spotify_pos', pos)) .catch(() => console.log("Whoops, no track is playing right now.")); cordova.plugins.spotify.pause() $(element).attr('data-spotify_state','paused'); //Change to playbutton image. $(element).find('.play-image').attr('src', play_src); } else if ( spotify_state == "paused" ) { cordova.plugins.spotify.play(spotify_uri, { clientId: spotify_client_id, token: accessToken }, spotify_pos ) $(element).attr('data-spotify_state','playing'); //Change to pausebutton image. $(element).find('.play-image').attr('src', pause_src); } }

$(document).on('click', '.spotify-play', function ( event ) { console.log('Play button pressed.'); try{ console.log('In try clause'); cordova.plugins.spotifyAuth.authorize(config) .then(({ accessToken, expiresAt }) => { console.log('Promise returned'); console.log('Access Token: ', accessToken); spotify_play( this, accessToken, expiresAt ) }).catch(function(error){ console.log(error); });

We have been using Spotify Web-Api with authorization through access and refresh tokens and successfully using both of your plugins till about 2 months ago. Any help is greatly appreciated.

NeoLegends commented 4 years ago

Hello!

Failed to load resource - the server responded with a status of 404() - ionic://localhost/plugins/cordova-spotify-oauth/www/build/spotify-oauth.min.js.map Failed to load resource - the server responded with a status of 404() - ionic://localhost/plugins/cordova-spotify/www/build/cordova-spotify.min.js.map

This is just the source maps, that shouldn't affect the functionality of the app.

The code for playing the button in app.js does not even catch the error for the unreturned Promise or do we get any other console log besides "Play button pressed" and "In try clause". It never reaches the spotify play function.

Could you check in the Simulators logs for some error here? If the plugin's promise doesn't resolve anymore there might be an error indicating that in the logs.


In general, I would also suggest that you also try properly awaiting the promises. It seems like you're calling the SDKs functions (which all return promises), but sometimes not waiting for the promise to resolve before modifying the UI or calling another SDK function. Perhaps one promise is rejected (for some other reason) and you're missing that.

karolinicaca commented 4 years ago

Thank you for coming back to me so fast. I will definitely look into the promise handling and improving it, I see your point and it is something I will fix.

In the Xcode debug area this came up: ERROR: Method 'getCode:' not defined in Plugin 'SpotifyOAuth' 2019-08-06 14:38:51.020694+0200 ___ [45891:2066931] FAILED pluginJSON = ["SpotifyOAuthsomenumbers","SpotifyOAuth","getCode",["(apps's-clientID))","(app's-redirectUrl)","https:\/\/app's-token\/dev\/exchange","https:\/\/app's-token\/dev\/refresh",["streaming"]]]

I saw you added the @obj(getCode... to SpotifyOAuthPlugin.swift and updated the plugin with the changes you made today but I get the error nevertheless

NeoLegends commented 4 years ago

I saw you added the @obj(getCode... to SpotifyOAuthPlugin.swift and updated the plugin with the changes you made today but I get the error nevertheless

Correct. This came from #23. I will issue a proper release of the plugin shortly. Did you recompile the app properly after changing the plugin?

karolinicaca commented 4 years ago

You are right, recompiling properly solved the error. The authentication is still failing but I do get some clearer errors now. this is the error Xcode output is logging error:{"name":"auth_failed","line":2,"column":5224,"sourceURL":"ionic://localhost/plugins/cordova-spotify-oauth/www/build/spotify-oauth.min.js"}

Safari Developer Tools giving: [Error] Origin ionic://localhost is not allowed by Access-Control-Allow-Origin. [Error] Fetch API cannot load https://[token].execute-api.eu-central-1.amazonaws.com/dev/exchange due to access control checks. [Error] Failed to load resource: Origin ionic://localhost is not allowed by Access-Control-Allow-Origin. (exchange, line 0)

Any idea on how to solve this? Before the spotify sdk updates CORS was working fine. Bunch of thank-yous, really appreciate your help!

NeoLegends commented 4 years ago

I think this might be because of the ionic:// protocol part that's not whitelisted in the CF.

I would suggest checking all CORS rules for validity.