Firebase를 사용하여 Node JS에서 인증 처리 방법🔥

Node로 API를 구축하기 시작했을 때 가장 먼저 떠오르는 것은 인증입니다.
그리고 우리는 JWT에서 암호를 산열하고 JWT의 키를 정의하는 것을 고려한다. 작은 서비스나 API를 구축해야 할 때 이것은 좀 지루하다.
본고에서 우리는 구글 로그인을 어떻게 사용하는지 보여줄 것이다. 그러나 이것은 Firebase에서 사용할 수 있는 다른 로그인 공급업체에도 적용된다.설정 방법에 대한 자세한 내용은 Firebasedocs의 링크를 참조하십시오.

화기

Firebase는 구글의 모바일 응용 프로그램 개발 플랫폼으로 당신의 응용 프로그램을 구축하고 개선하며 발전시키는 데 도움을 줍니다.Firebase 내부에 우리는 신분 검증, 알림 전송, 실시간 데이터베이스 등 모듈이 있고 더 멋진 것이 있다.

우리 어떡하지?

Firebase를 통해 요청된 NodeJS 백엔드를 확인합니다.
우선, 우리는 Firebase 에서 프로젝트를 만들어야 한다.

Firebase 설정

초기 화면은 Firebase에서 새 프로젝트를 만듭니다. 클릭Create Project
현재 응용 프로그램의 이름을 지정하는 화면이 있습니다. 예를 들어 내 프로젝트 이름은 firebase-auth-server
현재 Firebase에서 프로젝트를 만들고 있습니다.

생성되면 Firebase 콘솔에서 여러 서비스를 포함하는 대시보드를 제공할 것입니다. Authentication 메뉴를 선택하십시오.
그리고 Firebase가 제공하는 공급업체 목록이 있습니다. 하지만 우선 인증 근거Google를 선택해야 합니다.

너무 좋아요.Firebase는 현재 구글의 우리 전단에 대한 인증을 받을 수 있다.

백엔드 설정

현재 프로젝트를 시작하고 express를 설치해야 합니다.

mkdir server
npm init -y
npm install express cors
npm install -D nodemon

그 다음에 프로젝트의 루트에 index.js 라는 파일을 만들고 다음 코드를 만들어야 합니다.

const express = require("express");

const app = express();

app.use("/", (req, res) => {
  res.send("Hello World");
});

app.listen(4000, () => console.log("The server is running at PORT 4000"));

위의 코드는 기본적인 express 서버를 만들 것입니다. 이것은 우리의 시작입니다.
그 다음에 우리는 다음 코드에 따라 기본 단점을 만들어야 한다.

/**
 * index.js
 */
const express = require("express");
const cors = require("cors");
const authMiddleware = require("./auth-middleware");

const app = express();
app.use(cors());

const books = [
  {
    id: 1,
    name: "Harry Potter",
    image:
      "https://pmpub-catalogue.s3-eu-west-1.amazonaws.com/covers/web/9781781100240.jpg",
  },
  {
    id: 2,
    name: "Clean Code",
    image:
      "https://images-na.ssl-images-amazon.com/images/I/41jEbK-jG+L._SX374_BO1,204,203,200_.jpg",
  },
  {
    id: 3,
    name: "Javascript: The good parts",
    image: "https://images-na.ssl-images-amazon.com/images/I/81kqrwS1nNL.jpg",
  },
];

app.use("/", authMiddleware);

app.get("/books", (request, response) => {
  return response.send({ books });
});

app.listen(4000, () => console.log("The server is running at PORT 4000"));

현재, 우리는 package.json 파일을 되돌려주고, start 스크립트를 추가하고, 코드를 테스트해야 합니다.

{
  "name": "firebase-auth-server",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Nikollas Betiol",
  "license": "MIT",
  "scripts": {
    "start:dev": "nodemon index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.3"
  }
}

그 다음에 우리의 package.json 파일은 위의 코드와 유사해야 한다.
그리고 우리는 응용 프로그램을 실행하기 위해 script 을 실행할 수 있다.

npm run start:dev

네비게이션 http://localhost:4000/books지금 너는 반드시 이것이 있어야 한다.

좋습니다. 저희 API에 단점이 하나 있습니다. 책 목록을 되돌려줍니다. 하지만 모든 사람이 저희 단점에 접근할 수 있다는 것을 알 수 있습니다. 저희는 그러기를 원하지 않습니다.🤔
이 문제를 복구하려면 firebase-admin 를 사용하십시오. 이것은 Firebase와 통합된 라이브러리입니다.
여기에서 우리는 설치해야 한다firebase-admin

npm install firebase-admin

Firebase 컨트롤러로 돌아가서 인증서를 다운로드합시다.이 단계를 수행하려면 here 을 클릭합니다.firebase 폴더에 파일을 만들고 저장합니다.
코드는 아래와 같습니다.

/*
  firebase/index.js
*/
const firebase = require("firebase-admin");

const credentials = require("./credentials.json");

firebase.initializeApp({
  credential: firebase.credential.cert(credentials),
  databaseURL: "https://<yourproject>.firebaseio.com",
});

module.exports = firebase;

현재 요청을 필터하고 권한을 부여하거나 거부할 수 있는 auth 중간부품을 만들어야 합니다.
그리고 auth-middleware.js라는 파일을 만들어야 합니다

touch auth-middleware.js

다음 코드 사용하기

/*
    auth-middleware.js
*/
const firebase = require("./firebase/admin");

