본문 바로가기
Firebase/Firebase&웹

[Firebase&Web연동 4] email 가입 기능 구현하기 및 설정

by 인생여희 2018. 2. 23.

[Firebase&Web연동 4] 가입 기능 구현하기 및 설정

● 들어가기 전

지난 포스팅에서는 bootstrap을 이용해서 간단한 index.html 페이지를 만들어 보고 firebase를 통해서 배포해 보았습니다. 이번시간에는 파이어베이스 모듈을 통한 가입(insert) 기능을 살펴보도록 하겠습니다. 

● 실습내용

1.웹앱에 Firebase 초기화 코드 추가 하기(자바스크립트 SDK)
2.firebase 구성 요소 살펴보기
3.가입기능 구현하기

● 웹앱에 Firebase 초기화 코드 추가 하기(자바스크립트 SDK)

첫번째 포스팅에서 Firebase 웹프로젝트를 생성하면 마지막 부분에 자바스크립트 코드를 복사해 붙여넣으라는 메시지가 나옵니다. 첫번째 포스팅으로 가셔서 확인을 해주시고, 아니면 파이어베이스 콘솔로 이동하셔서 웹앱에 "firebase 추가" 버튼을 클릭합니다. 그러면 아래와 같은 프로젝트 고유의 스크립트 코드가 나옵니다. 일단 복사를 해놓겠습니다.

● Firebase가 제공하는 서비스 종류 알아보기


제일 많이 사용하는 3가지 모듈만 가져왔습니다. 실습을 통해서 알아보도록 하겠습니다.

● email 가입을 하기 위한 설정

▲ firebase 대쉬보드로 가셔서 왼쪽 메뉴에서 Database 클릭.

위와 같은 화면이 나오면 시작하기 클릭.


▲ firebase 대쉬보드로 가셔서 왼쪽 메뉴에서 Authentication 클릭.

위와 같은 화면이 나오면 로그인 방법 설정 클릭.


▲ 제공업체 부분에서 이메일/비밀번호 클릭


▲ 사용설정에서 스위치를 클릭하셔서 파란색이 되도록 설정. 저장클릭.

이걸로 firebase 인증과 데이터베이스 사용을 위한 설정이 끝났습니다.

소스 코드를 살펴보도록 하겠습니다.


● index.html - 메인화면

지난번에도 말씀드렸듯이 이번 포스팅은 firebase 기능을 살펴보는데 집중했기 때문에 bootstrap 탬플릿, jquery, javascript에 관한 설명은 다음기회에 포스팅하도록 하겠습니다. 실습을 위한 탬플릿을 살펴보겠습니다.


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
<!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 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();
 
  </script>
 
 
 
</body>
 
</html>
cs


네비게이션바와 점보트론 입력창 등이 있는 간단한 화면입니다. 각 소스코드 시작 부분에 주석을 달아 놓았습니다. 중요한건 "스크립트 부분. 자신의 스크립트 코드로 변경하세요! " 이 부분 입니다. 이 부분을 자신의 프로젝트 고유의 스크립트로 바꿔주시기 바랍니다. 간단히 살펴보면

firebase.initializeApp(config); 는 초기화 함수 입니다. 앞으로 "firebase.관련함수" 으로 사용될 것입니다.

//firebaseEmailAuth = firebase.auth(); - 인증을 위해 필요한 모듈입니다.

//firebaseDatabase = firebase.database(); - 데이터 베이스를 사용하기 위해 필요한 모듈입니다.



중요!
테스트하기 전에 firebase 서버를 작동해주세요. 서버를 작동하지 않고 실행하면 오류가 납니다. firebase 서버 작동 방법은 node.js를 이용해서 개발용 로컬 웹서버 실행하기 포스팅에 설명해 놓았습니다.

▲ 위와 같은 화면이 뜨면 성공. 위의 네비게이션에 마이페이지, 로그인 부분은 아직 페이지를 만들지 않았기 때문에 클릭하면 해당페이지가 없다는 메세지가 뜰것입니다.


● join.html - 가입화면

메인화면과 마찬가지로 템플릿을 만들어 놓았습니다. 간단한 주석을 달아놓았으니 확인하시고 먼저 firebase auth(인증),데이터베이스와 관련된 함수를 살펴보겠습니다.

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!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 class="active">
                      <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 class="form-group">
      <label for="email">Email address:</label>
      <input type="email" class="form-control" id="email">
    </div>
 
    <div class="form-group">
            <label for="name">NicName:</label>
            <input type="text" class="form-control" id="name">
    </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 join">가입</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','.join',function(){
 
    //jquery를 이용해서 입력된 값을 가져온다.  
    var email = $('#email').val();
    var password = $('#pwd').val();
    name = $('#name').val();
 
//이메일로 가입 버튼 눌렀을 때 작동되는 함수 - firebase 인증 모듈
firebaseEmailAuth.createUserWithEmailAndPassword(email, password).then(function(user) {
    
    userInfo = user; //가입 후 callBack 함수로 생성된 유저의 정보가 user에 담겨서 넘어온다. 전역변수에 할당.
 
    //뭐가 찍히는지 직접 체크해보세요.
    console.log("userInfo/"+userInfo); //오브젝트 타입
    console.log("userInfo.currentUser/"+userInfo.currentUser); //안됨
    console.log("userInfo.uid/"+userInfo.uid); //vPArtCHqPpOeIOpidEfug0Kgq3v1
    
    //성공했을 때 작동되는 함수
    logUser(); 
 
}, function(error) {
    //에러가 발생했을 때 
    var errorCode = error.code;
    var errorMessage = error.message;
    alert(errorMessage);
   
});
 
