首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React/Redux + Soundcloud API

React/Redux + Soundcloud API
EN

Stack Overflow用户
提问于 2015-12-27 02:55:20
回答 2查看 1.3K关注 0票数 18

更新

请参阅此处的工作示例: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作为一个react组件。我的设置已经弹出了Soundcloud的身份验证模式,但在输入我的凭据后,什么也没有发生,模式变为空白。

在我的根组件中,我设置了回调组件和应用程序组件的路由。

代码语言:javascript
复制
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中启动身份验证请求操作时,操作创建器如下所示:

代码语言:javascript
复制
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

我的回调组件如下所示:

代码语言:javascript
复制
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>
  }
});
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-12-29 20:58:53

首先,巧妙的想法。

由于您使用的是散列,因此回调将只是一个片段,而不是一个完整的页面。回调代码中不应该包含<html>。你可以试试这个吗?

代码语言:javascript
复制
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不喜欢返回回调urls中的片段,这可能就是代码不能工作的原因。但是,您可以让express服务器在回调路由上为spa提供回调服务。该技术在react-router createBrowserHistory文档中有详细记录。因此,回调URL将为您的spa页面提供服务,登录将完成。

票数 5
EN

Stack Overflow用户

发布于 2016-01-07 22:57:44

是的,我最初也想做同样的事情。我相当确定这与散列有关。也许这与源页面和回调页面本质上是相同的url有关(如果忽略散列的话)。在努力了一个小时左右,试图让它正常工作后,我放弃了,在服务器端服务于/callback :)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34474249

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档