Reagieren/Redux + Soundcloud API

UPDATEReagieren/Redux + Soundcloud API

das Arbeits Beispiel Siehe hier: Favesound-Redux

Tutorial: http://www.robinwieruch.de/the-soundcloud-client-in-react-redux

Frage

Kürzlich entdeckte und inspirierte ich mich von Sound Redux, die zeigt, wie die Soundcloud API in einer React + Redux App zu verwenden. Die Soundcloud API benötigt setup a callback.html Seite. Die Sound Redux App löst dies, indem sie die callback.html von einem Go Lang Server aus bedient. Ich möchte keine serverseitige Technologie dafür verwenden. Deshalb habe ich mich gefragt, ob es möglich ist, die Callback.html als eine Reaktionskomponente zu bedienen. Mein Setup öffnet bereits das Authentifizierungsmodal für Soundcloud, aber nach Eingabe meiner Zugangsdaten passiert nichts und das Modal wird leer.

In meiner Root-Komponente habe ich die Route für die Callback-Komponente und meine App-Komponente eingerichtet.

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') 
);

Wenn ich die Authentifizierungsanforderung Aktion aus meinem SoundContainer Feuer, sieht die Aktion Schöpfer wie folgt aus:

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)); 
     }) 
    }); 
    } 
}

Wie ich schon sagte, nachdem mein Beglaubigungsschreiben im Modal Eingabe der Modal wird leer und nichts passiert.

Wenn ich Ausgang ${window.location.protocol}//${window.location.host}/#/callback es ist die gleiche wie meine Redirect Uri in meinem Soundcloud-Konto:

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> 
    } 
});

Quelle

2015-12-26 Robin Wieruch

Erstens nette Idee: http://localhost:8080/#/callback

wie diese Eigene Rückruf Komponente aussieht.

Da Sie Hashes verwenden, wäre der Callback nur ein Fragment, keine vollständige Seite. Der Rückrufcode sollte darin nicht enthalten. Könnten Sie das stattdessen versuchen?

export default React.createClass({ 
    componentDidMount:function(){ 
    window.setTimeout(opener.SC.connectCallback, 1); 
    }, 
    render: function() { 
    return (
     <div> 
      <p> 
      This page should close soon 
      </p> 
     </div> 
    ); 
    } 
});

UPDATES

OK, so OAuth2 nicht Fragmente im Gegenzug Callback-URLs wie, das ist wahrscheinlich, warum der Code nicht funktioniert. Sie können jedoch Ihren Express-Server den Spa auf der Rückrufroute zurückgeben lassen. Diese Technik ist detailliert in react-router createBrowserHistory-Dokumenten dokumentiert. Die Callback-URL liefert also Ihre Spa-Seite und die Anmeldung wird abgeschlossen.

Quelle

2015-12-29 12:58:53 hazardous

Leider funktioniert es immer noch nicht. Ich kann mich im Modal anmelden, aber dann wird es leer und keine Anfrage wird gesendet :( –

Könnten Sie das irgendwo aufstellen?An dieser Stelle ist es schwer zu erraten, ohne etwas zu debuggen ... – hazardous

Ja, ich habe zunächst versucht, das Gleiche zu tun. Ich bin ziemlich sicher, dass es mit dem Hash zu tun hat. Vielleicht hat es damit zu tun, dass die Quell- und Callback-Seite im Wesentlichen dieselbe URL ist (wenn Sie Hashes ignorieren). Nachdem ich mir eine gute Stunde die Haare ausgerissen hatte, versuchte ich es zur Arbeit zu bringen, ich gab einfach auf und servierte/Callback auf der Serverseite :)

Quelle

2016-01-07 14:57:43

Hmm, hast du es mit der Nicht-Hash-Geschichte versucht? Das sollte mit react-router machbar sein und benötigt keinen Hash um zu funktionieren. – hazardous

Reagieren/Redux + Soundcloud API

Antwort

Verwandte Themen