React/Redux + Soundcloud API

Question

React/Redux + Soundcloud API

Rob*_*uch 18 javascript soundcloud reactjs webpack redux

UPDATE

请参阅此处的工作示例:Favesound-Redux

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

教程: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作为反应组件提供服务.我的设置已经弹出了Soundcloud的身份验证模式,但在输入我的凭据后没有任何反应,模态变为空白.

在我的根组件中,我为Callback组件和我的app组件设置了路由.

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')
);

Run Code Online (Sandbox Code Playgroud)

当我从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));
      })
    });
  }
}

Run Code Online (Sandbox Code Playgroud)

就像我说的,在模态中输入我的凭证后,模态变为空白,没有任何反应.

当我输出时,${window.location.protocol}//${window.location.host}/#/callback它与我的Soundcloud帐户中的Redirect Uri相同:http://localhost:8080/#/callback

我的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>
  }
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

haz*_*ous 5

首先,整洁的想法.

当你使用哈希时,回调只是一个片段,而不是一个完整的页面.回调代码不应该包含<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>
    );
  }
});

Run Code Online (Sandbox Code Playgroud)

更新

好的,所以oAuth2不喜欢返回回调网址中的片段,这可能就是代码无效的原因.但是,您可以让快速服务器在回调路由上为spa提供服务.在react-router createBrowserHistory docs中详细记录了这种技术.因此,回调URL将为您的spa页面提供服务,登录将完成.

归档时间：	9 年，10 月前
查看次数：	948 次
最近记录：	9 年，3 月前