Come utilizzare l'autenticazione Twitter Firebase con React Native?

Question

Come utilizzare l'autenticazione Twitter Firebase con React Native?

ho provato sia il codice di seguito in riferimento alle https://www.firebase.com/docs/web/guide/login/twitter.html

var Firebase = require("firebase"); 

var App = React.createClass({ 

    render: function() { 
    return (
     <View> 
     <Text onPress={this._handlePress}> 
      Twitter login 
     </Text> 
     </View> 
    ); 
    }, 

    _handlePress: function() { 
    var myApp = new Firebase("https://<myapp>.firebaseio.com"); 

    myApp.authWithOAuthRedirect("twitter", function(error) { 
     if (error) { 
     console.log("Login Failed!", error); 
     } else { 
     // We'll never get here, as the page will redirect on success. 
     } 
    }); 

    } 

}); 

e

var Firebase = require("firebase"); 

var App = React.createClass({ 

    render: function() { 
    return (
     <View> 
     <Text onPress={this._handlePress}> 
      Twitter login 
     </Text> 
     </View> 
    ); 
    }, 

    _handlePress: function() { 
    var myApp = new Firebase("https://<myapp>.firebaseio.com"); 

    myApp.authWithOAuthPopup("twitter", function(error, authData) { 
     if (error) { 
     console.log("Login Failed!", error); 
     } else { 
     console.log("Authenticated successfully with payload:", authData); 
     } 
    }); 

    } 

}); 

Quando uso authWithOAuthRedirect, un errore si è verificato come

undefined is not an object (evaluating 'window.location.href') 

Quando uso authWithOAuthPopup , non è successo niente.

Come posso risolvere la domanda? Oppure non è possibile?

Answer 1

Questa è l'integrazione di Firefox Firebase per il web. Nonostante la sua ascendenza e il suo uso di JavaScript, React Native non è in alcun modo il web; non hai un DOM, non hai il browser e quindi non hai la possibilità di reindirizzare la finestra corrente, che sembra essere ciò che questo codice sta cercando di fare.

Quindi, per rispondere alla tua domanda, l'uso di questa libreria così com'è non sarà possibile. Potresti scoprire di dover scrivere un'estensione in Obj-C per fare ciò che vuoi fare senza utilizzare il flusso in stile browser.

Answer 2

ho messo insieme una soluzione ... Sono certo v'è un approccio più pulito che può essere utilizzato per ottenere il lavoro fatto, ma si può costruire su ciò che ho compiuto

/** 
* login in the user with the credentials, gets the whole process 
* started, [NOTE] probably can just construct the url myself? 
*/ 
_doGitHubLogin() { 
    this.props.fbRef.authWithOAuthRedirect("github", function (error) { 
     if (error) { 
      console.log("Authentication Failed!", error); 
     } else { 
      console.log("Authenticated successfully with payload:", authData); 
     } 
    }); 
} 

componentDidMount() { 

    // set this interval to check for me trying to redirect the window... 
    var that = this 
    that.inter = setInterval(function() { 
     if (window.location && window.location.split) { 

      // set the redirect on the url.. 
      var newLocation = window.location.split("redirectTo=null")[0] 
      newLocation = newLocation + "redirectTo=https://auth.firebase.com/v2/clearlyinnovative-firebasestarterapp/auth/github/callback" 

      // open the browser... 
      that.setState({ url: newLocation }) 

      // clear the interval to stop waiting for the location to be set.. 
      clearInterval(that.inter) 
     } 
    }, 3000); 


    this.props.fbRef.onAuth((_auth) => { 
     console.log(_auth) 
     this.setState({ auth: _auth }) 
    }); 
} 

Vedi una spiegazione completa qui ... https://github.com/aaronksaunders/rn-firebase-demo