//가입 성공했을 때 호출 되는 함수 - 위의 firebase의 인증 모듈과 다른 database 모듈임을 확인하자.
function logUser(){
    var ref = firebaseDatabase.ref("users/"+userInfo.uid); //저장될 곳을 users라는 부모 키를 레퍼런스로 지정.
    
    //저장 형식
    var obj = {
        name: name,
    };
 
    ref.set(obj); // 고유한 자식 키가 하나 생셩이 되면서 json 삽입
    alert("가입성공");
 
    //메인 페이지로 이동시키고 세션 저장시키기
    window.location.href = "/index.html"
}
 
 
  });
});
  </script>
 
 
</body>
</html>
cs


● 이메일 인증 함수

firebaseEmailAuth는 firebaseEmailAuth = firebase.auth();를 이용해서 생성했다. 이 객체에createUserWithEmailAndPassword 라는 함수가 있는데 이 함수에는 email, password 가 인자로 들어간다. 성공하면 user 에 방금 저장한 유저의 정보가 담겨서 넘어온다. 

firebaseEmailAuth.createUserWithEmailAndPassword(email, password).then(function(user) {

//성공했을 때 실행될 부분

logUser() // 호출

}, function(error) {

    //에러가 발생했을 때 

    var errorCode = error.code;

    var errorMessage = error.message;

    alert(errorMessage);

});


● 데이터베이스 함수

firebaseDatabase.ref("저장될 주소, 스트링 값으로 들어간다.");  아주 간단하게 말하면 "user" 라는 폴더에 "userInfo.uid"(유저의 고유 키)를 key 값으로 하는 주소에 값을 json형식으로 넣겠다는 뜻이다.ref.set(json object)는 위의 주소에 set 함수를 이용해서 json 객체를 넣는 역할을 한다.


function logUser(){

    var ref = firebaseDatabase.ref("users/"+userInfo.uid); 


    //저장 형식

    var obj = {

        name: name,

    };


    ref.set(obj); // 고유한 자식 키가 하나 생셩이 되면서 json 삽입

    alert("가입성공");

}

  });


▲ 위와 같은 화면이 뜨면 성공. 직접메일과 비밀번호 닉네임을 입력해서 확인해 봅시다. 참고로 이메일 형식과 다른 형식의 값을 넣으면 firebase 에서 자체 에러 메시지를 던집니다. 패스워드도 마찬가지로 6자리 이상으로 지정해 주어야 합니다. 이부분은 개인적으로 설정해주세요.(공백문제라던지 등등~)


▲가입 성공을 했다면 firebase 대쉬보드로 가셔서 인증 메뉴를 클릭하고 확인을 합니다.

빨간색 부분이 저장한 이메일이고, 초록색 부분이 유저를 구분하는 고유 키값입니다.


▲ 데이터 베이스 메뉴를 클릭해서 어떻게 저장이 됐는지 확인을 해 줍니다. 이 계층 구조는 우리가 위에서 firebaseDatabase.ref("users" + 유저고유아이디 가져오는 함수);를 이용해서 저장을 했기 때문입니다. users는 앞으로 인증을 통해 가입성공된 유저들을 따로 모아두기 위한 테이블이라고 생각하시면 됩니다. 아래 초록색 부분이 유저들의 고유 키입니다. 그리고 그 고유키 밑으로 json형식의 데이터 가 들어가 있습니다. 앞으로 이곳에 가입시간, 사진url등을 넣어주도록 하겠습니다.  

● 마무리

이번 포스팅에서 firebase인증을 위한 설정과 인증함수, 데이터베이스 관련 함수를 알아보았습니다. 데이터를 insert할때 사용되는 함수가 set() 말고도 push()등 몇가지 있으니 자세한 부분은 firebase 레퍼런스를 참고하시면 좋겠습니다. 한번 set으로도 해보시고 push로도 해보시면서 차이점이 무엇인지 느껴보시기 바랍니다. 직접 따라해보는 것도 좋지만 따라한 후 혼자서 실험하면서 오류도 확인해보고 연구해보고 이런 과정이 실력향상에 큰 도움이 될 것입니다.


● 예제 소스코드

thanksMemo.zip



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

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

[Firebase&Web연동 6] session을 이용해서 navigation bar 변경해주기  (3) 2018.02.24
[Firebase&Web연동 5] 로그인 기능 구현  (2) 2018.02.23
[Firebase&Web연동 3] 간단한 index.html 페이지 만들어서 배포해보기  (3) 2018.02.22
[Firebase&Web연동 2] node.js를 이용해서 개발용 로컬 웹서버 실행하기  (3) 2018.02.22
[Firebase&Web연동 1] 기본 세팅 하기  (1) 2018.02.21

관련글

댓글

티스토리툴바