Learn new Get simpler Do more

이제 인증의 마무리단계를 하겠습니다. 사용자는 한번만 좋아요 버튼을 클릭 할 수 있게 버튼 이름을 변경하고 로그인 한 사용자는 이름이 가지고 있으므로 이름이 자동으로 뿌려지도록 하는 작업등을 해 보겠습니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import NotFoundPage from './NotFoundPage'; import CommentsList from '../components/CommentsList'; import AddCommentForm from '../components/AddCommen..

지금까지 서버에서 인증 토큰을 받아 처리하는 작업을 진행했었습니다. 그럼 이제부터는 서버에서 참조하는 인증 코드를 클라이언트에서 처리하는 작업을 하겠습니다. 우선 ArticlePage.js에서는 로그인 한 사용자가 있으면 그 로그인 사용자의 인증 토큰을 가지고 와서 서버에 Axios로 요청을 할때 Header에 인증 토큰을 실어서 같이 보내는 작업을 합니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import NotFoundPage from './NotFoundPage'; import CommentsList ..

이제 본격적으로 좋아요를 한번 클릭 할수 있고 댓글을 사용자 인증이 된 상태에서만 될수 있도록 리팩토링을 해보겠습니다. 먼저 사용자가 아직 로그인 하지 않은 경우 사용자가 위의 엔드포인트에 요청할수 없도로 위의 두 경로(put upvote request, post comment request)에만 적용되는 또 다른 미들웨어를 추가 해줍니다. 그리고 좋아요 upvote에는 좋아요 버튼을 누른 사용자의 id를 데이터베이스에 같이 저장하는 작업을 합니다. 그리고 댓글 comment에는 이름과 댓글이외에 email 정보도 함께 추가합니다. 변경된 코드는 다음과 같습니다. server.js import fs from 'fs'; import admin, { auth } from 'firebase-admin'; im..

적절한 사용자가 접속했는지 여부를 판단하기 위해서는 Axios를 통해 페이지를 요청하는것 이외에 auth-token을 통해 자격증명을 확인해야 합니다. 그럼 Front End에서 오는 요청이 적절한 auth-token을 포함하고 있는지 확인하는 작업을 Firebase admin package를 통해 하겠습니다. Express 미들웨어를 통해 request.body을 정보를 받은것처럼 auth-token을 처리하기 위해 미들웨어 추가(app.use)를 통해 처리합니다. 또한 페이지를 불러올때에는 사용자의 로그인 여부는 상관이 없이 보여줘야 하나 이전에 좋아요를 눌렀는지 확인을 하기 위해 Get 요청페이지에 사용자 좋아요에 관한 정보도 같이 로드하요 요청시 그 정보도 함께 Front End를 응답하는 처리도..

Front End쪽에 Firebase를 통해 사용자 인증을 하였으므로 이제는 Back End인 Express Node.js에 Firebase Auth를 통해 사용자 인증을 추가하겠습니다. 이 작업은 Firebase에서 발행하는 private key를 통해 서버에 제대로 된 사용자 접속이 있는지 알아볼수 있고 또 한번만 좋아요를 누른다던지 댓글을 달수 있는지 여부를 확인할수 있습니다. 그럼 Back End에 Firebase Auth를 추가하기 위해 먼저 Firebase Auth 프로젝트 홈페이지에서 사용자 인증에 관한 private key를 생성하겠습니다. 이 키는 프로젝트의 모든 변경을 할수 있으므로 유출되지 않게 최대한 조심합니다. Private key를 생성하는 방법은 다음과 같습니다. 우선 Fire..

계정이 없는 사용자를 위해 사용자를 만들수 있는 계정 생성 페이지를 만들겠습니다. src폴더안의 pages폴더에 CreatAccountPage.js파일을 생성합니다. 이전에 만들었던 LoginPage.js와 비슷하지만 패스워드 재확인 필드만 더 추가해주면 코드는 다음과 같습니다. CreateAccountPage.js import { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'; const CreateAccountPage = () => { const [email, setEmail] =..

사용자가 로그인 페이지를 통해 블로그에 로그인을 할수 있습니다. 다음으로는 사용자가 로그인을 했는지 여부에 따라 페이지를 조정할수 있는 작업을 합니다. ArticlePage에서 이제 로그인 사용자만 좋아요를 한번만 누를 수있다던지 댓글을 로그인 한 상태에서만 작성할수 있는 제한등을 설정 합니다. 그러기 위해서는 Article페이지에 이 설정을 알려줄수 있는 작업을 해야 합니다. 그래서 이제부턴 Custom auth hook를 작성하도록 합니다. 현재 로그인 한 사용자들이 사용하고 훨씬 쉽게 찾을 수 있는 사용자 지정 Hook를 생성합니다. 그래서 src폴더 아래에 새로운 hooks라는 폴더를 먼저 생성합니다. 여기에는 custom hook를 저장시키는 용도로 사용합니다. 그 후 사용자 관리를 할 useU..

Firebase 연결 작업이 끝났으므로 실제로 로그인 페이지를 구현해 보도록 합니다. 우선 src폴더 안의 pages폴더에 LoginPage.js파일 생성하고 코드를 작성합니다. LoginPage.js import { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'; const LoginPage = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, se..

사용자 등록이 완료되었으니 블로그 Front End에 Firebase Auth를 추가하도록합니다. 왼쪽 메뉴에서 Project Overvie 메뉴를 클릭하면 다음과 같이 작성한 프로젝트 메인 페이지가 보입니다. Get started by adding Firebase to your app이라는 문구가 보이면서 추가할 방법을 선택할수 있습니다. 여기서는 Web에 추가할 예정이므로 버튼을 클릭합니다. Register App 설정이 보이고 App의 닉네임은 별도로 구분하기 위한 이름으로 적당한 이름으로 정한 후 Firebase hosting을 사용을 하지 않을 예정이므로 체크를 하지 않은 후에 Register app 버튼으로 진행합니다. 그 다음으로 이제 블로그 Front End에서 사용할수 있는 방법이 나옵니..

지금까지 블로그에 데이터베이스를 연결했습니다. 다음으로 할 일은 블로그에 기본 사용자 인증을 추가하는 작업입니다. 코드로 사용자 인증을 넣을수도 있지만 많은 양의 노력이 필요하므로 여기서는 구글의 Firebase Auth로 인증작업을 진행합니다. Firebase Auth는 기본적으로 모든 사용자의 정보와 비밀번호를 매우 안전한 방식으로 저장하는 서비스입니다. 이것을 사용함으로써 Google의 보안정책에 편승할수 있으며 구글 서비스를 사용하는데에 제한사항이 줄어들게 될것입니다. 그럼 지금부터 Firebase Auth에서 프로젝트를 생성하여 사용자 관리를 해보고 나중에 블로그에 연결하도록 하겠습니다. 프로젝트를 만들기 위에 다음 URL로 접속을 합니다. http://console.firebase.google..