본문 바로가기
Firebase/Firebase&웹

[Firebase&Web연동 5] 로그인 기능 구현

by 인생여희 2018. 2. 23.

[Firebase&Web연동 5] 로그인 기능 구현


● 들어가기 전

지난 포스팅에서는 email을 이용한 인증기능, 가입을 통한 firebase의 insert 기능을 알아보았습니다. 이번 포스팅에서는 로그인 함수를 이용한 로그인 기능을 알아 보도록 하겠습니다. 

● 실습내용

1. firebase의 로그인 함수 구현하기

● login.html -  로그인 페이지

로그인페이지도 다른 페이지와 마찬가지로 템플릿을 준비해 놓았습니다. 주석을 달아 놓았으니 한번 쭉 보시고, firebase 스크립트 부분은 반드시 자기 프로젝트의 스크립트로 교체를 해야합니다. 만약에 jquey,js에 대해 처음들으시는분들은 생활코딩이나 인프런을 통해서 감을 익히시면 도움이 될것 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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>
                      <a href="/">Home</a>
                  </li>
                  <li>
                      <a href="/mypage.html">마이페이지</a>
                  </li>
                  <li>
                      <a id="joinmenu" href="/join.html">가입</a>
                  </li>
                  <li class="active">
                      <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 class="form-group">
          <label for="email">Email address:</label>
          <input type="email" class="form-control" id="email">
        </div>
    
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
    
        <button type="button" class="btn btn-default login">로그인</button>
 
    </div>
    <!-- 가입 폼 끝 -->
 
 
<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
  <script>
    var firebaseEmailAuth; //파이어베이스 email 인증 모듈 전역변수
    var firebaseDatabase; //파이어베이스 db 모듈 전역변수
    var userInfo; //가입한 유저의 정보. object 타입
    //파이어 베이스 초기화 코드
    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(); //파이어베이스 데이터베이스 객체
 
    
 
    //제이쿼리를 사용한다.
    $(document).ready(function(){
      
      //가입버튼 눌렀을 때
      $(document).on('click','.login',function(){
        
        //제이쿼리 선택자와 val() 함수를 이용해서 이메일,비밀번호 값을 가져온다. 
        var email = $('#email').val();
        var password = $('#pwd').val();
        alert("로그인 버튼 눌렸음" + email +":"+ password);
    
    //파이어베이스 이메일 로그인 함수
    firebaseEmailAuth.signInWithEmailAndPassword(email, password)
   .then(function(firebaseUser) {
 
       //성공하면 firebaseUser에 유저 정보 값이 담겨 넘어온다.
       loginSuccess(firebaseUser);
 
   })
  .catch(function(error) {
       // 실패했을 때 에러 처리
       alert(error);
       alert("로그인 실패");
  });
    
      });
    });
    
    //로그인 성공했을 때
    function loginSuccess(firebaseUser){
       alert("로그인 성공");
 
    //로그인 성공한 유저 id 확인해 보기 - firebase database에 접근해서 데이터 조회 하는 함수
   firebaseDatabase.ref("users/"+firebaseUser.uid).once('value').then(function(snapshot){
        //alert(snapshot.val().name)
    });
 
    //메인 페이지로 이동
    window.location.href = "/index.html"
    }
 
    
    </script>
 
   
</body>
</html>
cs


● firebase 로그인 핵심함수 설명


firebaseEmailAuth.signInWithEmailAndPassword(email, password)

   .then(function(firebaseUser) {

       //성공하면 firebaseUser에 유저 정보 값이 담겨 넘어온다.

       loginSuccess(firebaseUser);


   })

  .catch(function(error) {

       // 실패했을 때 에러 처리

       alert(error);

       alert("로그인 실패");

  });



