React/Redux + Soundcloud API

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 = 
  
  
;

ReactDOM.render(
  
     {routes}
  ,
  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帐户中的Redirect Uri相同:http://localhost:8080/#/callback

我的Callback组件如下所示:

export default React.createClass({
  render: function() {
    return 
      
        
      
      
        

          This page should close soon
        
      
    
  }
});

hazardous.. 5

首先,整洁的想法.

当你使用哈希时,回调只是一个片段,而不是一个完整的页面.回调代码不应该包含在其中.你能尝试一下吗？

export default React.createClass({
  componentDidMount:function(){
    window.setTimeout(opener.SC.connectCallback, 1);
  },
  render: function() {
    return (
      

          

            This page should close soon
          
      
    );
  }
});

更新

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

首先,整洁的想法.

当你使用哈希时,回调只是一个片段,而不是一个完整的页面.回调代码不应该包含在其中.你能尝试一下吗？

export default React.createClass({
  componentDidMount:function(){
    window.setTimeout(opener.SC.connectCallback, 1);
  },
  render: function() {
    return (
      

          

            This page should close soon
          
      
    );
  }
});

更新

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