更新
在这里查看工作示例：Favesound-Redux
教程：http：//www.robinwieruch.de/the-soundcloud-client-in-react-redux
问题
最近，我发现了Sound Redux并从中得到启发，它展示了如何在React + Redux应用程序中使用Soundcloud API。Soundcloud API要求您设置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页面提供服务，并且登录将完成。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句