更新
请参阅此处的工作示例: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>
}
});
最佳答案
首先，好主意。
由于您使用的是哈希值，回调将只是一个片段，而不是一个完整的页面。回调代码不应该有 <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 不喜欢返回回调 URL 中的片段，可能这就是代码无法工作的原因。不过，您可以让您的快速服务器在回调路线上为水疗中心提供服务。该技术详细记录在react-router createBrowserHistory 文档中。因此，回调 URL 将为您的 Spa 页面提供服务，并且登录将完成。
关于javascript - React/Redux + Soundcloud API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34474249/