function authMiddleware(request, response, next) {
  const headerToken = request.headers.authorization;
  if (!headerToken) {
    return response.send({ message: "No token provided" }).status(401);
  }

  if (headerToken && headerToken.split(" ")[0] !== "Bearer") {
    response.send({ message: "Invalid token" }).status(401);
  }

  const token = headerToken.split(" ")[1];
  firebase
    .auth()
    .verifyIdToken(token)
    .then(() => next())
    .catch(() => response.send({ message: "Could not authorize" }).status(403));
}

module.exports = authMiddleware;

그러면 index.js 파일로 돌아가서 auth-middleware 중간부품을 추가할 수 있습니다.

/**
 * index.js
 */
const express = require("express");
const authMiddleware = require("./auth-middleware");

const app = express();

const books = [
  { id: 1, name: "Harry Potter" },
  { id: 2, name: "Clean Code" },
  { id: 3, name: "Javascript: Good practices" },
];

app.use("/", authMiddleware);

app.get("/books", (request, response) => {
  return response.send({ books });
});

app.listen(4000, () => console.log("The server is running at PORT 4000"));

쿨, 나는 백엔드가 이미 백엔드에서 요청을 받을 준비가 되어 있다고 생각한다!

프런트 엔드

프로젝트 만들기 create-react-app 를 시작합시다
CSShere를 찾을 수 있습니다.

npm install -g create-react-app
create-react-app frontend
cd frontend/
npm install firebase react-router-dom react-router

현재 우리는 두 개의 파일을 만들어야 한다.

touch Login.js
touch BookList.js

파일Login.js에 다음 코드를 붙여넣습니다.

/**
 * src/Login.js
 */
import React from "react";

export default function Login() {
  return <h1>Login</h1>;
}

파일BookList.js에서 코드 붙여넣기:

/**
 * src/BookList.js
 */
import React from "react";

export default function BookList() {
  return <h1>BookList</h1>;
}

응용 프로그램에서 두 개의 중요한 파일을 만들었습니다. App.js 를 사용react-router으로 설정합니다.NOTE: THIS IS NOT THE BEST WAY TO CREATE AN AUTHORIZATION FLOW, THIS PROJECT IS JUST AN EXAMPLE


/**
 * src/App.js
 */
import React from "react";
import "./App.css";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Login from "./Login";
import BookList from "./BookList";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route path={"/login"}>
            <Login />
          </Route>
          <Route path={"/book-list"}>
            <BookList />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

이제 이 문서Setup Web Project Configuration에 따라 구성을 가져올 수 있습니다.


firebase.js 폴더에 src 라는 파일을 만들고 다음 코드를 붙여넣습니다. 이 코드로 Firebase 설정을 만듭니다.

/**
 * src/firebase.js
 */
import firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
  apiKey: "your apiKey here",
  authDomain: "your authDomain here",
  databaseURL: "your databaseURL here",
  projectId: "your projectId here",
  storageBucket: "your storageBucket here",
  messagingSenderId: "your messagingSenderId here",
  appId: "your appId here",
};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();

export { auth, firebase };

이제 파일Login.js으로 돌아가서 코드를 붙여넣습니다.
코드는 다음과 같습니다.

/**
 * src/Login.js
 */
import React from "react";
import { useHistory } from "react-router-dom";
import { auth, firebase } from "./firebase";

export default function Login() {
  const history = useHistory();
  async function googleLogin() {
    //1 - init Google Auth Provider
    const provider = new firebase.auth.GoogleAuthProvider();
    //2 - create the popup signIn
    await auth.signInWithPopup(provider).then(
      async (result) => {
        //3 - pick the result and store the token
        const token = await auth?.currentUser?.getIdToken(true);
        //4 - check if have token in the current user
        if (token) {
          //5 - put the token at localStorage (We'll use this to make requests)
          localStorage.setItem("@token", token);
          //6 - navigate user to the book list
          history.push("/book-list");
        }
      },
      function (error) {
        console.log(error);
      }
    );
  }
  return (
    <div>
      <button onClick={googleLogin} className="login-button">
        GOOGLE
      </button>
    </div>
  );
}

그리고 터미널로 돌아가서 응용 프로그램을 실행합니다.

npm start

시작하면 React에서 브라우저 창이 열립니다.
탐색 http://localhost:3000/login당신은 GOOGLE 단추를 클릭할 수 있습니다

쿨, 로그인하면 책갈피로 방향을 바꿔야 해.BookList.js 구성 요소를 되돌려주고 아래 코드를 붙여넣기

/**
 * src/BookList.js
 */
import React, { useEffect, useState } from "react";

export default function BookList() {
  //create state to store our book list
  const [books, setBooks] = useState([]);

  useEffect(() => {
    async function loadBooks() {
      //fetch the book list
      const request = await fetch("http://localhost:4000/books", {
        //use the authorization
        headers: {
          Authorization: "Bearer " + localStorage.getItem("@token"),
        },
      });

      const allBooks = await request.json();
      //set the book list on state
      setBooks(allBooks.books);
    }
    //invoke the function
    loadBooks();
  }, []);

  return (
    <div className="container">
      <h1>BookList</h1>
      {/* map the book list to show book name and image */}
      {books.map((book) => (
        <div key={book.id} className="booklist">
          <img className="image" alt={book} src={book.image} />
          <h3>{book.name}</h3>
        </div>
      ))}
    </div>
  );
}

아니오, 우리는 책 목록을 볼 수 있습니다/

결론

서버에서 Firebase auth를 사용하기 시작할 수 있습니다.더 많은 탐색Firebase Docs의 가능성을 볼 수 있습니다.
Firebase auth와의 통합을 만드는 방법을 배우는 데 도움이 되기를 바랍니다. 원본 코드를 보려면 제 Github 를 보십시오.
고마워요/