Wie verwende ich Firebase Twitter Authentication mit React Native?

Question

Wie verwende ich Firebase Twitter Authentifizierung mit React Native?

I in Bezug unterhalb sowohl des Codes versucht, 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. 
     } 
    }); 

    } 

}); 

und

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

    } 

}); 

Wenn ich authWithOAuthRedirect, ist ein Fehler aufgetreten, wie

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

Wenn I authWithOAuthPopup verwenden , nichts ist passiert.

Wie kann ich die Frage lösen? Oder ist es nicht möglich?

Answer 1

Dies ist die Firebase Twitter-Integration für das Web. Trotz seiner Herkunft und der Verwendung von JavaScript ist React Native in keiner Weise das Web; Sie haben kein DOM, Sie haben keinen Browser und Sie können das aktuelle Fenster nicht umleiten, was der Code zu sein scheint.

Also, um Ihre Frage zu beantworten, wird die Verwendung dieser Bibliothek, wie es ist, nicht möglich sein. Möglicherweise müssen Sie eine Erweiterung in Obj-C schreiben, um das zu tun, was Sie tun möchten, ohne den browserartigen Ablauf zu verwenden.

Answer 2

gehackt ich eine Lösung zusammen ... Ich bin sicher, dass es ein sauberer Ansatz ist, die verwendet werden können, die Arbeit zu erledigen, aber Sie können bauen auf, was ich

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

eine vollständige Erklärung finden Sie erreicht haben hier ... https://github.com/aaronksaunders/rn-firebase-demo