firebaseEmailAuth는 위에서 firebaseEmailAuth = firebase.auth() 를 통해서 가져온 인증 객체이다. 이 객체에는 signInWithEmailAndPassword 함수가 있는데 이 함수에 두개의 인자를 넣어준다. 유저가 입력할 email, password를 넣어주자. 인자를 하나 넣거나.. 문자열 대신에 함수를 넣는다거나 하면 오류가 난다. 이 함수는  firebase에서 제공하는 이미 만들어져 있는 함수이기 때문에 이대로 써야한다. 로그인 성공하면 .then 안의 부분이 실행이 되고, 로그인 실패를 하면  .catch로 에러 처리를 해준다. .catch를 안써주면 서버가 꺼져 버릴 수 있으니 반드시 에러처리는 해줘야 한다. 우리는 로그인 성공을 하면 넘어온 유저 정보를 담아서 loginSuccess(firebaseUser); 함수를 호출해 주었다. 이 함수는 우리가 만든 함수이다.

● firebase 조회 핵심함수

//로그인 성공했을 때
function loginSuccess(firebaseUser){
alert("로그인 성공");

//로그인 성공한 유저 id 확인해 보기 - firebase database에 접근해서 데이터 조회 하는 함수
firebaseDatabase.ref("users/"+firebaseUser.uid).once('value').then(function(snapshot){
//alert(snapshot.val().name)
});

//메인 페이지로 이동
window.location.href = "/index.html"
}


로그인이 성공하면 loginSuccess 함수를 호출하도록 했다. 이곳에서 어떤 user가 로그인을 했는지 그 정보를 한번 가져와서 확인했다.(조회) 데이터 조회는 나중에 메인화면에서 감사리스트를 뿌려줄 때 한번더 자세히 다루겠다. 여기서 눈여겨봐야 될 부분은 데이터 베이스에 접근할때 firebaseDatabase 객체를 사용했다는 점과 ref함수를 통해서 데이터가 저장된 경로를 입력해주면 once 함수를 호출할 수 있고 이 함수는 데이터를 성공적으로 가져왔을때 콜백 함수로 snapshot에 유저 정보를 담아서 리턴 해준다는 것이다! snapshot.val().name을 이용해서 값을 찍어보자. 로그인 성공을 하면 바로 메인화면으로 이동시켜주었다. 콘솔에서 firebase serve를 이용해서 확인해보자


▲ 이전 포스팅에서 가입했던 test1로 로그인 시도



▲ 버튼을 눌렀을 때 작동하는 alert창




▲ 로그인이 성공됨



▲ 메인화면으로 이동

● 마무리

이번 포스팅에서 firebase 로그인 함수와 조회함수(once)를 알아보았다. 더 제사한 점은 firebase 문서를 살펴보면 좋겠다. firebase를 이용해서 db 모델을 1분만에 설계하고 db쪽 소스를 단 몇분만에 구현할 수 있다는 점은 매우 놀라운 점이다. oracle과 mysql등 관계형 db를 사용해 본사람은 알것이다. 요구사항 정의 부터 모델링 그리고 뒷단(서버)을 구축하는데 꽤 많은 인력과 비용이 든다는 점을. 물론 대형프로젝트를 할때는 관계형 db를 반드시 사용해야 한다고 생각한다. 하지만 개인 프로젝트나 소규모 프로젝트, 그리고 앱과 웹의 데이터 동기화를 할때는 firebase가 강력하다고 생각한다. 다음 시간에는 로그인 성공을 했을때 네비게이션 메뉴 부분에 로그인한 사람의 닉네임과 로그아웃 버튼이 뜨는 법을 살펴보겠다.

● 소스코드

thanksMemo.zip


보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다



'Firebase > Firebase&웹' 카테고리의 다른 글

[Firebase&Web연동 7] firebase 로그아웃 함수를 이용해서 로그아웃 기능 구현  (1) 2018.02.24
[Firebase&Web연동 6] session을 이용해서 navigation bar 변경해주기  (3) 2018.02.24
[Firebase&Web연동 4] email 가입 기능 구현하기 및 설정  (14) 2018.02.23
[Firebase&Web연동 3] 간단한 index.html 페이지 만들어서 배포해보기  (3) 2018.02.22
[Firebase&Web연동 2] node.js를 이용해서 개발용 로컬 웹서버 실행하기  (3) 2018.02.22

관련글

댓글

티스토리툴바