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

Using Mopidy-Spotify authentication for backend users

Browse Source
This commit is contained in:
James Barnsley
2017-08-06 20:22:16 +12:00
parent de90c98ea1
commit 1e12f3fb29
9 changed files with 21 additions and 609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
mopidy_iris/core.py
View File

@ -446,27 +446,18 @@ class IrisCore(object):
}
def refresh_spotify_token(self, data):
## TODO: See if we can use the credentials used by Mopidy-Spotify 3.1.0
# Currently this returns 'invalid_client' error
# Use client_id and client_secret from config
# This was introduced in Mopidy-Spotify 3.1.0
#if 'spotify' in self.config and 'client_id' in self.config['spotify']:
# authorization = str(self.config['spotify']['client_id']+':'+self.config['spotify']['client_secret'])
# authorization = authorization.encode('base64').replace('\n', '')
# Mopidy-Spotify is old version, so just use basic authorization code
#else:
# authorization = 'YTg3ZmI0ZGJlZDMwNDc1YjhjZWMzODUyM2RmZjUzZTI6ZDdjODlkMDc1M2VmNDA2OGJiYTE2NzhjNmNmMjZlZDY='
authorization = 'YTg3ZmI0ZGJlZDMwNDc1YjhjZWMzODUyM2RmZjUzZTI6ZDdjODlkMDc1M2VmNDA2OGJiYTE2NzhjNmNmMjZlZDY='
url = 'https://accounts.spotify.com/api/token'
headers = {'Authorization' : 'Basic ' + authorization}
data = {'grant_type': 'client_credentials'}
url = 'https://auth.mopidy.com/spotify/token'
data = {
'client_id': self.config['spotify']['client_id'],
'client_secret': self.config['spotify']['client_secret'],
'grant_type': 'client_credentials'
}
data_encoded = urllib.urlencode( data )
req = urllib2.Request(url, data_encoded, headers)
req = urllib2.Request(url, data_encoded)
try:
response = urllib2.urlopen(req, timeout=30).read()

99
src/js/components/Settings/Advanced.js
View File

