이 강좌에서, 우리는 Firebase와 개인 루트를 사용하여 권한을 부여받은 간단한react 응용 프로그램을 구축할 것입니다.세부 사항을 깊이 연구하기 전에 저는 먼저 기존의 bestreact dashboard templates와 웹 응용 프로그램 템플릿을 소개하고 싶습니다. 이것은 Firebase 인증과 함께 제공됩니다.
많은 시간과 돈을 절약하기 위해 프로젝트에서 직접 사용할 수 있고, 경험이 풍부한 개발자들이 구축한 것이기 때문에 많은 것을 배울 수 있는 기회가 있다.
이제 우리 강좌로 넘어가자.

카탈로그

인용문

선행 조건

React 설정

React에서 Firebase 설정

React 라우터

Firebase 및 React를 사용한 인증 컨텍스트

React의 전용 라우팅

React에서 뷰 구성 요소 만들기

Firebase 등록

Firebase 로그인

Firebase에서 로그아웃

결론

소개

우리는 인증서를 사용하여 사용자의 신분을 식별한다.본고의 마지막 부분에서 우리는 간단한 React 응용 프로그램을 구축하여 사용자가 Firebase를 사용하여 인증을 할 수 있도록 하고 인증을 받은 사용자만 이 응용 프로그램에 접근할 수 있도록 확보할 것이다.

선결 조건

Javascript의 기본 지식 구비

기계에 노드가 있는지 확인하십시오 >=8.10 및 npm>=5.6, 더 좋은 체험을 얻으십시오

React, Context, Hooks, Routes에 대해 기본적으로 알고 있습니다.

명령행 숙지

텍스트 편집기

Firebase 계정

React 설정

React에서 항목을 작성하려면 다음 명령을 실행합니다.

npx create-react-app react_firebase_auth

npx는 npm5.2+에 첨부된 패키지 실행기 도구입니다.우리는 방금 react\u firebase\u auth라는 프로젝트를 만들었습니다.프로젝트로 이동하여 시작합니다.

cd react_firebase_auth
npm start

어플리케이션에는 다음과 같은 몇 가지 종속성이 필요합니다.

reactdom는 react Router의dom 연결을 포함하고 있습니다. 제 말은 사이트의 공유기 구성 요소입니다.
npm 설치 -react 라우터dom 저장

구글 재료 디자인을 실현하는 재료 인터페이스.
npm i@ 재료 인터페이스/핵심 - 저장

우리의react 프로그램이 성공적으로 설정되었습니다.이제 Firebase를 설정할 때가 되었다.

React에서 Firebase 설정

우리는 먼저 새로운 Firebase 응용 프로그램을 만듭니다.이를 위해 다음 절차를 따르십시오.
Firebase console로 이동합니다.

추가 항목별

애플리케이션 이름 입력

조항 수락

창설 항목별

ap를 만들 때까지 기다립니다

및 Continue

인증 클릭

으로 이동

로그인 방법 설정 클릭

이메일/암호를 선택하고 활성화합니다.

이 완료되면 프로젝트 설정으로 이동하여 플랫폼 목록으로 스크롤합니다.웹을 선택합니다.

복제 애플리케이션 구성

사이드바 메뉴에서 인증 을 클릭하여 로그인 방법으로 이동하고 전자 메일/암호를 사용합니다.
현재,react 응용 프로그램에 Firebase를 설정합니다.Firebase를 만듭니다.src 폴더의 js 파일입니다.
다음 명령을 사용하여 Firebase dependecie를 설치합니다.

npm install --save firebase

Firebase를 엽니다.js는 Firebase 컨트롤러에서 복사한javascript 스크립트를 붙여넣습니다.

보시다시피 Firebase를 사용하여 Firebase 프로그램을 초기화할 수 있습니다.EAPP를 초기화하고 응용 프로그램으로 내보냅니다.이렇게 하면 우리는 우리의 데이터베이스에 완전히 접근할 수 있다.

React 라우터

이제 응용 프로그램으로 넘어가세요.라우팅을 추가합니다.

import React from 'react';
import "./App.css";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './Home'
import Login from './Login'
import SignUp from './Signup'
function 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;

BrowserRouter에 레이아웃을 포장합니다. BrowserRouter는 모든 응용 프로그램에 브라우저 상하문을 제공합니다.기본적으로 라우팅, 링크, 방향 변경 및 기타 라우터 기능을 사용할 수 있습니다.
현재 인증을 사용하려면 로그인하거나 로그인하지 않은 경우 인증 상태를 저장하고 구성 요소 트리를 업데이트해야 합니다.이를 위해 React 컨텍스트 API를 사용합니다.

