bisogno di un'implementazione client oauth 2 per router di risposta

Question

abbiamo creato il nostro server oauth 2 con implementazione del codice di autorizzazione dal codice sottostante.

ma stiamo cercando di integrare l'autenticazione client oauth2 nell'applicazione Web che include l'implementazione del router e del flusso.

abbiamo esaminato molti repository git ma non abbiamo trovato il modo corretto di farlo.

Esiste qualche implementazione che ci indichi come ottenerlo?

Grazie ancora.

UPDATE

stiamo esaminando repository di sotto, ma ancora non è chiaro su come noi far funzionare le cose. come dove unire auth e oauth logic e cosa fare per lato server/client.

https://github.com/rackt/react-router/tree/master/examples/auth-flow

https://github.com/andreareginato/simple-oauth2

https://github.com/LearnBoost/superagent-oauth

https://github.com/zalando/superagent-oauth2-client

Answer 1

cercherò di spiegare il mio introito di autenticazione di alto livello con reagiscono-router. Avrai bisogno di implementazioni sia sul server che sul client e ci sono alcune decisioni che devi prendere. Per questo esempio userò redux per la libreria di flusso.

primo luogo è necessario un meccanismo per proteggere i vostri percorsi, faccio questo con una componente di ordine più elevato in questo modo:

// 'Components/requireAuthentication' 

import React, { Component, PropTypes } from 'react' 
import { connect } from 'react-redux' 
import SignIn from './SignIn' 

export default (ChildComponent) => { 
    class AuthenticatedComponent extends Component { 
    static propTypes = { 
     hasAuthToken: PropTypes.bool.isRequired 
    }; 

    render() { 
     const { hasAuthToken } = this.props 
     return (hasAuthToken 
     ? <ChildComponent {...this.props} /> 
     : <SignIn /> 
    ) 
    } 
    } 

    const mapStateToProps = ({session}) => (session) 

    return connect(mapStateToProps)(AuthenticatedComponent) 
} 

Il codice qui è abbastanza semplice, esporta una funzione che prevede una componente di reagire come l'unico argomento. Questo ChildComponent è il componente che si desidera proteggere.

Il puntello hasAuthToken è il controllo qui, se è vero, verrà eseguito il rendering dello ChildComponent, altrimenti verrà eseguito il rendering SignIn. Nota, questo processo di rendering SignIn va bene se non ti interessa il SEO ma potresti voler fare il redirect utente a un percorso di accesso se ti interessa i motori di ricerca che indicizzano i tuoi percorsi protetti.

Infine AuthenticatedComponent è connesso allo stato di ripristino redox session ma potrebbe essere facilmente sostituito per utilizzare qualsiasi altra libreria di flusso di propria scelta. In poche parole, si sta iscrivendo alle modifiche su session. Se il valore hasAuthToken cambia in valore, il componente verrà nuovamente sottoposto a rendering se attualmente è montato.

Ora per le vie:

import { Route } from 'react-router' 
import Container from './Components/Container' 
import Private from './Components/Private' 
import requireAuthentication from './Components/requireAuthentication' 

export default (
    <Route path='/' component={Container}> 
    <Route path='private' component={requireAuthentication(Private)}> 
     <Route path='other' component={...} /> 
    </Route> 
    </Route> 
) 

Qui sto applicando il metodo requireAuthentication (il metodo predefinito esportato dal codice sopra) con la componente voglio proteggere. Ciò manterrà le pagine da mostrare a meno che la proprietà di ripristino redire session.hasAuthToken sia vera e invece mostra il componente SignIn.

Anche altri percorsi annidati sotto il componente protetto verranno protetti a causa del modo in cui il router di reazione compone i percorsi.

A un livello elevato, il componente SignIn dovrebbe essere semplicemente una pagina con una normale <a href> (cioè non reagiscono-router Link) per iniziare l'handshake OAuth2. Il modulo simple-oauth2 ha alcuni buoni esempi su come implementare oauth2 lato server, quindi non entrerò in questo qui. Se segui questi esempi, è l'endpoint app.get('/auth', function (req, res) {}) a cui desideri collegare l'utente.

Nella callback endpoint si vuole persistere il token in qualche modo (ad esempio, per la sessione (express-session sarà dare una mano qui) o al database), quindi reindirizzare l'utente di nuovo al vostro reagire app.

Ora è necessario portare la sessione nell'archivio di ridondanza sul lato server in preparazione per l'idratazione sul client. I documenti di redux spiegano come eseguire questa operazione nella pagina Server Rendering, in particolare nelle sezioni Inject Initial Component HTML and State e The Client Side. Come minimo avrete bisogno di un oggetto come questo:

{ 
    hasAuthToken: (typeof req.session.token !== 'undefined') 
} 

Naturalmente l'implementazione effettiva dipenderà da come si memorizza il token e fornirlo alla richiesta sul lato server.

Speriamo che questo possa iniziare. Questo stesso processo può essere utilizzato anche per altri tipi di autenticazione, sostituendo il collegamento Oauth2 con un nome utente e una password che il server gestisce come XHR.

Buona fortuna.