Javascript React/Redux+；SoundCloudAPI_Javascript_Reactjs_Soundcloud_Webpack_Redux

Javascript React/Redux+；SoundCloudAPI

javascript reactjs webpack redux

Javascript React/Redux+；SoundCloudAPI,javascript,reactjs,soundcloud,webpack,redux,Javascript,Reactjs,Soundcloud,Webpack,Redux,更新请参见此处的工作示例：现场：教程：问题最近，我发现了一个演示如何在React+Redux应用程序中使用Soundcloud API的应用程序，并从中获得了灵感。Soundcloud API要求您创建一个页面。Sound Redux应用程序通过从Go Lang服务器提供callback.html来解决这个问题。我不想为此使用任何服务器端技术。这就是为什么我想知道是否有可能将callback.html作为react组件提供。我的安装程序已经弹出了Soundcloud的身份验证模式，但是

更新

请参见此处的工作示例：

现场：

教程：

问题

最近，我发现了一个演示如何在React+Redux应用程序中使用Soundcloud API的应用程序，并从中获得了灵感。Soundcloud API要求您创建一个页面。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')
);

就像我说的，在模式中输入我的凭证后，模式变为空白，什么也没有发生

当我输出

${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>
  }
});

export default React.createClass({
render:function（）{
返回
回拨

这个页面很快就会关闭

}
});

首先，好主意

由于您正在使用哈希，回调将只是一个片段，而不是一个完整的页面。回调代码中不应包含

。你能试试这个吗

export default React.createClass({
  componentDidMount:function(){
    window.setTimeout(opener.SC.connectCallback, 1);
  },
  render: function() {
    return (
      <div>
          <p>
            This page should close soon
          </p>
      </div>
    );
  }
});

export default React.createClass({
componentDidMount:function（）{
setTimeout（opener.SC.connectCallback，1）；
},
render:function（）{
返回(

这个页面很快就会关闭

);
}
});

更新

好的，oAuth2不喜欢返回回调URL中的片段，这可能就是代码不起作用的原因。但是，您可以让您的express server在回叫路线上为spa服务。react router createBrowserHistory文档中详细记录了该技术。因此，回调URL将服务于您的spa页面，登录将完成。

是的，我最初尝试过做同样的事情。我相当肯定这与哈希有关。也许这与源页面和回调页面本质上是相同的url有关（如果忽略哈希）。在花了一个小时左右的时间，试图让它正常工作后，我放弃了，在服务器端服务/回调：）

不幸的是，它仍然不能工作。我可以在模式中登录，但它变为空白，没有发送请求：（你能把它放在某个地方吗？在这一点上，如果不进行一些调试，很难猜测…嗯，你尝试过非哈希历史记录吗？这在react router中应该是可行的，不需要哈希就可以工作。

export default React.createClass({
  componentDidMount:function(){
    window.setTimeout(opener.SC.connectCallback, 1);
  },
  render: function() {
    return (
      <div>
          <p>
            This page should close soon
          </p>
      </div>
    );
  }
});