- 회원가입 = 서비스를 사용할 때 email. password등 추가적인 정보들을 ServiceDB에 저장
- 로그인 = 기존의 입력 정보와 동일한 email. password를 입력하면 User를 기억하기 위한 Token발급
- 로그인 이후 = Token+원하는 정보를 Header에 넣고 요청을 하고 Server는 Token으로 User를 식별
Firebase
- 쉽고 빠르게 서버(백엔드)를 구축할 수 있는 서비스
- 프론트엔드/클라이언트 => 유저가 직접 보는 화면을 만들어서 제공
- 백엔드/서버 => DB에 유저의 정보 또는 제공해야할 데이터들을 관리
- Cloud Storage for Firebase => 문서나 사진등을 저장
- Firebase Hosting => 실제 만든 서비스를 브라우저에서 확인할 수 있는 기능
- Fire Cloud Messaging => 유저에게 직접적인 알림을 보내주는 기능
- Cloud FireStore => 서버에 문자나 숫자 등등 유저에 관한 정보를 저장하고 수정하고 삭제하는 기능
- Authentication => 회원가입, 로그인 기능
프로젝트 생성
- https://console.firebase.google.com/?hl=ko&pli=1
웹 앱 추가
로그인을 위한 Authentication 시작/설정
개발자 문서
- https://firebase.google.com/docs/auth/web/password-auth?authuser=0&hl=ko
암호 기반 계정 만들기
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
이메일 주소와 비밀번호 사용자 로그인
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
login.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<form>
<h1>회원가입</h1>
<div> email : <input type="email" id="joinEmail"></div>
<div> password : <input type="password" id="joinPassword"></div>
<button type="submit" id="signButton">회원가입</button>
<button>로그인</button>
</form>
<form>
<h1>로그인</h1>
<div> email : <input type="email" id="loginEmail"></div>
<div> password : <input type="password" id="loginPassword"></div>
<button type="submit" id="loginButton">로그인</button>
<button>회원가입</button>
</form>
<script type="module">
import {initializeApp} from "https://www.gstatic.com/firebasejs/9.13.0/firebase-app.js";
import {getAnalytics} from "https://www.gstatic.com/firebasejs/9.13.0/firebase-analytics.js";
import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/9.13.0/firebase-auth.js";
const firebaseConfig = {
apiKey: "AIzaSyB6hAXtxgnzVAmXyQX81qbGmrZyi-k2T6c",
authDomain: "easylogin-85d04.firebaseapp.com",
projectId: "easylogin-85d04",
storageBucket: "easylogin-85d04.appspot.com",
messagingSenderId: "351071763163",
appId: "1:351071763163:web:25dacc2d8542395931aafe",
measurementId: "G-R7J9ZDFPD2"
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth();
document.getElementById('signButton').addEventListener('click', (event) => {
event.preventDefault()
const joinEmail = document.getElementById('joinEmail').value;
const joinPassword = document.getElementById('joinPassword').value;
createUserWithEmailAndPassword(auth, joinEmail, joinPassword)
.then((userCredential) => {
// join Seccessed
const user = userCredential.user;
console.log("userCredential===>", userCredential)
console.log("user===>",user)
})
.catch((error) => {
// Failed
const errorCode = error.code;
const errorMessage = error.message;
console.log("회원가입 실패")
console.log("errorCode===>",errorCode)
console.log("errorMessage",errorMessage)
});
});
document.getElementById('loginButton').addEventListener('click', (event) => {
event.preventDefault()
const loginEmail = document.getElementById('loginEmail').value;
const loginPassword = document.getElementById('loginPassword').value;
signInWithEmailAndPassword(auth, loginEmail, loginPassword)
.then((userCredential) => {
// login Seccessed
const user = userCredential.user;
console.log("userCredential===>",userCredential)
console.log("user===>",user)
})
.catch((error) => {
// Failed
const errorCode = error.code;
const errorMessage = error.message;
console.log('로그인 실패')
console.log('errorCode===>',errorCode)
console.log('errorMessage===>',errorMessage)
});
});
</script>
</body>
</html>
- firebaseConfig => firebase 설정값들
- const auth = getAuth() => 사용자 인증정보 가져오기
- document.getElementById('signButton').addEventListener('click', (event) => signButton을 클릭했을 때 실행
- event.preventDefault() => <a>,<input>,<textarea>의 기본 동작을 막아줌
- document.getElementById('?').value => 해당 ID의 입력값을 가져옴
- then, catch => try, catch문
- const user = userCredential.user => 성공시 user정보를 가져옴
- errorMessage = error.message => 실패시 에러 메시지
이미 있는 Email로 회원가입 시도
- 이미 사용 중인 Email임을 error code, error message가 알려줌
비밀번호를 틀리게 입력했을 시
- 마찬가지로 error code, error message가 알려줌
로그인 성공 시
댓글