javascript - snippets - React/Redux+Soundcloud API
css tricks cssgrid (2)
ACTUALIZAR
Vea el ejemplo de trabajo aquí: Favesound-Redux
En vivo: http://www.favesound.de/
Tutorial: http://www.robinwieruch.de/the-soundcloud-client-in-react-redux
Pregunta
Recientemente descubrí y me inspiré en Sound Redux, que muestra cómo utilizar la API de Soundcloud en una aplicación React + Redux. La API de Soundcloud requiere que configures una página callback.html . La aplicación Sound Redux resuelve esto sirviendo el callback.html desde un servidor Go Lang. No quiero usar ninguna tecnología del lado del servidor para esto. Por eso me preguntaba si es posible servir el callback.html como un componente de reacción. Mi configuración ya muestra el modo de autenticación de Soundcloud, pero después de ingresar mis credenciales no pasa nada y el modo se queda en blanco.
En mi componente raíz, configuro la ruta para el componente de devolución de llamada y el componente de mi aplicación.
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'')
);
Cuando disparo la acción de solicitud de autenticación desde dentro de mi SoundContainer, el creador de la acción tiene el siguiente aspecto:
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));
})
});
}
}
Como dije, después de ingresar mis credenciales en el modal, el modal se queda en blanco y no pasa nada.
Cuando imprimo ${window.location.protocol}//${window.location.host}/#/callback es lo mismo que mi Redirect Uri en mi cuenta de Soundcloud: http://localhost:8080/#/callback
Mi componente de devolución de llamada tiene este aspecto:
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 primer lugar, buena idea.
Como está utilizando hashes, la devolución de llamada solo sería un fragmento, no una página completa. El código de devolución de llamada no debe <html> . ¿Podría intentar esto en su lugar?
export default React.createClass({
componentDidMount:function(){
window.setTimeout(opener.SC.connectCallback, 1);
},
render: function() {
return (
<div>
<p>
This page should close soon
</p>
</div>
);
}
});
Actualizaciones
De acuerdo, a oAuth2 no le gustan los fragmentos en las URL de devolución de llamada, probablemente es por eso que el código no funciona. Sin embargo, puede hacer que su servidor Express devuelva el spa a la ruta de devolución de llamada. Esta técnica se documenta en detalle en los documentos de creación-enrutador createBrowserHistory. Así que la URL de devolución de llamada servirá a su página de spa y se completará el inicio de sesión.
Sí, inicialmente intenté hacer lo mismo. Estoy bastante seguro de que tiene que ver con el hash. Tal vez tenga que ver con que la página de origen y devolución de llamada sea esencialmente la misma url (si ignora los hashes). Después de arrancarme el cabello durante una buena hora o así, tratando de que funcionara, simplemente me di por vencido y serví / callback en el servidor :)