使用 React Native + react-native-oauth 实现 Firebase 身份验证答案

【问题标题】：Implementing Firebase Auth With React Native + react-native-oauth使用 React Native + react-native-oauth 实现 Firebase 身份验证
【发布时间】：2017-02-07 15:57:57
【问题描述】：

我想在我的 React Native 应用程序中使用 Twitter 对用户进行身份验证。我正在使用 react-native-oauth 库 https://github.com/fullstackreact/react-native-oauth

我只是想确保我以最有效的方式解决这个问题。

首先，我在 config/constants 文件中将 firebase 添加到我的应用中

import firebase from 'firebase'

firebase.initializeApp({
    apiKey: "MY-API-KEY",
    authDomain: "MY-AUTH-DOMAIN",
    databaseURL: "MY-DATABASE-URL",
    storageBucket: "MY-STORAGE-BUCKET",
    messagingSenderId: "MY-MESSAGING-ID"
});

const ref = firebase.database().ref()
const firebaseAuth = firebase.auth()

export { ref, firebaseAuth }

然后我安装 react-native-oauth 库

现在，在我的redux/authentication中，我可能会做这样的事情，我最终会发送一个操作，将响应对象保存在我的 redux 身份验证状态以供以后使用。

import OAuthManager from 'react-native-oauth';

const manager = new OAuthManager('Nimbus') // I'm sort of confused on what the name of the app should be. Is it just the name of the app when I ran react-native init? Or something else?

export default function handleAuthWithFirebase () {

    // Some redux thunk

    return function (dispatch, getState) {
        dispatch(authenticating());
        manager.configure({
            twitter: {
                consumer_key: 'SOME_CONSUMER_KEY',
                consumer_secret: 'SOME_CONSUMER_SECRET'
            },
        });

        manager.authorize('twitter', {scopes: 'profile email'})
            .then(resp => dispatch(getProfile(resp))) // Save response object
            .catch(err => console.log('There was an error'));

        // Do some other stuff like pushing a new route, etc.
    }
}

最后，在SplashContainer.js 中，我会将它添加到handleSignIn 方法（最终由演示组件调用）。

import React, { PropTypes, Component } from 'react'
import { View, Text } from 'react-native'

// Import function
import { handleAuthWithFirebase } from '~/redux/modules/authentication'
import { Splash } from '~/components'

export default class SplashContainer extends Component {
    handleSignIn = () => {
        // Sign in user with Twitter
        handleAuthWithFirebase.bind(this);
    }
    render () {
        return (
            <Splash handleSignIn={this.handleSignIn}/>
        )
    }
}

抱歉，我知道这有点多，但我只是想确保我正确地实现了这一点。任何改善流程的建议将不胜感激。谢谢！

【问题讨论】：

标签： reactjs authentication oauth react-native

【解决方案1】：

你能用这个包检查 twitter 的身份验证吗

https://github.com/GoldenOwlAsia/react-native-twitter-signin ?

【讨论】：