[Firebase&Web연동 7] firebase 로그아웃 함수를 이용해서 로그아웃 기능 구현
● 들어가기 전
지난 포스팅에서 firebase sessoin을 알아보았다. 이번시간에는 로그아웃 함수를 이용해서 session처리를 해주는 방법에 대해서 알아보겠다. 이미 firebase에서 해당 함수를 모두 구현해놓았기 때문에 우리는 그 함수가 무엇인지 찾고, 올바르게 사용해주면 된다. 미니카로 치면 만들어져있는 모터나 바퀴를 해당위치에 넣어주기만 하면 되는것이다. 관계형 db에서는 모터와 바퀴를 직접 만들었다면 firebase에서는 붙여주기만 하면 된다.
● 실습내용
1.firebase 레퍼런스로 가서 로그아웃 함수 확인
2.로그아웃 페이지 만들기
3.로그아웃 처리
● firebase 레퍼런스로 가서 로그아웃 함수 확인
<!DOCTYPE html>
<html lang="ko">
<head>
<title>감사일기 - 로그아웃</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 네비게이션 바 시작 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">땡스피드게시판</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="/">Home</a>
</li>
<li>
<a href="/mypage.html">마이페이지</a>
</li>
<li>
<a id="joinmenu" href="/join.html">가입</a>
</li>
<li>
<a id="loginmenu" href="/login.html">로그인</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<br>
<br>
<br>
<br>
<br>
<!-- 네비게이션 바 끝 -->
<div class="container">
<h1>성공적으로 로그아웃되었습니다. 감사합니다:)</h1>
</div>
<!--스크립트 부분. 자신의 스크립트 코드로 변경하세요! -->
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
<script>
var firebaseEmailAuth; //파이어베이스 email 인증 모듈 전역변수
//파이어 베이스 초기화 코드
var config = {
apiKey: "AIzaSyA9oNOMkppw2zOBFItjcVvyZ--f1onvaOY",
authDomain: "thanksmemo-19012.firebaseapp.com",
databaseURL: "https://thanksmemo-19012.firebaseio.com",
projectId: "thanksmemo-19012",
storageBucket: "thanksmemo-19012.appspot.com",
messagingSenderId: "482108959359"
};
//파이어베이스 초기화
firebase.initializeApp(config);
//인증모듈 객체 가져오기
firebaseEmailAuth = firebase.auth();
//이 부분에 firebase 로그아웃 함수 삽입을 해주세요~~
});
</script>
</body>
</html>
● firebase logout 함수
firebaseEmailAuth.signOut().then(function() {
//alert("로그아웃 되었습니다")
//메인 페이지로 이동시키고 세션 저장시키기
window.location.href = "/index.html"
}).catch(function(error) {
if(error){
alert("로그인 실패");
}
});
파이어베이스 로그아웃 함수는 파이어 베이스 인증 모듈 객체를 통해 호출한다. 위 소스 코드처럼 .signOut()을 호출 하자. 그리고 .then() 함수를 호출 하면 로그아웃이 성공적으로 이루어지고 then 안의 코드가 실행이 된다.아래 코드는 화면을 메인 화면으로 이동시키는 javascrit 코드다. 에러는 항상 존재하기 때문에 firebase에서 에러를 직접 처리하는 catch 함수도 구현을 해 놓았다. 반드시 catch 함수를 이용해서 에러 처리를 해주자. 이 소스 코드를 위쪽에 // 이부분에 firebase 로그아웃 함수 삽입부분에 넣어주자.
● 실행
서버를 작동시키고 로그인 로그아웃을 한번 해보자. 성공적으로 로그아웃 되셨습니다. 화면이 뜨고 메인화면으로 바로 이동하는것일 볼 수 있을 것이다. 그리고 네비게이션 부분에도 가입, 로그인 메뉴가 다시 활성화가 된다.
● 마무리
이쯤되면 firebase가 어떤 녀석인지 대충감을 잡았으리라 본다. 서버쪽 작업을 하다보면 login, logout, sessoin 부분을 처리하는것만으로도 많은 시간이 걸린다. 모델링, 유효성 검사도 해줘야하고, 보안도 신경써줘야한다. 일인개발자 혹은 스타트업 개발자들에게는 신박한 서비스가 아닐 수 없다. (물론 아쉬운 부분도 존재한다. 명이있으면 암도 있는법) 다음 포스팅에서는 메인페이지에서 로그인 성공하면 글을 쓸 수 있도록 작업을 해보겠다.
● 소스코드
thanksMemo.zip보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다
'Firebase > Firebase&웹' 카테고리의 다른 글
| [Firebase&Web연동 9] 로그인 한 사용자에게만 글 리스트 뿌려주기 (4) | 2018.02.26 |
|---|---|
| [Firebase&Web연동 8] 로그인 한 사용자만 글쓰기 기능구현 (4) | 2018.02.26 |
| [Firebase&Web연동 6] session을 이용해서 navigation bar 변경해주기 (3) | 2018.02.24 |
| [Firebase&Web연동 5] 로그인 기능 구현 (2) | 2018.02.23 |
| [Firebase&Web연동 4] email 가입 기능 구현하기 및 설정 (14) | 2018.02.23 |
댓글