@ -1,99 +0,0 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, hashHistory } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import ConfirmationButton from '../ConfirmationButton'
import PusherConnectionList from '../PusherConnectionList'
import URISchemesList from '../URISchemesList'
import VersionManager from '../VersionManager'
import * as uiActions from '../../services/ui/actions'
import * as pusherActions from '../../services/pusher/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
class Advanced extends React.Component{
constructor(props) {
super(props)
}
render(){
return (
<div>
<h4 className="underline">Pusher</h4>
<div className="field pusher-connections">
<div className="name">Connections</div>
<div className="input">
<span className="text">
<PusherConnectionList />
</span>
</div>
</div>
<h4 className="underline">Mopidy extensions</h4>
<URISchemesList />
<h4 className="underline">Core</h4>
<div className="field checkbox">
<div className="name">Customise behavior</div>
<div className="input">
<label>
<input
type="checkbox"
name="log_actions"
checked={ this.props.ui.clear_tracklist_on_play }
onChange={ e => this.props.uiActions.set({ clear_tracklist_on_play: !this.props.ui.clear_tracklist_on_play })} />
<span className="label">Clear tracklist on play of URI(s)</span>
</label>
</div>
</div>
<div className="field">
<div className="name">Version</div>
<div className="input">
<VersionManager />
</div>
</div>
<div className="field">
<div className="name">Reset</div>
<div className="input">
<ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
</div>
</div>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return {
ui: state.ui
}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
pusherActions: bindActionCreators(pusherActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Advanced)

196
src/js/components/Settings/Debug.js
View File

@ -1,196 +0,0 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, hashHistory } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import SpotifyAuthenticationFrame from '../SpotifyAuthenticationFrame'
import * as uiActions from '../../services/ui/actions'
import * as pusherActions from '../../services/pusher/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
class Debug extends React.Component{
constructor(props) {
super(props);
this.state = {
mopidy_call: 'playlists.asList',
mopidy_data: '{}',
pusher_data: '{"method":"get_config"}',
access_token: (this.props.access_token ? this.props.access_token : '')
}
}
callMopidy(e){
e.preventDefault()
this.props.mopidyActions.debug( this.state.mopidy_call, JSON.parse(this.state.mopidy_data) )
}
callPusher(e){
e.preventDefault()
this.props.pusherActions.debug( JSON.parse(this.state.pusher_data) )
}
render(){
return (
<div>
<h4 className="underline">User interface</h4>
<form>
<div className="field checkbox">
<div className="name">Debug</div>
<div className="input">
<label>
<input
type="checkbox"
name="debug_info"
checked={ this.props.debug_info }
onChange={ e => this.props.uiActions.set({ debug_info: !this.props.debug_info })} />
<span className="label">Show debug info panel</span>
</label>
</div>
</div>
<div className="field checkbox">
<div className="name">Logging</div>
<div className="input">
<label>
<input
type="checkbox"
name="log_actions"
checked={ this.props.log_actions }
onChange={ e => this.props.uiActions.set({ log_actions: !this.props.log_actions })} />
<span className="label">Log actions</span>
</label>
<label>
<input
type="checkbox"
name="log_mopidy"
checked={ this.props.log_mopidy }
onChange={ e => this.props.uiActions.set({ log_mopidy: !this.props.log_mopidy })} />
<span className="label">Log Mopidy</span>
</label>
<label>
<input
type="checkbox"
name="log_pusher"
checked={ this.props.log_pusher }
onChange={ e => this.props.uiActions.set({ log_pusher: !this.props.log_pusher })} />
<span className="label">Log Pusher</span>
</label>
</div>
</div>
<div className="field">
<div className="name"></div>
<div className="input">
<a className="button secondary" onClick={e => this.props.uiActions.createNotification('Test notification')}>Create notification</a>
<a className="button secondary" onClick={e => this.props.uiActions.startProcess('test_process', 'Test process')}>Start process</a>
<a className="button secondary" onClick={e => this.props.uiActions.stopProcess('test_process')}>Stop process</a>
</div>
</div>
</form>
<h4 className="underline">Mopidy</h4>
<form onSubmit={(e) => this.callMopidy(e)}>
<div className="field">
<div className="name">Call</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ mopidy_call: e.target.value })}
value={ this.state.mopidy_call } />
</div>
</div>
<div className="field">
<div className="name">Data</div>
<div className="input">
<textarea
onChange={ e => this.setState({ mopidy_data: e.target.value })}
value={ this.state.mopidy_data }>
</textarea>
</div>
</div>
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Send</button>
</div>
</div>
</form>
<h4 className="underline">Pusher</h4>
<form onSubmit={(e) => this.callPusher(e)}>
<div className="field">
<div className="name">Examples</div>
<div className="input">
<select onChange={ e => this.setState({ pusher_data: e.target.value })}>
<option value='{"method":"get_config"}'>Get config</option>
<option value='{"method":"get_version"}'>Get version</option>
<option value='{"method":"get_connections"}'>Get connections</option>
<option value='{"method":"get_radio"}'>Get radio</option>
<option value='{"method":"get_queue_metadata"}'>Get queue metadata</option>
<option value='{"method":"broadcast","data":{"type":"browser_notification","title":"Testing","body":"This is my message"}}'>Broadcast to all clients</option>
<option value='{"method":"deliver_message","data":{"to":"CONNECTION_ID_HERE","message":{"type":"browser_notification","title":"Testing","body":"This is my message"}}}'>Broadcast to one client</option>
<option value='{"method":"set_username","data":{"connection_id":"CONNECTION_ID_HERE","username":"NewUsername"}}'>Change username</option>
<option value='{"method":"refresh_spotify_token"}'>Refresh Spotify token</option>
<option value='{"method":"perform_upgrade"}'>Perform upgrade (beta)</option>
</select>
</div>
</div>
<div className="field">
<div className="name">Data</div>
<div className="input">
<textarea
onChange={ e => this.setState({ pusher_data: e.target.value })}
value={ this.state.pusher_data }>
</textarea>
</div>
</div>
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Send</button>
</div>
</div>
</form>
<h4 className="underline">Response</h4>
<pre>
{ this.props.debug_response ? JSON.stringify(this.props.debug_response, null, 2) : null }
</pre>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return {
connection_id: state.pusher.connection_id,
access_token: (state.spotify.access_token ? state.spotify.access_token : ''),
log_actions: (state.ui.log_actions ? state.ui.log_actions : false),
log_pusher: (state.ui.log_pusher ? state.ui.log_pusher : false),
log_mopidy: (state.ui.log_mopidy ? state.ui.log_mopidy : false),
debug_info: (state.ui.debug_info ? state.ui.debug_info : false),
debug_response: state.ui.debug_response
}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
pusherActions: bindActionCreators(pusherActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Debug)

289
src/js/components/Settings/System.js
View File

@ -1,289 +0,0 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, hashHistory } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import SpotifyAuthenticationFrame from '../SpotifyAuthenticationFrame'
import Thumbnail from '../Thumbnail'
import * as coreActions from '../../services/core/actions'
import * as uiActions from '../../services/ui/actions'
import * as pusherActions from '../../services/pusher/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
class System extends React.Component{
constructor(props) {
super(props);
this.state = {
country: this.props.core.country,
locale: this.props.core.locale,
mopidy_host: this.props.mopidy.host,
mopidy_port: this.props.mopidy.port,
pusher_username: this.props.pusher.username,
input_in_focus: null
}
}
componentWillReceiveProps(newProps){
var changed = false
var state = this.state
if (newProps.pusher.username != this.state.pusher_username && this.state.input_in_focus != 'pusher_username'){
state.pusher_username = newProps.pusher.username
changed = true
}
if (changed){
this.setState(state)
}
}
resetAllSettings(){
localStorage.clear();
window.location = '#'
window.location.reload(true)
return false;
}
setMopidyConfig(e){
this.setState({input_in_focus: null})
e.preventDefault();
this.props.mopidyActions.setConfig({ host: this.state.mopidy_host, port: this.state.mopidy_port });
window.location.reload(true);
return false;
}
handleBlur(name, value){
this.setState({input_in_focus: null})
var data = {}
data[name] = value
this.props.coreActions.set(data)
}
handleUsernameChange(username){
this.setState({pusher_username: username.replace(/\W/g, '')})
}
handleUsernameBlur(e){
this.setState({input_in_focus: null})
this.props.pusherActions.setUsername(this.state.pusher_username)
}
renderApplyButton(){
if (this.props.mopidy.host == this.state.mopidy_host && this.props.mopidy.port == this.state.mopidy_port) return null
return (
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Apply and reload</button>
</div>
</div>
)
}
renderStatus(server){
if (this.props[server].connecting){
return <FontAwesome name="plug" className="grey-text pulse" />
} else if (this.props[server].connected){
return <FontAwesome name="check" className="green-text" />
} else {
return <FontAwesome name="exclamation-triangle" className="red-text" />
}
}
renderSpotifyUser(){
var user = null
if (this.props.spotify.me && this.props.spotify.authorization){
user = this.props.spotify.me
} else if (this.props.spotify.backend_username){
if (this.props.core.users && this.props.core.users['spotify:user:'+this.props.spotify.backend_username] !== undefined){
user = this.props.core.users['spotify:user:'+this.props.spotify.backend_username]
}
}
if (user){
return (
<Link className="user" to={global.baseURL+'user/'+user.uri}>
<Thumbnail circle={true} size="small" images={user.images} />
<span className="user-name">
{user.display_name ? user.display_name : user.id}
</span>
</Link>
)
} else if (this.props.spotify.backend_username){
return (
<Link className="user" to={global.baseURL+'user/spotify:user:'+this.props.spotify.backend_username}>
<Thumbnail circle={true} size="small" />
<span className="user-name">
{this.props.spotify.backend_username}
</span>
</Link>
)
} else {
return (
<Link className="user">
<Thumbnail circle={true} size="small" />
<span className="user-name">
Unknown
</span>
</Link>
)
}
}
renderSendAuthorizationButton(){
if (!this.props.spotify.authorization) return null
return (
<button onClick={e => this.props.uiActions.openModal('send_authorization', {}) }>
Share authentication
</button>
)
}
render(){
return (
<div>
<h4 className="underline">Servers</h4>
<div className="field readonly">
<div className="name">Status</div>
<div className="input">
<div className="text">
{this.renderStatus('mopidy')}&nbsp; Mopidy &nbsp;&nbsp;
{this.renderStatus('pusher')}&nbsp; Pusher
</div>
</div>
</div>
<div className="field">
<div className="name">Username</div>
<div className="input">
<input
type="text"
onChange={e => this.handleUsernameChange(e.target.value)}
onFocus={e => this.setState({input_in_focus: 'pusher_username'})}
onBlur={e => this.handleUsernameBlur(e)}
value={this.state.pusher_username } />
</div>
</div>
<form onSubmit={(e) => this.setMopidyConfig(e)}>
<div className="field">
<div className="name">Host</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({mopidy_host: e.target.value})}
onFocus={e => this.setState({input_in_focus: 'mopidy_host'})}
onBlur={e => this.setState({input_in_focus: null})}
value={ this.state.mopidy_host } />
</div>
</div>
<div className="field">
<div className="name">Port</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({mopidy_port: e.target.value})}
onFocus={e => this.setState({input_in_focus: 'mopidy_port'})}
onBlur={e => this.setState({input_in_focus: null})}
value={ this.state.mopidy_port } />
</div>
</div>
{this.renderApplyButton()}
</form>
<h4 className="underline">Localization</h4>
<div className="field">
<div className="name">Country</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({country: e.target.value})}
onFocus={e => this.setState({input_in_focus: 'country'})}
onBlur={e => this.handleBlur('country',e.target.value)}
value={ this.state.country } />
</div>
</div>
<div className="field">
<div className="name">Locale</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({locale: e.target.value})}
onFocus={e => this.setState({input_in_focus: 'locale'})}
onBlur={e => this.handleBlur('locale',e.target.value)}
value={this.state.locale} />
</div>
</div>
<h4 className="underline">Spotify</h4>
<div className="field readonly">
<div className="name">Status</div>
<div className="input">
<div className="text">
{!this.props.mopidy.uri_schemes || !this.props.mopidy.uri_schemes.includes('spotify:') ? <div className="red-text"><FontAwesome name="exclamation-triangle" />&nbsp; Mopidy-Spotify not available</div> : null}
{this.props.spotify.authorization ? <span><span className="green-text"><FontAwesome name="check" /> Authorized</span>&nbsp; All Spotify functionality available</span> : <span><span className="orange-text"><FontAwesome name="lock" /> Limited access</span>&nbsp; Authorize Iris for full functionality</span>}
</div>
</div>
</div>
<div className="field">
<div className="name">Authorization</div>
<div className="input">
<SpotifyAuthenticationFrame />
{ this.renderSendAuthorizationButton() }
</div>
</div>
<div className="field current-user">
<div className="name">Current user</div>
<div className="input">
<div className="text">
{ this.renderSpotifyUser() }
</div>
</div>
</div>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return {
core: state.core,
ui: state.ui,
mopidy: state.mopidy,
pusher: state.pusher,
spotify: state.spotify
}
}
const mapDispatchToProps = (dispatch) => {
return {
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch),
pusherActions: bindActionCreators(pusherActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(System)

8
src/js/components/Sidebar.js
View File

@ -68,14 +68,14 @@ class Sidebar extends React.Component{
<Icon name="playlist" />
Playlists
</Link>
{this.props.spotify_enabled && this.props.spotify_authorized ? <Link className={this.linkClassName('library/artists')} to={global.baseURL+"library/artists"}>
<Link className={this.linkClassName('library/artists')} to={global.baseURL+"library/artists"}>
<Icon name="mic" />
Artists
</Link> : null}
{this.props.spotify_enabled && this.props.spotify_authorized ? <Link className={this.linkClassName('library/albums')} to={global.baseURL+"library/albums"}>
</Link>
<Link className={this.linkClassName('library/albums')} to={global.baseURL+"library/albums"}>
<Icon name="cd" />
Albums
</Link> : null}
</Link>
<Link className={this.linkClassName('library/browse')} to={global.baseURL+"library/browse"}>
<Icon name="folder" />
Browse

2
src/js/views/Debug.js
View File

@ -117,7 +117,7 @@ class Debug extends React.Component{
<div className="input">
<input
type="text"
onBlur={e => this.props.spotifyActions.authorizationGranted({access_token: e.target.value})}
onChange={e => this.props.spotifyActions.authorizationGranted({access_token: e.target.value})}
value={this.state.access_token} />
</div>
</div>

2
src/js/views/Settings.js
View File

@ -212,7 +212,7 @@ class Settings extends React.Component {
return (
<div className="view settings-view">
<Header className="overlay" icon="cog" title="Settings" options={options} />
<Header className="overlay" icon="cog" title="Settings" options={options} uiActions={this.props.uiActions} />
<div className="intro">
<div className="liner">

7
src/scss/global/_core.scss
View File

@ -264,12 +264,17 @@ button.placeholder {
.pulse { @include pulse(); }
.one-liner { @include one_line_text; }
.centred-text { text-align: center; }
.grey-text { color: $mid_grey !important; }
.red-text { color: $red !important; }
.green-text { color: $green !important; }
.orange-text { color: $orange !important; }
.dark-text { color: $dark_grey !important; }
.centred-text { text-align: center; }
.grey-border { border-color: $mid_grey !important; }
.red-border { border-color: $red !important; }
.green-border { border-color: $green !important; }
.orange-border { border-color: $orange !important; }
.dark-border { border-color: $dark_grey !important; }
footer {
display: block;

4
src/scss/views/_settings.scss
View File

@ -53,8 +53,8 @@
top: 2px;
left: 0;
width: 34px;
height: 26px;
padding-top: 8px;
height: 25px;
padding-top: 9px;
border: 2px solid $grey;
text-align: center;
border-radius: 50%;