2017-02-07 10 views
0

React 네이티브 앱에서 트위터 사용 사용자를 인증하고 싶습니다. 나는 반응 - 네이티브 - oauth 라이브러리를 사용하고있다. https://github.com/fullstackreact/react-native-oauthReact Native + react-native-oauth로 Firebase Auth 구현

나는 이것에 대해 가장 효과적인 방법으로 가고 싶다.

것부터 먼저 나는 아마 같은 것을 할 것입니다 내 redux/authentication

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 } 

가 그럼 난,

지금 반응 - 네이티브의 OAuth 라이브러리를 설치할 config/constants 파일에 내 응용 프로그램에 중포 기지를 추가 결과적으로 응답 객체를 저의 refx 인증 상태로 저장하는 액션을 나중에 사용하도록 파견합니다.

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

미안하지만, 내가 많이 알고 있었지만 올바르게 구현하고 싶습니다. 흐름을 개선하기위한 제안이 있으면 감사하겠습니다. 감사!

답변

관련 문제