admin管理员组文章数量:1332383
UPDATE
See the working example here: Favesound-Redux
Live: /
Tutorial:
Question
Recently I discovered and got inspired by Sound Redux which shows how to use the Soundcloud API within a React + Redux app. The Soundcloud API requires you to setup a callback.html page. The Sound Redux app solves this by serving the callback.html from a Go Lang Server. I don't want to use any server side technology for this. Thats why I was wondering if it is possible to serve the callback.html as a react ponent. My setup already pops up the authentication modal for Soundcloud, but after entering my credentials nothing happens and the modal gets blank.
In my root ponent I setup the route for the Callback ponent and my app ponent.
const routes = <Route ponent={App}>
<Route path="/callback" ponent={Callback} />
<Route path="/app" ponent={SoundContainer} />
</Route>;
ReactDOM.render(
<Provider store={store}>
<Router>{routes}</Router>
</Provider>,
document.getElementById('app')
);
When I fire the authentication request action from within my SoundContainer, the action creator looks like the following:
export function auth() {
return dispatch => {
SC.initialize({
client_id: MY_CLIENT_ID,
redirect_uri:`${window.location.protocol}//${window.location.host}/#/callback`
});
SC.connect(function (response) {
console.log('connect'); // This does not appear in the console
SC.get('/me', function(data) {
console.log(data);
dispatch(doAuth(data));
})
});
}
}
Like I said, after entering my credentials in the modal the modal gets blank and nothing happens.
When I output ${window.location.protocol}//${window.location.host}/#/callback it is the same as my Redirect Uri in my Soundcloud Account: http://localhost:8080/#/callback
My Callback ponent looks like this:
export default React.createClass({
render: function() {
return <html>
<head>
<title>Callback</title>
</head>
<body onload="window.setTimeout(opener.SC.connectCallback, 1);">
<p>
This page should close soon
</p>
</body>
</html>
}
});
UPDATE
See the working example here: Favesound-Redux
Live: http://www.favesound.de/
Tutorial: http://www.robinwieruch.de/the-soundcloud-client-in-react-redux
Question
Recently I discovered and got inspired by Sound Redux which shows how to use the Soundcloud API within a React + Redux app. The Soundcloud API requires you to setup a callback.html page. The Sound Redux app solves this by serving the callback.html from a Go Lang Server. I don't want to use any server side technology for this. Thats why I was wondering if it is possible to serve the callback.html as a react ponent. My setup already pops up the authentication modal for Soundcloud, but after entering my credentials nothing happens and the modal gets blank.
In my root ponent I setup the route for the Callback ponent and my app ponent.
const routes = <Route ponent={App}>
<Route path="/callback" ponent={Callback} />
<Route path="/app" ponent={SoundContainer} />
</Route>;
ReactDOM.render(
<Provider store={store}>
<Router>{routes}</Router>
</Provider>,
document.getElementById('app')
);
When I fire the authentication request action from within my SoundContainer, the action creator looks like the following:
export function auth() {
return dispatch => {
SC.initialize({
client_id: MY_CLIENT_ID,
redirect_uri:`${window.location.protocol}//${window.location.host}/#/callback`
});
SC.connect(function (response) {
console.log('connect'); // This does not appear in the console
SC.get('/me', function(data) {
console.log(data);
dispatch(doAuth(data));
})
});
}
}
Like I said, after entering my credentials in the modal the modal gets blank and nothing happens.
When I output ${window.location.protocol}//${window.location.host}/#/callback it is the same as my Redirect Uri in my Soundcloud Account: http://localhost:8080/#/callback
My Callback ponent looks like this:
export default React.createClass({
render: function() {
return <html>
<head>
<title>Callback</title>
</head>
<body onload="window.setTimeout(opener.SC.connectCallback, 1);">
<p>
This page should close soon
</p>
</body>
</html>
}
});
2 Answers
Reset to default 5 +25Firstly, neat idea.
As your are using hashes, the callback would only be a fragment, not a plete page. The callback code shouldn't have <html> in it. Could you try this instead?
export default React.createClass({
ponentDidMount:function(){
window.setTimeout(opener.SC.connectCallback, 1);
},
render: function() {
return (
<div>
<p>
This page should close soon
</p>
</div>
);
}
});
UPDATES
OK, so oAuth2 doesn't like fragments in return callback urls, probably that's why the code isn't working. However you can have your express server serve the spa back on the callback route. This technique is documented in detail in react-router createBrowserHistory docs. So the callback URL will serve your spa page and the login will plete.
Yeah, I initially tried to do the same thing. I'm fairly certain that it has to do with the hash. Perhaps it has to do with the source and callback page being essentially the same url (if you ignore hashes). After tearing my hair out for a good hour or so, trying to get it to work, i just gave up and served /callback on the server side :)
本文标签： javascriptReactReduxSoundcloud APIStack Overflow
版权声明：本文标题：javascript - ReactRedux + Soundcloud API - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742294095a2448372.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论