Firebase React 인증 자습서

때때로 당신은 빠른 원형을 만들기만 하면 됩니다. 당신은 백엔드, 신분 검증, 권한 수여 등을 어지럽히고 싶지 않습니다.구글 파이어베이스가 도와줄 수 있는 곳입니다.이 강좌에서react 응용 프로그램과 Firebase 인증 모듈을 연결하는 방법을 보여 드리겠습니다.

뭐 공부 해요?

매우 간단한 응용 프로그램.등록, 로그인, 메인 화면 등 3개의 스크린만 있습니다.
Firebase 인증 모듈을 사용하여 로그인/등록을 처리하고 라우터에 응답하여 라우팅을 관리합니다.
마지막까지 읽어 주십시오. 예시 코드를 포함하는 Github repo 링크를 발표할 것입니다.

Firebase 설정

새 Firebase 응용 프로그램 만들기

먼저 firebase console 로 이동하여 새 응용 프로그램을 만듭니다.

인증 방법 추가

인증 을 클릭하고 로그인 방법을 설정합니다.

전자 메일/암호 인증을 사용합니다.

Firebase 자격 증명 가져오기

항목 설정으로 이동하려면 다음과 같이 하십시오.

그리고 Add firebase to your web app을 선택하십시오.자격 증명을 복사하여 프로젝트 루트 디렉토리의 .env 파일에 저장합니다.

REACT_APP_FIREBASE_KEY=your_key
REACT_APP_FIREBASE_DOMAIN=your_app_id.firebaseapp.com
REACT_APP_FIREBASE_DATABASE=https://your_app_id.firebaseio.com
REACT_APP_FIREBASE_PROJECT_ID=your_app_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_SENDER_ID=sender_id

create-react-app 웹 팩config는 REACT_APP로 시작하는 환경 변수를 자동으로 불러오기 때문에 인용할 수 있습니다.
자세한 내용은 참조create-react-app documentation

프런트엔드 설정

우리는 create-react-app 을 사용하여 응용 프로그램을 설정할 것이다.나는 당신이 npm의 현대 버전을 가지고 있다고 가정하기 때문에, 나는 npx를 사용하여 스크립트를 실행할 것이다.

npx create-react-app firebase-auth-tutorial

또한 React 라우터를 설치하려면 라우팅이 필요합니다.

yarn add react-router

src/index.css, src/App.css 및 src/App.test.js 파일을 동시에 삭제합니다.우리는 지금 그것들을 필요로 하지 않는다.

Firebase에 애플리케이션 연결

첫 설치firebase 패키지:

yarn add firebase

다음 내용이 포함된 파일src/base.js을 만듭니다.

import firebase from "firebase";

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});

export default app;

라우팅 추가

켜기src/App.js:

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import Home from "./Home";
import Login from "./Login";
import SignUp from "./SignUp";

const App = () => {
  return (
    <Router>
      <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/signup" component={SignUp} />
      </div>
    </Router>
  );
};

export default App;

Home, LogIn 및 SignUp 구성 요소를 만들고 제목만 렌더링합니다.예를 들어, 여기src/Home.js:

import React from "react";

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

응용 프로그램을 실행합니다.너는 마땅히 사용할 수 있는 모든 노선이 있어야 한다.

등록 및 로그인 구성 요소 만들기

이제 등록 논리를 추가합시다.src/SignUp 디렉터리를 만들고 우리의 SignUp.js 디렉터리를 그곳으로 이동합니다.이름도 SignUpView.js로 변경합니다.이렇게 보이게 하기:src/SignUp/SignUpView.js

import React from "react";

const SignUpView = ({ onSubmit }) => {
  return (
    <div>
      <h1>Sign up</h1>
      <form onSubmit={onSubmit}>
        <label>
          Email
          <input
            name="email"
            type="email"
            placeholder="Email"
          />
        </label>
        <label>
          Password
          <input
            name="password"
            type="password"
            placeholder="Password"
          />
        </label>
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
};

export default SignUpView;

이것은 간단한 표현 성분이다.우리는 onSubmit 처리 프로그램을 도구 중의 하나로 삼아 표에 추가할 것이다.email 및 password 필드를 정의하고 Sign Up 단추를 추가했습니다.
컨테이너 구성 요소 만들기 src/SignUp/index.js:

import React, { Component } from "react";
import { withRouter } from "react-router";
import app from "../base";

import SignUpView from "./SignUpView";

class SignUpContainer extends Component {
  handleSignUp = async event => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    try {
      const user = await app
        .auth()
        .createUserWithEmailAndPassword(email.value, password.value);
      this.props.history.push("/");
    } catch (error) {
      alert(error);
    }
  };

  render() {
    return <SignUpView onSubmit={this.handleSignUp} />;
  }
}