Firebase 및 React 인증 컨텍스트 사용

인증을 만듭니다.js는 scr 폴더에 있으며 다음과 같습니다.

     import React, { useEffect, useState } from "react";
    import app from "./firebase.js";
    export const AuthContext = React.createContext();
    export const AuthProvider = ({ children }) => {
      const [currentUser, setCurrentUser] = useState(null);
      const [pending, setPending] = useState(true);
      useEffect(() => {
        app.auth().onAuthStateChanged((user) => {
          setCurrentUser(user)
          setPending(false)
        });
      }, []);
      if(pending){
        return <>Please wait...</>
      }
      return (
        <AuthContext.Provider
          value={{
            currentUser
          }}
        >
          {children}
        </AuthContext.Provider>
      );
    };

이 파일에서 Firebase에서 프로그램을 가져와야 합니다.Firebase API가 있고 컨텍스트를 만들었습니다.react의 상하문은 일부 데이터를react 구성 요소 트리 전체에 전파할 수 있도록 합니다.
인증 상태를 저장하는 공급자 구성 요소를 만들었습니다.Firebase의 인증 상태가 바뀔 때마다 업데이트할 사용자를 가지고 있습니다.이를 위해, 우리는 플러그인useEffect를 사용하여 Firebase 대상에 대한 변경 사항을 등록하고, 구성 요소 AuthProvider가 트리에 설치될 때 한 번 실행할 수 있도록 빈 그룹을 두 번째 매개 변수로 useEffect에 전달합니다.
그리고 AuthProvider 레이아웃에서 AuthProvider를 사용했습니다.Provider, Firebase에서 얻은 현재 사용자를 각각의 auth 상태 변경에 전달합니다. 이것은 값으로 AuthProvider에 전달됩니다.그리고 우리는 이 구성 요소에 전달되는 하위 등급을 보여 준다.
이제 응용 프로그램으로 돌아갑니다.js 및 레이아웃을 AuthProvider에 포장합니다.

    <AuthProvider>
      <Router>
        <div>
          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/signup" component={SignUp} />
        </div>
      </Router>
    </AuthProvider>

따라서 우리 구성 요소 트리에서 아래의 모든 것은 상하문 API를 통해 현재 사용자에게 접근할 수 있습니다.우리의 예에서, 로그인하면 모든 사용자 설명을 가진 사용자 대상을 가지고 있으며, 로그아웃하면null 또는 정의되지 않은 상태의 사용자 대상을 가지고 있습니다.

React의 전용 라우팅

우리는 인증을 받은 사용자만 홈페이지에 접근할 수 있도록 개인 루트를 만들 수 있다.
PrivateRoute를 작성합니다.js는 scr 폴더에 있습니다.

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "./Authentication";
const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const {currentUser} = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={routeProps =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};

export default PrivateRoute

여기서 사용자가 신분 검증을 거치면 어떤 구성 요소를 보여야 하는지 알아야 한다.따라서, 우리는 구성 요소와 기타 속성 {component: RouteComponent,...rest}를 사용합니다.
PrivateRouter는 기본적으로 일반 노선의 포장기입니다.따라서, 우리는 나머지props {...rest}를 전달하고, 우리의 루트 표시 함수에서, 사용자가 있는지에 따라, 루트 구성 요소를 표시하거나 로그인 페이지로 리디렉션합니다.
응용 프로그램으로 돌아갑니다.js 및 다음 변경 사항:

 <AuthProvider>
      <Router>
         <div>
           <PrivateRoute exact path="/" component={Home} />
           <Route exact path="/signin" component={Signin} />
           <Route exact path="/signup" component={SignUp} />
        </div>
      </Router>
  </AuthProvider>

이제 보기 구성 요소를 만듭니다.우리는 재료 사용자 인터페이스를 사용할 것이다.재료 인터페이스를 더욱 깊이 있게 이해하려면 공식 문서 here 를 클릭하여 완성할 수 있습니다.

React에서 뷰 구성 요소 만들기

우리는 인터페이스로 Material ui를 사용할 것입니다.재료 ui dependecie가 설치되어 있는지 확인하십시오.
참고: 이 문서에서는 Firebase 인증을 소개합니다.따라서 재료 ui에 대한 자세한 내용은 official documentation 로 이동하십시오.
서명을 작성합니다.js는 src 폴더에 있고 다음 코드를 통과합니다.

import React from 'react';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

import { Link } from 'react-router-dom'
function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://pacoconsulting.co.mz/">
        PACO IT Consulting
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}
const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));
export default function SignIn() {
  const classes = useStyles();
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form onSubmit={handleLogin}  className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}>
        <Copyright />
      </Box>
    </Container>
  );
}

