反应，和/终极版+ API的SoundCloud

看到这里的工作示例：Favesound-Redux

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

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

问题

最近我发现并得到了Sound Redux的启发，它展示了如何在React + Redux应用程序中使用Soundcloud API。 Soundcloud API要求您登录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这是一样的我的重定向URI在我的SoundCloud帐户：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> 
    } 
});

来源

2015-12-26 Robin Wieruch

首先，不错的主意。

由于你正在使用哈希，回调只会是一个片段，而不是一个完整的页面。回调代码中不应该有<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> 
    ); 
    } 
});

最新通报

OK，所以OAuth2用户不喜欢返回回调网址片段，也许这就是为什么代码不能正常工作。但是，您可以让您的快递服务器在回拨路线上返回spa。此技术在react-router createBrowserHistory文档中有详细记录。因此，回调URL将用于您的Spa页面，并且登录将完成。

来源

2015-12-29 12:58:53 hazardous

不幸的是，它仍然无法正常工作。我可以登录模式，但它变得空白，没有请求发送:( –

你可以把它放在某个地方？此时，如果不进行一些调试就很难猜出...... – hazardous

是的，我最初试图做同样的事情。我相当肯定它与散列有关。也许它与源和回调页面本质上是相同的URL（如果你忽略散列）。在我的头发扯了好一个小时左右，试图让它工作，我只是放弃了服务器端/回调服务器端:)

来源

2016-01-07 14:57:43

嗯，你是否尝试过使用非哈希历史记录？这应该可以通过react-router来实现，并且不需要散列工作。 – hazardous

反应，和/终极版+ API的SoundCloud

回答

相关问题