콩이의 Tech 따라잡기

Firebase 배우기 17 – Log-Out 페이지 만들기

Firebase 배우기 17 – Log-Out 페이지 만들기

Firebase를 이용하여 웹서비스를 만드는 경우, 사용자의 가입을 처리하고 로그인 상태에 따라 차별화된 페이지와 메뉴를 보여주는 것이 필요한데,

​

서비스 가입 처리에 대해서는 https://blog.naver.com/mythee1/223495997534 글에서,

그리고, 사용자의 로그인 처리에 대해서는 https://blog.naver.com/mythee1/223496032686 글에서 소개한 바 있었다.

​

그런데 사용자의 웹서비스가 완료되면, 서비스 로그아웃의 필요도 있다.

한편으로는 굳이 이 화면이 필요할까 싶기도 하지만, 누군가에게는 궁금증에 대한 참고가 될 수도 있을듯하여 정리해 둔다.

​

가장 핵심을 먼저 소개하자면, 파이어 베이스 서비스 로그아웃 처리는 다음 SignOut 구문을 이용하면 쉽게 해결할 수 있다. 우리나라에서는 로그인 또는 로그아웃이란 단어를 주로 사용하지만, 서양권에서는 SIgn-In, Sign-Out 이란 단어를 사용하는 것만 제외하면 예상에서 벗어나지 않고 쉽게 만들 수 있는 구문이다.

​

그런데 실제로는 단순히 이 SignOut 구문 외에, 사용자의 로그아웃 의사를 확인하는 등의 과정과, 오류 발생 시 해당 사항을 사용자에게 알리는 등의 과정을 추가하여 다음과 같이 구성하는 게 바람직하다.

​

이렇게 구성된 전체 코드(메뉴바를 추가하기 전)는 다음과 같다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Log-Out</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">
<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 src="/firebaseConfig.js"></script>
</head>
<body>
<script>
const db = firebase.firestore( );
const storage = firebase.storage( );
if (confirm('정말로 Log-Out 하시겠습니까?')) {
        firebase.auth().signOut().then((result)=>{
setTimeout(() => window.location.href = "index.html", 500)
}).catch((error)=>{
const errorCode=error.code;
const errorMessage = error.message;
alert(`로그아웃에 실패했습니다. 오류 코드: ${errorCode}, 오류 메시지: ${errorMessage}`);
})
}
</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>

​