diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js index 71f100d4..df7d3876 100755 --- a/src/js/components/SpotifyAuthenticationFrame.js +++ b/src/js/components/SpotifyAuthenticationFrame.js @@ -17,7 +17,6 @@ class SpotifyAuthenticationFrame extends React.Component{ super(props); this.state = { - frameUrl: this.props.authorization_url+'?action=frame', authorizing: false } } @@ -30,71 +29,89 @@ class SpotifyAuthenticationFrame extends React.Component{ // This is triggered when the popup posts a message, which is then passed to // the iframe, and then passed on to the parent frame (our application) window.addEventListener('message', function(event){ - - // only allow incoming data from our authorized authenticator proxy - var authorization_domain = self.props.authorization_url.substring(0,self.props.authorization_url.indexOf('/',8)) - if (event.origin != authorization_domain){ - self.props.uiActions.createNotification('Authorization failed. '+event.origin+' is not the configured authorization_url.','bad') - return false - } - - // Window prematurely closed - if (event.data == 'closed'){ - self.setState({ - frameUrl: self.props.authorization_url+'?action=frame', - authorizing: false - }) - - // Popup was blocked by the browser - } else if (event.data == 'blocked'){ - self.props.uiActions.createNotification('Popup blocked. Please allow popups and try again.','bad') - self.setState({ - frameUrl: self.props.authorization_url+'?action=frame', - authorizing: false - }) - - } else { - var data = JSON.parse(event.data); - - // Spotify bounced with an error - if (typeof(data.error) !== 'undefined'){ - self.props.uiActions.createNotification(data.error,'bad') - - // No errors? We're in! - } else { - self.props.spotifyActions.authorizationGranted(data); - self.props.spotifyActions.getMe(); - } - - // Turn off our authorizing switch - self.setState({ - frameUrl: self.props.authorization_url+'?action=frame', - authorizing: false - }) - } - + self.handleMessage(event) }, false); } + handleMessage(event){ + + var data = JSON.parse(event.data) + + // Only allow incoming data from our authorized authenticator proxy + var authorization_domain = this.props.authorization_url.substring(0,this.props.authorization_url.indexOf('/',8)) + if (event.origin != authorization_domain){ + this.props.uiActions.createNotification('Authorization failed. '+event.origin+' is not the configured authorization_url.','bad') + return false + } + + // Spotify bounced with an error + if (typeof(data.error) !== 'undefined'){ + this.props.uiActions.createNotification(data.error,'bad') + + // No errors? We're in! + } else { + this.props.spotifyActions.authorizationGranted(data) + this.props.spotifyActions.getMe() + } + + // Turn off our authorizing switch + this.setState({authorizing: false}) + } + startAuthorization(){ - this.setState({ - frameUrl: this.props.authorization_url+'?action=authorize&app='+location.protocol+'//'+window.location.host, - authorizing: true - }) + + var self = this + this.setState({authorizing: true}) + + // Open an authentication request window (to spotify) + var url = this.props.authorization_url+'?action=authorize' + var scopes = [ + 'playlist-modify-private', + 'playlist-modify-public', + 'playlist-read-private', + 'playlist-modify-private', + 'user-library-read', + 'user-library-modify', + 'user-follow-modify', + 'user-follow-read', + 'user-top-read', + 'user-read-currently-playing', + 'user-read-playback-state' + ] + var popup = window.open(url+'&scope='+scopes.join('%20'),"popup","height=680,width=400"); + + // Start timer to check our popup's state + var timer = setInterval(checkPopup, 1000); + function checkPopup(){ + + // Popup has been closed + if (typeof(popup) !== 'undefined' && popup){ + if (popup.closed){ + self.setState({authorizing: false}) + clearInterval(timer); + } + + // Popup does not exist, so must have been blocked + } else { + self.props.uiActions.createNotification('Popup blocked. Please allow popups and try again.','bad') + self.setState({authorizing: false}) + clearInterval(timer); + } + } } renderAuthorizeButton(){ - if( this.state.authorizing ){ + if (this.state.authorizing){ return ( ) - }else if( this.props.authorized ){ + } else if (this.props.authorized){ return ( ) - }else{ + } else { return ( ) @@ -107,7 +124,7 @@ class SpotifyAuthenticationFrame extends React.Component{ if (this.props.refreshing_token){ return ( ); } else { @@ -120,7 +137,6 @@ class SpotifyAuthenticationFrame extends React.Component{ render(){ return ( - { this.renderAuthorizeButton() } { this.renderRefreshButton() }