使用React Native + react-native-oauth实现Firebase Auth

时间:2017-02-07 15:57:57

标签: reactjs authentication oauth react-native

我想在我的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}/>
        )
    }
}

抱歉,我知道这有点多,但只是想确保我正确实现这一点。任何改善流程的建议都将受到赞赏。谢谢!

1 个答案:

答案 0 :(得分:0)

您可以使用此软件包检查Twitter的身份验证吗

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