반응형
개요
- Node.js Firebase 연동, 데이터 파싱 collection, getDocs
- Node.js Firebase 연동, 데이터 파싱(2) getDoc, doc, dayjs
- Node.js Firebase 연동, 데이터 추가 Timestamp, addDoc
- Node.js Firebase 연동, 데이터 수정 updateDoc
- Node.js Firebase 연동, 데이터 삭제 deleteDoc
Firebase의 Authentication를 사용하여 이메일 기반 로그인을 구현해 보자
인증이 된 사용자만 게시판에 글을 작성하게 해보자
firebase-auth CDN 추가
기존에 작성했던 app.js 파일에 firebase-auth CDN을 추가해 주고, getAuth를 임포트 해준 뒤 초기화를 진행한다.
// DB연동에 사용했던 app.js에 추가해 준다.
import { getAuth } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js"
const auth = getAuth(app);
export{ auth }; // 실제 파일엔 export시 db 포함
로그인 기능 추가
auth폴더를 별도로 생성해 준다.
해당 폴더 아래에는 인증 관련 js파일과 html을 생성해 준다.
- auth.js : 로그인, 회원가입, 로그아웃 기능을 firebase auth랑 연동할 코드 작성
- login.html : 로그인 화면 구현
- signup.html : 회원가입 화면 구현
추가로, 게시판의 메인 화면인 index.html에 로그인 및 회원가입 html로 이동할 링크를 설정해 준다.
코드 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판 구현</title>
</head>
<body>
<a href="./article/list.html">게시판으로 가기</a>
<br />
<a href="./auth/login.html">로그인</a>
<br />
<a href="./auth/signup.html">회원가입</a>
</body>
</html>
결과
auth.js
해당 코드에서는 로그인 뿐만 아니라 추후 작성할 회원가입, 로그아웃 기능도 구현할 것이다.
코드
// auth import
import { auth } from "../app.js";
// auth CDN에서 기능 추가
import {
signInWithEmailAndPassword, // 로그인
createUserWithEmailAndPassword, // 회원가입
signOut, // 로그아웃
} from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
// 로그인 구현
async function login(email, password) {
try {
await signInWithEmailAndPassword(auth, email, password);
return true;
} catch (error) {
return error.code;
}
}
// 회원가입 구현
async function signup(email, password) {
try {
await createUserWithEmailAndPassword(auth, email, password);
return true;
} catch (error) {
return error.code;
}
}
// 로그아웃 구현
async function logout() {
try {
await signOut(auth);
return true;
} catch (error) {
return error.code;
}
}
export { login, signup, logout };
login.html
코드
<html>
<body>
<h1>로그인</h1>
<div>
<input class="email-input" type="email" placeholder="이메일" />
</div>
<div>
<input class="pw-input" type="password" placeholder="비밀번호" />
</div>
<button class="login-btn">로그인</button>
<script type="module">
// login 함수 import
import { login } from "./auth.js";
// 이메일, 비밀번호, 로그인 버튼 참조
const emailInput = document.querySelector(".email-input");
const pwInput = document.querySelector(".pw-input");
const loginBtn = document.querySelector(".login-btn");
// 콜백 함수 초기화
async function handleLogin() {
if (
!emailInput.value ||
emailInput.value.trim() === "" ||
!pwInput.value ||
pwInput.value.trim() === ""
) return; // 입력값이 빌 경우 바로 return
// 입력값이 있을 경우 login 함수 실행
const result = await login(emailInput.value, pwInput.value);
if (result === "auth/invalid-email") { // 이메일이 아닌 형식을 넣었을 때
alert("유효한 이메일 형식이 아닙니다.");
return;
} else if (result === "auth/invalid-credential") { // 일치하는 사용자가 없을 때
alert("이메일이 등록되지 않았거나, 비밀번호가 틀렸습니다.");
return;
} else if (result === true) { // 일치하는 사용자가 있을 때
alert("로그인 성공");
location.href = "../article/list.html"; // 게시글 목록으로 이동한다.
}
}
loginBtn.addEventListener("click", handleLogin); // 로그인 버튼에 이벤트 핸들러 추가
</script>
</body>
</html>
결과
기능 테스트
아무것도 입력하지 않은 Case
로그인 버튼을 눌러도 반응이 없다.
이메일 형식을 입력하지 않은 Case
미리 설정해둔 문구가 alert 된다.
이메일 비밀번호가 일치하는 사용자가 없는 Case
위 케이스와 상동
이메일 비밀번호가 일치하는 사용자가 있는 Case
로그인 성공 후 게시글 목록으로 이동하게 된다.
728x90
반응형
'웹(WEB) > 자바스크립트(JS)' 카테고리의 다른 글
| Node.js Firebase 연동, 로그아웃 구현하기 (0) | 2024.08.29 |
|---|---|
| Node.js Firebase 연동, 회원가입 구현하기 (0) | 2024.08.29 |
| Node.js Firebase 연동, 데이터 삭제 deleteDoc (0) | 2024.08.28 |
| Node.js Firebase 연동, 데이터 수정 updateDoc (0) | 2024.08.28 |
| Node.js Firebase 연동, 데이터 추가 Timestamp, addDoc (0) | 2024.08.28 |