등록을 작성합니다.js는 scr 폴더에 있습니다.

   import React from 'react';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { Link } from 'react-router-dom'
function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}
const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(3),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));
export default function SignUp() {
  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Sign up
        </Typography>
        <form onSubmit={handleSignUp} className={classes.form} noValidate>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                autoComplete="fname"
                name="firstName"
                variant="outlined"
                required
                fullWidth
                id="firstName"
                label="First Name"
                autoFocus
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="lastName"
                label="Last Name"
                name="lastName"
                autoComplete="lname"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
              />
            </Grid>
            <Grid item xs={12}>
              <FormControlLabel
                control={<Checkbox value="allowExtraEmails" color="primary" />}
                label="I want to receive inspiration, marketing promotions and updates via email."
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign Up
          </Button>
          <Grid container justify="flex-end">
            <Grid item>
              <Link to="/signin" variant="body2">
                Already have an account? Sign in
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={5}>
        <Copyright />
      </Box>
    </Container>
  );
}

홈 페이지를 만듭니다.js는 scr 폴더에 있습니다.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));
export default function ButtonAppBar() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Firebase 등록

등록 중입니다.js 파일은 다음과 같이 변경됩니다.

import React, { useCallback} from "react";
import { Link } from 'react-router-dom'
import app from "./firebase.js";

화목하다

export default function SignUp({ history }) {
  const classes = useStyles();
  const handleSignUp = useCallback(async event => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    try {
      await app
        .auth()
        .createUserWithEmailAndPassword(email.value, password.value);
      history.push("/");
    } catch (error) {
      alert(error);
    }
  }, [history]);
...
...
...

이 구성 요소는 우리의 루트 상하문에서 역사 대상을 얻고 있습니다.우리가 그 단추를 눌렀을 때, 우리의handleSignUp이 시작됩니다.이 함수에서 이벤트와calllpreventDefault () 를 받았습니다. 사용자가 등록 단추를 눌렀을 때 페이지를 다시 불러오고 싶기 때문입니다.그리고 우리는 target에서 전자메일과 비밀번호를 입력합니다.요소, 우리는 Firebase API에서createUserWith Email AndPassword()를 호출하고 전자메일과 암호 값을 전달합니다:createUserWith Email AndPassword(email.value,password.value).
그리고 우리는 handleSignUp 함수를 표의 onSubmit 리셋에 전달합니다.

Firebase 로그인

서명 중입니다.js 파일, 서명.js는 다음 가져오기를 수행합니다.

import React, { useCallback, useContext } from 'react'; // add {useCallback, useContext}
import { withRouter, Redirect } from "react-router";
import app from "./firebase.js";
import { AuthContext } from "./Authentication.js";

SignIn() 함수에서 다음과 같이 변경합니다.

기록 추가

handleLogin 메서드를 추가합니다.
기본 함수 SignIn 내보내기({history}) {
상수 클래스 = useStyles(),
const handleLogin=useCallback(
비동기식 이벤트 =>{
이벤트preventDefault();
const {email,password}= 이벤트.목표원소
해보다
대기 응용 프로그램
.auth()
.EmailandPassword(email.value,password.value)로 로그인하기;
역사추진("/");
} 스냅 (오류) {
경고(오류);
}
},
[히스토리]
);
const{currentUser}=useContext(AuthContext);
if(현재 사용자) {
돌아오다
}
...
...
...
...

등록 페이지에는 두 가지 다른 점이 있습니다.여기에서 우리는 signInWithEmail AndPassword()를 사용하고 인증 상하문const { currentUser } = useContext(AuthContext);을 사용합니다.기억할 수 있는 바와 같이, 우리는 Firebase 사용자를 추적하고, 우리의 auth 모델을 사용하여currentUser 필드로 우리의 상하문을 업데이트하고 있습니다.그리고 나서 검사합니다. 만약currentUser가 있다면,react 공유기에서 구성 요소를 렌더링합니다.렌더링하면 어셈블리는 끝 속성에서 세트를 사용하는 경로로만 리디렉션됩니다.

Firebase에서 로그아웃

기본적으로 집에서.js 로그아웃 단추에서 auth 모듈에서signOut () 를 호출합니다.

onClick={() => app.auth().signOut()} 

축하응용 프로그램을 테스트합니다.

npm start

결론

우리의 신청은 이미 준비가 다 되었다.이제 React 응용 프로그램에서 Firebase 인증을 사용할 수 있습니다.
읽어주셔서 감사합니다!