secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Moving away from iFrame

Browse Source
This commit is contained in:
James Barnsley
2017-06-12 09:14:09 +12:00
parent 355c1490da
commit b3acf522f3
1 changed files with 69 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/js/components/SpotifyAuthenticationFrame.js
View File

@ -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 (
<button className="working">
Authorizing...
</button>
)
}else if( this.props.authorized ){
} else if (this.props.authorized){
return (
<button className="destructive" onClick={() => this.props.spotifyActions.authorizationRevoked()}>Log out</button>
)
}else{
} else {
return (
<button className="primary" onClick={() => this.startAuthorization()}>Log in</button>
)
@ -107,7 +124,7 @@ class SpotifyAuthenticationFrame extends React.Component{
if (this.props.refreshing_token){
return (
<button className="working">
Refreshing...
Force token refresh
</button>
);
} else {
@ -120,7 +137,6 @@ class SpotifyAuthenticationFrame extends React.Component{
render(){
return (
<span>
<iframe src={this.state.frameUrl} style={{ display: 'none' }}></iframe>
{ this.renderAuthorizeButton() }
{ this.renderRefreshButton() }
</span>