[Firebase&Web연동 6] session을 이용해서 navigation bar 변경해주기
● 들어가기 전
지난 포스팅에서는 firebase 기본 모듈에 대해서 알아보았다. 또 그 모듈을 이용해서 로그인 하는 방법도 알아보았다. 이번 포스팅에서는 firebase에서 제공하는 session 기능을 이용해서 로그인성공하면 네비게이션바에 유저의 닉네임과 로그아웃이라는 글자가 생성이 되도록 해보겠다.
● 실습내용
1.로그인 성공했을 경우 index.html 페이지로가는데 이때 firebase 모듈을 이용해서 session 체크를 해서 로그인 한 유저이면 네비게이션 바 부분에 유저 이름과 로그아웃이라는 글자가 생성
● firebase session 함수
//로그인이 되어있으면 - 유저가 있으면, user를 인자값으로 넘겨준다.
firebaseEmailAuth.onAuthStateChanged(function (user) {
});
firebase 모듈객체에서 onAuthStateChanged 함수를 호출하면 콜백 함수로 user가 넘어온다. 이 안에 로그인한 유저 정보가 들어있다. 단지 onAuthStateChanged 함수만 호출해주기만 하면 된다. 편하지 않은가. 이 함수 안에서 user에 담긴 유저의 key를 이용해서 firebase database에 접근하여 유저의 정보를 가져올것이다. 여기서 인증부분의 키와 database 안에 있는 user의 key개념을 알아야 한다.
▲이것은 대쉬보드에서 인증메뉴를 클릭하면 나오는 화면인데 오른쪽 빨간색 점 부분을 보자. 이 키는 가입할때 firebase에서 자동으로 생성해주는 식별자 key이다. 관계형 데이터 베이스에서 pk 값이라고 보면 쉬울것이다.
▲이것은 대쉬보드에서 데이터베이스 메뉴를 클릭하면 나오는 메뉴이다. 위에 인증과는 다른 모듈을 사용해서 처리한다는 점을 알아두자! 나는 처음에 둘다 firebase의 같은 모듈로 처리하는 줄알고 혼동을 했었다. 이 부분에서 빨간점을 주목하자. 인증메뉴의 user pk값과 비슷해보이지 않는가? 같은 값이다. 유저가 가입을 누르고 firebase에서 인증을 할때 자동으로 생성되는 user pk값을 데이터 베이스에 users 밑에 user pk를 부모 키로 하는 참조 밑에다가 name: "test1"이라는 값을 저장해 놓았다. 즉 데이터 베이스에서도 인증의 user pk값이 식별자 역할을 하는 것이다. 그래서 앞으로 이 pk값을 어떻게 가져오고 처리하는 지가 중요하다.
//로그인이 되어있으면 - 유저가 있으면, user를 인자값으로 넘겨준다.
firebaseEmailAuth.onAuthStateChanged(function (user) {
});
아무튼 다시 firebase 세션 함수로 돌아와서 저 user는 인증!에 관련된 인자값이다. 그래서 user의 pk 값이 들어 있다. 그럼 이 pk 값으로 무엇을 할 수 있을까? 그렇다. 바로 데이터 베이스에 저장된 user의 정보를 가져올 수 있다! 왜냐면 데이터 베이스에 저장된 각 user의 식별자도 인증에서 생성된 pk 값이기 때문이다. 더 설명하면 혼란이 올것 같으니 여기서 그만. 암튼 user에서 가져온 key 값을 어디다 쓸까?
if (user) {
//조회 - 데이터 베이스에 저장된 닉네임을 현재 접속되어 있는 user의 pk key 값을 이용해서 가져오기
firebaseDatabase.ref("users/" + user.uid).once('value').then(function (snapshot) {
//자바스크립트 dom 선택자를 통해서 네비게이션 메뉴의 엘리먼트 변경해주기
document.getElementById("loginmenu").textContent = "로그아웃";
document.getElementById("loginmenu").href = "/logout.html";
document.getElementById("joinmenu").textContent = "반가워요! " + snapshot.val().name + " 님";
document.getElementById("joinmenu").href = "#";
name = snapshot.val().name; //유저 닉네임은 계속 쓸거기 때문에 전역변수로 할당
loginUserKey = snapshot.key; //로그인한 유저의 key도 계속 쓸 것이기 때문에 전역변수로 할당
userInfo = snapshot.val(); //snapshot.val()에 user 테이블에 있는 해당 개체 정보가 넘어온다. userInfo에 대입!
//alert(userInfo.userid);//uid는 db에서 user 테이블의 각 개체들의 pk 인데, 이 값은 인증에서 생성된 아이디의 pk 값과 같다. *중요!
return true
});
이렇게 쓴다. if 문으로 user 가 있는지 확인을 하고 있으면 firebaseDatabase.ref("users/" + user.uid).once('value').then(function (snapshot) 함수를 통해서 user의 정보를 가져 오는 것이다. 파이어 베이스는 참조 값으로 데이터 위치를 가져오기 때문에 ref함수 안에 인자 값을 보자.
바로 이곳에 접근을 하겠다라는 말이다. 접근에 성공하면 firebases는 user의 값을 snapshot이라는 인자에 담아서 넘겨준다. snapshot.val() 함수를 통해서 각 key 값에 접근을 할 수 있다. 신박하지 않은가? 아래에서는 javascript dom 선택자를 이용해서 네비게이션의 메뉴 이름에 접근하는 로직이다. 그리고 아래는 받아온 user 정보를 전역변수에 할당해 주는 부분이다. firebase 객체 전역변수 아래 넣어주자.
var firebaseEmailAuth; //파이어베이스 email 인증 모듈 전역변수
var firebaseDatabase; //파이어베이스 db 모듈 전역변수
var name; //유저 이름
var loginUserKey; //로그인한 유저의 부모 key
var userInfo; //로그인한 유저의 정보 object type
● index.html 소스
<!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">
<div class="jumbotron">
<h1>
<span style="color:white">당신의 생각을 말해줘요.</span>
</h1>
<p>
<span style="color:white">땡스피드는 오늘 하루 있었던 즐거운일, 감사한일, 행복한일을 적으며 하루를 마무리하는 게시판입니다.</span>
</p>
</div>
</div>
<br>
<!-- 점보트론 끝 -->
<!-- 쓰기 텍스트 필드 시작-->
<div class="container">
<div class="form-group">
<label for="comment">오늘의 감사:</label>
<textarea class="form-control" rows="5" id="comment" placeholder="오늘 하루 감사한일을 적어보세요:)"></textarea>
<br>
<!-- 쓰기 버튼 가운데 정렬 -->
<div class="text-center">
<button type="button" class="btn btn-success write" id="write" name="write">쓰기</button>
</div>
</div>
</div>
<!-- 쓰기 텍스트 필드 끝-->
<!-- 감사리스트 출력하기-->
<div class="container">
<hr>
<h3>감사리스트</h3>
<br>
<!-- 감사 리스트 붙일 곳 -->
<div class="thanksList"></div>
</div>
<!--스크립트 부분. 자신의 스크립트 코드로 변경하세요! -->
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
<script>
var firebaseEmailAuth; //파이어베이스 email 인증 모듈 전역변수
var firebaseDatabase; //파이어베이스 db 모듈 전역변수
var name; //유저 이름
var loginUserKey; //로그인한 유저의 부모 key
var userInfo; //로그인한 유저의 정보 object type
//파이어 베이스 초기화 코드
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();
//데이터베이스 모듈객체 가져오기
firebaseDatabase = firebase.database();
//세션 체크 함수
userSessionCheck();
//유저가 로그인 했는지 안했는지 확인해주는 함수
function userSessionCheck() {
//로그인이 되어있으면 - 유저가 있으면, user를 인자값으로 넘겨준다.
firebaseEmailAuth.onAuthStateChanged(function (user) {
if (user) {
//조회 - 데이터 베이스에 저장된 닉네임을 현재 접속되어 있는 user의 pk key 값을 이용해서 가져오기
firebaseDatabase.ref("users/" + user.uid).once('value').then(function (snapshot) {
//자바스크립트 dom 선택자를 통해서 네비게이션 메뉴의 엘리먼트 변경해주기
document.getElementById("loginmenu").textContent = "로그아웃";
document.getElementById("loginmenu").href = "/logout.html";
document.getElementById("joinmenu").textContent = "반가워요! " + snapshot.val().name + " 님";
document.getElementById("joinmenu").href = "#";
name = snapshot.val().name; //유저 닉네임은 계속 쓸거기 때문에 전역변수로 할당
loginUserKey = snapshot.key; //로그인한 유저의 key도 계속 쓸 것이기 때문에 전역변수로 할당
userInfo = snapshot.val(); //snapshot.val()에 user 테이블에 있는 해당 개체 정보가 넘어온다. userInfo에 대입!
//alert(userInfo.userid); //uid는 db에서 user 테이블의 각 개체들의 pk 인데, 이 값은 인증에서 생성된 아이디의 pk 값과 같다. *중요!
return true
});
} else {
$('#comment').val("로그인 하시면 사람들의 감사 리스트를 보실 수 있습니다. 로그인 해주실꺼죠^^?");
return false
}
});
}
</script>
</body>
</html>
● 실행
터미널을 열고 firebase 서버를 실행해주고(실행해주는 법이 기억이 안나면 지난번 포스팅 참고) 페이지를 확인하자. 네비게이션 bar 부분에 user 닉네임과 로그아웃글자를 넣어주었다. 마이페이지를 누르면 오류가 뜰것이다. 아직 안만들었기 때문에.. 나중에 만들어 줄것이다. 로그아웃 버튼을 눌러도 오류가 난다. 안만들어주었기 때문에. 다음 포스팅에서 로그아웃 버튼을 누르면 네비게이션 바 메뉴를 원래대로 바꾸고 session에도 로그아웃 처리를 해주도록 하겠다.
● 마무리
점점 난이도?가 높아지는 것 같아 보일 수 있다. 아직 javascript, jquery, 데이터베이스 기본 개념에 대해서 부족하신 분은 이 포스팅이 이해하기 어려울 수도 있을 것같다. 앞에서도 말했듯이 이번 포스팅 연재는 js, jquery, db에 대해서 알려주는 포스팅이 아니기 때문에 firebase에 집중해서 나가도록 하겠다. 다음 포스팅에서는 firebase 로그아웃 하는 법에 대해서 포스팅을 하겠다.(처음 포스팅에서 존댓말이었다가 갑자기 반말..죄송ㅠ)
thanksMemo.zip
댓글