React/Redux + Soundcloud API
更新
请参阅此处的工作示例：Favesound-Redux
教程：http://www.robinwieruch.de/the-soundcloud-client-in-react-redux
问题
最近，我发现并受到了Sound Redux的启发，它展示了如何在React + Redux应用程序中使用Soundcloud API。Soundcloud API需要您转到setup a callback.html页面。Sound Redux应用程序通过从Go Lang服务器为callback.html提供服务来解决这一问题。我不想为此使用任何服务器端技术。这就是为什么我想知道是否有可能将callback.html作为一个react组件。我的设置已经弹出了Soundcloud的身份验证模式，但在输入我的凭据后，什么也没有发生，模式变为空白。
在我的根组件中，我设置了回调组件和应用程序组件的路由。
const routes = <Route component={App}>
<Route path="/callback" component={Callback} />
<Route path="/app" component={SoundContainer} />
</Route>;
ReactDOM.render(
<Provider store={store}>
<Router>{routes}</Router>
</Provider>,
document.getElementById('app')
);当我从SoundContainer中启动身份验证请求操作时，操作创建器如下所示：
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));
})
});
}
}正如我所说的，在模式中输入我的凭据后，模式变为空白，并且没有任何反应。
当我输出${window.location.protocol}//${window.location.host}/#/callback时，它与我的Soundcloud帐户中的重定向Uri相同：http://localhost:8080/#/callback
我的回调组件如下所示：
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
Stack Overflow用户
发布于 2015-12-29 20:58:53
首先，巧妙的想法。
由于您使用的是散列，因此回调将只是一个片段，而不是一个完整的页面。回调代码中不应该包含<html>。你可以试试这个吗？
export default React.createClass({
componentDidMount:function(){
window.setTimeout(opener.SC.connectCallback, 1);
},
render: function() {
return (
<div>
<p>
This page should close soon
</p>
</div>
);
}
});更新
好的，所以oAuth2不喜欢返回回调urls中的片段，这可能就是代码不能工作的原因。但是，您可以让express服务器在回调路由上为spa提供回调服务。该技术在react-router createBrowserHistory文档中有详细记录。因此，回调URL将为您的spa页面提供服务，登录将完成。
Stack Overflow用户
发布于 2016-01-07 22:57:44
是的，我最初也想做同样的事情。我相当确定这与散列有关。也许这与源页面和回调页面本质上是相同的url有关(如果忽略散列的话)。在努力了一个小时左右，试图让它正常工作后，我放弃了，在服务器端服务于/callback :)
https://stackoverflow.com/questions/34474249
复制相似问题
腾讯云开发者
