React 컨텍스트 API 및 Firebase 인증 소개

안녕하세요!오늘의 글은 React 상하문 API의 초보자 소개입니다. 왜냐하면 이 개념이 React 초보자에게 매우 복잡하다는 것을 알아차렸기 때문입니다.Firebase 인증을 사용하여 React 컨텍스트 API를 사용하는 묘미를 보여 드리겠습니다.갑시다!
본 강좌의 몇 가지 선결 조건을 따르다.

React의 기본 이해(즉 도구, 상태 등)

Firebase에 대한 이해가 매우 적음(그러나 더 많은 지식이 도움이 될 것)

반응 컨텍스트 API란 무엇입니까?

일반적으로 React에서는 상위 구성 요소에서 하위 구성 요소로 props라는 내용을 전달합니다.React 응용 프로그램은 구성 요소로 구성되어 있으며 많은 구성 요소는 부자 관계를 가지기 때문에 응용 프로그램의 간단한 시각화는 다음과 같다.

대부분의 경우 우리는 부모로부터 아이에게 물려주기만 하면 되기 때문에 일반적인 state 과 props 을 사용하면 충분하다.그러나 만약에 우리가 aprop를 많은 구성 요소에 전달해야 한다면 어떻게 해야 합니까?그 깊은 둥지나 다른 나무에서도?

예:

사용자 선호 언어

사용자가 선택한 응용 프로그램의 테마 또는 배색 방안

인증된 사용자의 속성

이런 상황에서 반드시 수동으로 props 을 모든 구성 요소에서 모든 구성 요소로 전달해야 한다. 이것은 너무 단조롭다!이것은 지주 시추라고 불린다.다음은 구조의 반응 컨텍스트 API입니다.그들의 공식 문서에 따르면,

React Context API provides the ability to pass props to child components without needing to pass them down manually.

이제 우리는 그것이 무엇인지, 언제 그것을 사용해야 하는지 알게 되었다.
이제 Firebase 인증을 사용하는 간단한 예시를 소개하겠습니다.컨텍스트 API를 사용해야 하므로 인증된 사용자 도구를 각 서브어셈블리에 수동으로 전달할 필요가 없습니다.어떻게 작동하는지 봅시다.

1단계: Firebase 프로젝트 만들기

https://firebase.google.com/로 이동하여 새 프로젝트를 만듭니다.

대시보드에서 웹 아이콘을 클릭하여 Firebase for 웹 응용 프로그램을 초기화합니다.

Firebase 절차에 따라 구성 변수를 표시하는 페이지로 이동합니다.이것은 매우 중요하기 때문에 복제하여 어딘가에 저장해 주십시오.우리는 곧 그것을 사용할 것이다.

2단계: Firebase 인증 설정

다음 그림과 같이 검증으로 이동합니다.

그런 다음 응용 프로그램의 로그인 방법을 설정할 수 있습니다.예를 들어 나는 구글, 전자메일, 페이스북을 사용할 것이다.

Facebook 로그인 설정

구글과 전자메일 인증은 전환 단추를 누르면 로그인 방법으로 사용할 수 있습니다.Facebook의 경우 Facebook 개발자 계정이 있어야 설정할 수 있습니다.

This is optional, so please skip to step 3 if you don't plan on using Facebook as an authentication method.

방문https://developers.facebook.com/ 개발자 계정 만들기

그리고 새 프로젝트를 만듭니다. 이 페이지를 보실 수 있습니다.설정 > 기본 으로 이동합니다.응용 프로그램 ID와 응용 프로그램 기밀을 복사합니다.

이제 Firebase로 돌아가서 붙여넣습니다.동시에 URL을 복사합니다. 아래 그림과 같습니다.

개발자의 페이스북으로 돌아가'제품 추가'에서 페이스북 로그인이라는 제품을 찾아'설정'단추를 누르세요.

Firebase에서 복사한 URL을 다음 그림과 같은 필드에 붙여넣고 "변경 사항 저장"을 누르십시오.

