React / Redux + Soundcloud API

обновление

см. рабочий пример здесь:Favesound-Redux

Live:http://www.favesound.de/

учебник:http://www.robinwieruch.de/the-soundcloud-client-in-react-redux

вопрос

недавно я обнаружил и вдохновился Звук Redux который показывает, как использовать Soundcloud API в реакцию + приложение "возвращение". API Soundcloud требует от вас настройка обратного вызова.HTML-код страница. Приложение Sound Redux решает эту проблему, обслуживая обратный вызов.html с сервера Go Lang. Я не хочу использовать для этого какую-либо серверную технологию. Вот почему мне было интересно, можно ли обслуживать обратный вызов.html как компонент react. Моя настройка уже всплывает модальный режим аутентификации для 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>
  }
});
18
javascript reactjs redux soundcloud webpack

2 ответов

во-первых, отличная идея.

поскольку вы используете хэши, обратный вызов будет только фрагментом, а не полной страницей. Код обратного вызова не должен иметь <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 не любит фрагменты в обратных URL-адресах обратного вызова, вероятно, поэтому код не работает. Однако вы можете иметь ваш экспресс-сервер служить спа обратно на обратном пути. Эта техника описана подробно в документах react-router createBrowserHistory. Таким образом, URL обратного вызова будет обслуживать вашу страницу spa, и логин будет завершен.

5

Да, я изначально пытался сделать то же самое. Я совершенно уверен, что это связано с гашишем. Возможно, это связано с тем, что исходная страница и страница обратного вызова по существу одинаковы (если вы игнорируете хэши). После разрыва моих волос в течение хорошего часа или около того, пытаясь заставить его работать, я просто сдался и служил /обратный вызов на стороне сервера:)

1