API React/Redux + Soundcloud

UPDATE

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

Учебное пособие: http://www.robinwieruch.de/the-soundcloud-client-in-react-redux

Вопрос

Недавно я обнаружил и получил вдохновение от Sound Redux, в котором показано, как использовать API Soundcloud в приложении React + Redux. API Soundcloud требует, чтобы вы установили страницу callback.html. Приложение Sound Redux решает это, обслуживая callback.html с сервера Go Lang. Я не хочу использовать для этого какие-либо серверные технологии. Вот почему я задавался вопросом, можно ли обслуживать callback.html в качестве реагирующего компонента. Моя настройка уже отображает модем аутентификации для Soundcloud, но после ввода моих учетных данных ничего не происходит, и модальная форма пуста.

В моем корневом компоненте я настраиваю маршрут для компонента Callback и моего компонента приложения.

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, это то же самое, что и моя Redirect 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>
  }
});

Ответ 1

Во-первых, аккуратная идея.

Поскольку вы используете хеши, обратный вызов будет только фрагментом, а не полной страницей. Код обратного вызова не должен содержать <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>
    );
  }
});

ОБНОВЛЕНИЯ

ОК, поэтому oAuth2 не любит фрагменты в обратных обратных URL-адресах, возможно, поэтому код не работает. Однако вы можете использовать ваш экспресс-сервер в спа-центре обратно на маршруте обратного вызова. Этот метод подробно описан в документах action-router createBrowserHistory. Таким образом, URL-адрес обратного вызова будет обслуживать вашу спа-страницу, и логин будет завершен.

Ответ 2

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