Email과 암호를 이용해서 회원가입 및 로그인
Firebase는 다음과 같이 다양한 인증 방식을 간편하게 이용할 수 있는 API를 제공합니다:
- Email과 암호
- GitHub
- 임의의 인증 시스템
- 익명 인증
본 섹션에서는 Email과 암호를 이용해서 회원가입하고, 로그인하는 과정을 설명합니다.
사전 준비
인증을 사용하기 위해서는 먼저 사전 준비가 필요합니다. Firebase 콘솔에서 원하는 인증 방식을 활성화 해야하죠.
좌측 메뉴에서 Auth를 선택하고, 로그인 방법 탭을 선택합니다. 아래 목록에서 Email/password를 클릭하고 사용 설정을 저장합니다.
위 화면과 같이 "사용 설정됨"이 표시되면 사전 설정이 완료됩니다.
회원가입 구현
본 강의에서는 Firebase 초기화 코드를 별도의 js 파일로 분리하여 불러오는 방식으로 구현합니다. 따라서 아래와 같은 폴더 구조를 만듭니다. 이후 진행되는 예제도 ex1 폴더와 같은 위치에 추가할 것입니다.
각 파일의 코드는 아래와 같습니다.
ex1/index.html
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script src="../firebase/init.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="signUp">
<label for="su_id">ID: </label><input type="email" id="su_id" /><br />
<label for="su_pw">PW: </label><input type="password" id="su_pw" /><br />
<label for="su_cf">Confirm: </label><input type="password" id="su_cf" /><br />
<button onclick="signUp()">Sign Up</button>
</div>
<div id="error">
An error occurred: <span id="errmsg"></span>
</div>
</body>
</html>ex1/js/index.js
$(document).ready(function() {
$("#error").hide();
});
function signUp() {
var id = $("#su_id").val();
var pw = $("#su_pw").val();
var cf = $("#su_cf").val();
if(pw != cf) {
alert("Password does not match the confirm password.");
return;
}
firebase.auth().createUserWithEmailAndPassword(id, pw)
.then(function() {
alert("Signed Up!");
})
.catch(function(e) {
$("#error #errmsg").html(e.message);
$("#error").show();
$("#signUp").hide();
return;
});
}firebase/init.js
// Firebase 초기화
// 각 항목은 자신의 App의 정보로 바꾸어 넣습니다.
var config = {
apiKey: "API_KEY",
authDomain: "AUTH_DOMAIN",
databaseURL: "DATABASE_URL",
storageBucket: "STORAGE_BUCKET",
};
firebase.initializeApp(config);
// Sign out
function signOut() {
if(!confirm("Do you really want to log out?")) {
return;
}
firebase.auth().signOut().then(function() {
location.reload();
}, function(e) {
lastWork = "authorized";
$("#error #errmsg").html(e.message)
$("#error").show();
$("#authorized").hide();
});
}위 코드를 저장한 후에 Tomcat, IIS 등의 WAS에 배포하여 실행하면 아래와 같은 화면이 표시됩니다. 회원가입에 성공하면 "Signed Up" 창이 표시되고, 실패하면 실패한 사유가 표시됩니다.
회원가입 성공 후 Firebase 콘솔에 접속해보면 가입했던 계정이 표시되는걸 확인 할 수 있습니다. 새로 추가된 계정은 "최종 로그인 날짜" 열이 "-"로 표시되는 것도 주목할 점입니다.
주목할 코드
ex1/index.html:4~8: 호출하는 순서에 유의합니다.
ex1/js/index.js:10: 암호와 암호 확인란이 일치하지 않으면 오류를 표시하고 진행을 종료합니다.
ex1/js/index.js:15: 실제로 회원가입을 수행하는 코드입니다. 매개변수로 ID와 PW를 전달합니다.
ex1/js/index.js:16: 회원가입이 성공적으로 완료되면 수행할 Callback Function을 매개변수로 전달합니다.
ex1/js/index.js:19: 회원가입 수행 중 오류가 발생하면 수행할 Callback Function을 매개변수로 전달합니다. 오류 정보가 매개변수로 넘어오기 때문에 오류 메시지를 e.message로 받는 것도 주목할 점입니다.
firebase/init.js:17: 로그아웃을 처리하는 코드입니다. 어떤 방법으로 로그인했더라도 동일한 함수를 이용해서 로그아웃합니다. 로그아웃 시도 중 오류가 발생하더라도 .catch()를 사용하지 않습니다.
로그인 구현
ex1/index.html 파일을 아래와 같이 수정합니다.
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script src="../firebase/init.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="signUp">
<label for="su_id">ID: </label><input type="email" id="su_id" /><br />
<label for="su_pw">PW: </label><input type="password" id="su_pw" /><br />
<label for="su_cf">Confirm: </label><input type="password" id="su_cf" /><br />
<button onclick="signUp()">Sign Up</button> / <button onclick="$('#signUp').hide(); $('#signIn').show();">Sign In</button>
</div>
<div id="signIn">
<label for="si_id">ID: </label><input type="email" id="si_id" /><br />
<label for="si_pw">PW: </label><input type="password" id="si_pw" /><br />
<button onclick="signIn()">Sign In</button>
</div>
<div id="authorized">
You authorized!<br />
<button onclick="signOut()">Sign Out</button>
</div>
<div id="error">
An error occurred: <span id="errmsg"></span><br />
<button onclick="back();">Back</button>
</div>
</body>
</html>ex1/js/index.js 파일을 아래와 같이 수정합니다.
$(document).ready(function() {
$("#signIn").hide();
$("#authorized").hide();
$("#error").hide();
});
function signUp() {
var id = $("#su_id").val();
var pw = $("#su_pw").val();
var cf = $("#su_cf").val();
if(pw != cf) {
alert("Password does not match the confirm password.");
return;
}
firebase.auth().createUserWithEmailAndPassword(id, pw)
.then(function() {
$("#signUp").hide();
$("#signIn").show();
})
.catch(function(e) {
lastWork = "signUp";
$("#error #errmsg").html(e.message);
$("#error").show();
$("#signUp").hide();
return;
});
}
function signIn() {
var id = $("#si_id").val();
var pw = $("#si_pw").val();
firebase.auth().signInWithEmailAndPassword(id, pw)
.then(function() {
$("#signIn").hide();
$("#authorized").show();
})
.catch(function(e) {
lastWork = "signIn";
$("#error #errmsg").html(e.message);
$("#error").show();
$("#signIn").hide();
return;
});
}
function back() {
$("#" + lastWork).show();
$("#error").hide();
}본 코드는 회원가입에 성공하면 로그인 화면이 표시되고, 로그인에 성공하면 성공했다는 메시지가 표시되는 순서로 작동합니다. 로그인에 성공한 계정은 Firebase 콘솔에서 "최종 로그인 날짜" 열이 갱신되어 표시됩니다.
주목할 코드
ex1/js/index.js:34: 실제로 로그인을 수행하는 코드입니다. 매개변수로 ID와 PW를 전달합니다. 회원가입 코드와 구조가 동일합니다.
Email과 암호를 이용해서 회원가입과 로그인 하는 과정을 구현했습니다. 다음 강의에서는 Google 계정을 이용해서 회원가입과 로그인 하는 과정을 구현해보겠습니다.
GitHub
본 강의에 사용한 코드는 GitHub에 공개되어 있습니다. (단, firebase/init.js은 .gitignore로 예외처리 되어있습니다.)
https://github.com/jETA-Kor/Firebase_Ex
참고 문서
Manage Users in Firebase: https://firebase.google.com/docs/auth/web/manage-users
내용에 오류가 있거나, 다른 의견이 있으시면 댓글을 남겨주세요. (Firebase 강의에 관하여...)