export default withRouter(SignUpContainer);

이 구성 요소는 우리의 등록 논리를 처리할 것이다.
함수를 봅시다.그것은 익명 화살표 함수로 정의되었다.내가 여기서 이렇게 하는 것은 사용을 피하기 위해서이다handleSignUp.
이 예에서 저는 클래스bind(this)가 정말 필요합니다. 왜냐하면 저는 this 패키지를 사용하여props에서 history 대상을 얻었기 때문입니다.그렇지 않으면, 나는 그것을 정규 함수로 정의하는 것이 가장 좋다.
따라서 이 함수 IwithRouter에서 페이지를 다시 불러오는 것을 피하기 위해 폼preventDefault에서 password 및 email 함수를 가져와 elements 함수를 사용하여 Firebase에서 새 사용자를 만듭니다.
우리의 createUserWithEmailAndPassword 구성 요소는 거의 같다. LogIn 함수 호출을 createUserWithEmailAndPassword 로 바꾸기만 하면 된다.

전용 라우팅 추가

좋아, 좋아. 지금 우리는 등록하고 로그인할 수 있지만, 불행하게도, 이것은 큰 의미가 없다. 왜냐하면 홈페이지는 심지어 권한을 부여받지 않은 사용자에게도 사용할 수 있기 때문이다.복구합시다.
작성signInWithEmailAndPassword 내용은 다음과 같습니다.

import React from "react";
import { Route, Redirect } from "react-router-dom";

export default function PrivateRoute({
  component: Component,
  authenticated,
  ...rest
}) {
  return (
    <Route
      {...rest}
      render={props =>
        authenticated === true ? (
          <Component {...props} {...rest} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

기본적으로 이 구성 요소는 통과된 src/PrivateRoute.js 또는 Component 블록을 조건부로 렌더링합니다. 이는 통과된 <Redirect/> 속성에 따라 다릅니다.
이제 authenticated 에서 사용합시다.App.js 노선을 Home 로 변경합니다.

<PrivateRoute exact path="/" component={Home} authenticated={this.state.authenticated}/>

우리는 PrivateRoute 의 authenticated 필드를 사용했지만 존재하지 않습니다.복구합시다.

인증 상태 모니터링

먼저 state 를 정상App.js으로 재설정하고 초기 상태를 설정합니다.

class App extends Component {
  state = { loading: true, authenticated: false, user: null };

  render() {
    const { authenticated, loading } = this.state;

    if (loading) {
      return <p>Loading..</p>;
    }

    return (
      <Router>
        <div>
          <PrivateRoute
            exact
            path="/"
            component={Home}
            authenticated={authenticated}
          />
          <Route exact path="/login" component={LogIn} />
          <Route exact path="/signup" component={SignUp} />
        </div>
      </Router>
    );
  }
}

Component에 componentWillMount 를 추가하고 다음을 포함합니다.

componentWillMount() {
  app.auth().onAuthStateChanged(user => {
    if (user) {
      this.setState({
        authenticated: true,
        currentUser: user,
        loading: false
      });
    } else {
      this.setState({
        authenticated: false,
        currentUser: null,
        loading: false
      });
    }
  });
}

Firebase에서 데이터를 가져와 상태를 업데이트할 때까지 App.js 렌더링합니다.그리고 우리는 루트를 보여 줍니다. 만약 우리가 등록하지 않았다면, Loading... 페이지로 이동할 것입니다.

다음 단계는 무엇입니까?

현재 로그인한 경우 로그인 페이지에서 방향을 바꿀 수 있고 로그아웃 기능도 추가할 수 있습니다 (goreadfirebase documentation
또한 이러한 지식이 있으면 React Ethereum Tutorial에서 지갑 응용 프로그램에 인증을 추가할 수 있습니다!
읊다, 읊조리다