마지막으로 페이스북 로그인>Quickstart에 들어가 사이트의 URL을 입력하세요.내 예에서 이것은 단지 테스트 응용 프로그램일 뿐이기 때문에 URL은 prop이다.저장을 클릭하면 완료됩니다!

당신의 사용자는 현재 페이스북을 사용하여 당신의 응용 프로그램에서 신분 검증을 할 수 있습니다.

3단계: React 항목 설정

Google은 세 가지 로그인 방법(즉 구글, 전자메일, 페이스북)을 위해 Firebase 인증을 마쳤으며, Firebase를 사용할 수 있도록 React 프로젝트를 구축합니다.
프로젝트의 루트 디렉토리에서 다음을 실행합니다.

npm install firebase react-firebaseui

http://localhost:3000React 응용 프로그램에 Firebase를 설정하는 데 필요한 도구와 인프라를 포함합니다.

firebase 사전 제작 구성 요소를 제공하여 인증을 처리하고 표시할 수 있습니다.

4단계: Firebase 구성

React 응용 프로그램의 react-firebaseui 폴더에 "Firebase"폴더를 만들고 src라는 파일을 만듭니다.여기서 1단계의 설정 변수를 붙일 것입니다.복사하는 것을 잊어버리면 Firebase 항목 설정에서 항상 구성 변수를 찾을 수 있습니다(아래 그림 참조).
config.js에서 우리는 세 가지 일을 할 것이다.

의존 항목 가져오기

사용Firebase/config.js Firebase 응용 프로그램 인스턴스 만들기

이 응용 프로그램을 내보내면 곧 볼 수 있습니다

코드에서는 다음과 같이 보여야 합니다.

//1. import the dependencies
import * as firebase from "firebase";
import "firebase/auth";

//2. Initialize app with the config vars
const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
});

//3. export it for use
export default app;

5단계: Firebase 컨텍스트

이제 컨텍스트 API를 사용하여 Firebase 컨텍스트를 작성합니다.firebase.initializeApp(config) 폴더에 Firebase 라는 새 파일을 추가합니다.
우리는 다음과 같은 일을 할 것이다.

으로부터context.jsReact 의존 항목 및 응용 프로그램 가져오기

를 사용하여 config.js 라는 React 컨텍스트를 작성하고 내보냅니다.

React 컨텍스트 제공 프로그램을 포함하는 작성 및 내보내기AuthContext

각 컨텍스트 객체에는 다른 어셈블리에서 컨텍스트를 사용할 수 있는 공급자가 있습니다.이 경우, 우리의 React.createContext() 는 다른 구성 요소에 AuthProvider 의 상태를 제공할 것이다.이렇게 하면 우리 프로그램의 모든 구성 요소는 사용자가 로그인하고 사용자의 속성에 접근했는지 확인할 수 있습니다.AuthProvider상태용user갈고리를 null로 초기화하고 user갈고리와 FirebaseuseState로 업데이트합니다.useEffect는 기본적으로 신분 검증 변경을 정탐하는 관찰자이다.이렇게 하면 사용자가 로그인하거나 로그아웃할 때마다 우리auth().onAuthStateChanged(setUser)의 상태는 우리onAuthStateChanged에서 자동으로 업데이트됩니다.
코드는 다음과 같습니다.

//1.
import React, { useEffect, useState } from "react";
import app from "./config";

//2.
export const AuthContext = React.createContext();

//3.
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    app.auth().onAuthStateChanged(setUser);
  }, []);

  return (
    <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
  );
};

6단계: AuthProvider를 응용 프로그램으로 가져옵니다.회사 명

이제 user 애플리케이션을 가져올 수 있습니다.js와 모든 구성 요소를 여기에 놓으십시오.이렇게 하면 응용 프로그램의 모든 구성 요소에 상하문을 전달할 수 있습니다. (구성 요소 트리의 맨 위 노드이기 때문입니다.)

import { AuthProvider } from "./Firebase/context";

