다음과 같은 이전 글에서 Firebase를 이용한 서비스에서, 사용자 등록을 간단히 몇 줄로 처리하는 방법을 소개한 바 있었다.
https://blog.naver.com/mythee1/223495997534
Firebase에서는 이렇게 서비스에 가입한 사용자들의 로그인도, 거의 비슷한 코드를 이용하여 역시 간단하게 처리할 수 있다. Firebase에서는 로그인을 “signin”이라는 이름을 사용한다.
바로, 사용자 가입 처리에 사용했던 “firebase.auth().createUserWithEmailAndPassword(이메일, 패스워드).then((result)=>{” 문법을 다음과 같이 Create에서 signin으로만 변경하여 사용하면 된다.
firebase.auth().signInWithEmailAndPassword(이메일, 패스워드).then((result)=>{
이 문법을 사용하여 구현한 모습은 다음과 같으며,
이를 브라우저에서 실행시키면 다음과 같은 로그인 화면이 되며,
완성된 전체 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>키워드 상품찾기</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
const firebaseConfig = { 가입정보
};
firebase.initializeApp(firebaseConfig);
</script>
<!-- 콘테이너 생성 -->
<div class="container mt-3">
<div class="mb-3">
<input type="email" class="form-control" placeholder="E-mail" id="email-input">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="Password" id="pw-input">
</div>
<button type="submit" class="btn btn-warning" id="Log-in">Log-In</button>
</div>
<!-- 콘테이너 생성 -->
<div class="container mt-4">
<script>
const db = firebase.firestore( );
const storage = firebase.storage( );
$('#Log-in').click(function( ){
var 이메일 = $('#email-input').val();
var 패스워드 = $('#pw-input').val();
firebase.auth().signInWithEmailAndPassword(이메일, 패스워드).then((result)=>{
$('#email-input').val("")
$('#pw-input').val("") ;
setTimeout(() => window.location.href = "index.html", 500)
}).catch((error)=>{
const errorCode=error.code;
const errorMessage = error.message;
$('#email-input').val("")
$('#pw-input').val("")
})
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>