2015-12-26 40 views
18

CẬP NHẬTPhản ứng/Redux + Soundcloud API

Xem ví dụ làm việc ở đây: Favesound-Redux

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

Hướng dẫn: http://www.robinwieruch.de/the-soundcloud-client-in-react-redux

Câu hỏi

Gần đây tôi đã khám phá và lấy cảm hứng từ Sound Redux cho thấy cách sử dụng API Soundcloud trong ứng dụng React + Redux. API Soundcloud yêu cầu bạn đến trang setup a callback.html. Ứng dụng Sound Redux giải quyết vấn đề này bằng cách phục vụ callback.html từ Máy chủ Go Lang. Tôi không muốn sử dụng bất kỳ công nghệ phía máy chủ nào cho việc này. Đó là lý do tại sao tôi đã tự hỏi nếu nó có thể phục vụ callback.html như là một thành phần phản ứng. Thiết lập của tôi đã bật lên phương thức xác thực cho Soundcloud, nhưng sau khi nhập thông tin đăng nhập của tôi thì không có gì xảy ra và phương thức bị trống.

Trong thành phần gốc của tôi, tôi thiết lập tuyến đường cho thành phần Gọi lại và thành phần ứng dụng của tôi.

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

Khi tôi bắn những hành động yêu cầu xác thực từ bên trong SoundContainer của tôi, tác giả hành động trông giống như sau:

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

Như tôi đã nói, sau khi nhập thông tin của tôi trong phương thức các phương thức được trống và chẳng có gì xảy ra.

Khi tôi ra ${window.location.protocol}//${window.location.host}/#/callback nó cũng giống như Uri Redirect của tôi trong Tài khoản Soundcloud của tôi: http://localhost:8080/#/callback

phần Callback của tôi trông như thế này:

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

Trả lời

5

Thứ nhất, ý tưởng gọn gàng.

Vì bạn đang sử dụng băm, cuộc gọi lại sẽ chỉ là một đoạn, không phải là trang hoàn chỉnh. Mã gọi lại không được có <html> trong đó. Bạn có thể thử thay vào đó không?

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

CẬP NHẬT

OK, vì vậy OAuth2 không thích mảnh vỡ trong các url trở lại gọi lại, có lẽ đó là lý do tại sao mã không hoạt động. Tuy nhiên bạn có thể có máy chủ tốc hành của bạn phục vụ spa trở lại trên tuyến đường gọi lại. Kỹ thuật này được ghi lại chi tiết trong các tài liệu createBrowserHistory của router phản ứng. Vì vậy, URL gọi lại sẽ phục vụ trang spa của bạn và thông tin đăng nhập sẽ hoàn tất.

+0

Thật không may là nó vẫn không hoạt động. Tôi có thể đăng nhập theo phương thức, nhưng sau đó nó được để trống và không có yêu cầu được gửi: ( –

+0

Bạn có thể đặt nó lên đâu đó không?Tại thời điểm này thật khó để đoán mà không có một số gỡ lỗi ... – hazardous

1

Vâng, ban đầu tôi đã cố gắng làm điều tương tự. Tôi khá chắc chắn rằng nó đã làm với băm. Có lẽ nó đã làm với trang nguồn và gọi lại về cơ bản là cùng một url (nếu bạn bỏ qua băm). Sau khi xé tóc ra ngoài một giờ hoặc lâu hơn, cố gắng làm cho nó hoạt động, tôi đã từ bỏ và phục vụ/gọi lại ở phía máy chủ :)

+0

Hmm, bạn đã thử với lịch sử không băm chưa? Điều đó có thể thực hiện được với bộ định tuyến phản ứng và sẽ không cần băm để hoạt động. – hazardous

Các vấn đề liên quan