function App() {
  return (
    <AuthProvider>
      <Router>
        <div className="App">
          <Nav />
          <Switch>
            <Route path="/signin" exact component={SignIn} />
          </Switch>
        </div>
      </Router>
    </AuthProvider>
  );
}

단계 7: 구성 요소 로그인

우리는 사용자가 응용 프로그램에 로그인할 수 있도록 로그인 단추를 표시하는 AuthProvider 를 만들었다.위의 AuthProvider 코드를 통해 알 수 있듯이 내 응용 프로그램은 경로 SignIn.js 에서 로그인 구성 요소를 나타낼 것이다.App.js 구성 요소에 로그인/등록 단추가 있습니다. 이 단추를 누르면 /signin 경로에 연결되어 로그인 단추를 표시합니다.이후에 우리는 우리의 Nav를 볼 것이다.
따라서 로그인 구성 요소는 다음과 같이 가져옵니다.

import React, { useContext } from "react";
import "../App.css";
import firebase from "firebase";
import { FirebaseAuth } from "react-firebaseui";
import { AuthContext } from "../Firebase/context";
import { Redirect } from "react-router-dom";

/signin는 어셈블리가 컨텍스트를 사용할 수 있도록 하는 React 갈고리입니다.

Nav.js는 우리 로그인 방법

의 양식화된 구성 요소이다

useContext 포함 FirebaseAuth 사용할 컨텍스트

AuthContext 로그인 후 사용자를 홈 페이지로 다시 지정할 수 있음

다음은 우리의 수입 성명입니다.

export default function SignIn() {
  //get the user state from the context
  const { user } = useContext(AuthContext); 

  //this is our config for FirebaseAuth
  const uiConfig = {
    signInFlow: "popup",
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccess: () => false,
    },
  };

//if user exists or signed in, we redirect the page to home, else display the sign in methods with FirebaseAuth
  return (
    <div>
      {!!user ? (
        <Redirect to={{ pathname: "/" }} />
      ) : (
        <div>
          <p>Please Sign In</p>
          <FirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
        </div>
      )}
    </div>
  );
}

마지막 단계: Nav의 조건 렌더링.회사 명

마지막으로, 현재 인증된 사용자가 없다면, 우리는 useContext 구성 요소를 만들어서 로그인 단추를 표시합니다.만약 사용자가 확실히 존재한다면, 우리는 사용자의 Redirect 및 Nav 속성에 접근해서 그 이름과 그림을 표시할 것입니다.더 많은 사용자 속성은 문서here에서 찾을 수 있습니다.
또한 사용자 로그아웃을 클릭할 때 실행되는 로그아웃 링크가 있습니다 displayName.
이것은 우리 것photoURL:

import { AuthContext } from "../Firebase/context.js";

export default function Nav() {
   //get the user state from context
  const { user } = useContext(AuthContext);

//if user exists, display user name and picture.
//else, show a sign in button instead
  return (
      <div className="account">
        {!!user ? (
          <div className="dropdown">
            <p>{`Welcome, ${user.displayName}`}</p>
            <div className="dropdown-content">
              <Link to="/">Create Stories</Link>
              <Link to="/">My Stories</Link>
              <Link onClick={() => app.auth().signOut()}>Sign Out</Link>
            </div>
          </div>
        ) : (
          <Link to="/signin">
            <button>SIGN IN/ REGISTER</button>
          </Link>
        )}
      </div>
  );
}

우리의 최종 결과

* 예!너무 멋있지 않아요?
한 마디로 하면React Context API는 상하문을 만들고 응용 프로그램의 다른 구성 요소에 데이터를 전달하는 아름답고 간단한 방법을 제공합니다.나는 본고가 상하문 API와 Firebase 인증을 어떻게 사용하는지 배우는 데 도움이 되기를 바란다.읽어주셔서 감사합니다.아래에 어떤 질문이나 평론을 남겨 주십시오.또는 아래의 참고 자료를 읽어서 우리가 오늘 토론한 내용에 대해 더 많이 알아보세요.다음까지 건배!

한층 더 읽다

React Context API Documentation

Firebase for Web Apps Documentation