React/Redux + Soundcloud API

Question

更新

在此处查看工作示例：Favesound-Redux

直播：http://www.favesound.de/

教程：http://www.robinwieruch.de/the-soundcloud-client-in-react-redux

问题

最近我发现 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 页面并受到启发。 Sound Redux 应用程序通过从 Go Lang 服务器提供 callback.html 来解决这个问题。我不想为此使用任何服务器端技术。这就是为什么我想知道是否可以将 callback.html 作为反应组件提供服务。我的设置已经弹出 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>
  }
});

Answer 1

首先，想法很巧妙。

由于您使用的是哈希，因此回调只是一个片段，而不是一个完整的页面。回调代码中不应包含 <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 不喜欢 return 回调 url 中的片段，可能这就是代码无法正常工作的原因。但是，您可以让您的快速服务器在回调路由上返回 spa。 react-router createBrowserHistory 文档中详细记录了此技术。因此回调 URL 将为您的水疗页面提供服务并且登录将完成。

Answer 2

是的，我最初尝试做同样的事情。我相当确定它与哈希有关。也许这与源页面和回调页面本质上相同 url（如果您忽略哈希值）有关。在扯了一个小时左右的头发后，试图让它工作，我只是放弃并在服务器端提供 /callback :)

React/Redux + Soundcloud API

React/Redux + Soundcloud API

javascript

soundcloud

reactjs

webpack

redux