안녕하세요 엘빈입니다. 요즘 웹개발 프로젝트를 열심히 진행중에 있습니다. 예전에도 firebase를 이용해서 웹개발 프로젝트를 진행하였는데 가장 애를 먹었던 부분이 로그인 구현이였습니다. 원래 firebase는 인증 모듈을 기본적으로 제공해주고 있지만 이 인증 모듈의 DOC 문서가 대부분 안드로이드 아니면 웹 프론트에서 작동하는 방식 위주로 설명해주고 있기 때문에 조금 node.js 서버를 두는 당시 프로젝트 상황상 어려운 부분이 많았죠. 게다가 node.js를 공부한 후 첫 웹 개발 프로젝트였기 때문에 어려움이 더했던 것 같습니다. 이번 포스팅에서는 node.js와 firebase를 이용해 구글 로그인을 구현하려고 합니다.
프론트 엔드 설정값
일단 홈 화면 사이드에다가 로그인을 구현했는데 UI를 Bootstrap 및 템플릿을 가지고와 구성하여서 전체 코드가 400줄이 넘어갑니다. 따라서 로그인 부분의 코드만 가져오겠습니다.
<!--로그인 영역-->
<div class="row box" id="login-box">
<% if(user==null){%>
<article class="card-body">
<h4 class="card-title text-center mb-4 mt-1">로그인</h4>
<hr>
<form action="/logincheck" method="POST">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-user"></i> </span>
</div>
<input name="id" class="form-control" placeholder="아이디" type="email">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input class="form-control" placeholder="비밀번호" type="password" name="password">
</div>
</div>
<div class="form-group">
<input type="submit" value="로그인" class="btn btn-primary btn-block">
</div>
<div class="row">
<div class="col-sm-5"><p class="text-left"><a href="#" class="btn">회원가입</a></p></div>
<div class="col-sm-7"><p class="text-left"><a href="#" class="btn">id/비밀번호 찾기</a></p></div></div>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div> // 구글 로그인 부분
</div>
</form>
</article>
<% }else{%>
<div><%=user%></div>
<% } %>
먼저 저는 프론트엔드 부분은 html이 아닌 동적인 페이지를 구상하기 위해서 view engine 중 하나인 ejs 모듈을 사용하였습니다. 사용자 데이터가 없으면 로그인 페이지를 있으면 사용자 정보를 표시하는 방식입니다.
그 중 구글 로그인 부분이 보이실 것입니다. div 태그 안에 class 값과 data 통신 함수를 지정하는데요. 해당 클래스를 사용하기 위해서는 google의 UI와 Cloud Project와 연동해야 합니다. 구글 Cloud Project의 경우 firebase 프로젝트 생성시 자동으로 형성됩니다. 참조하는 head 태그 부분을 살펴봅시다.
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="your client id"> // 여러분의 클라이언트 id값을 넣어주세요.
<meta name="google-signin-cookiepolicy" content="single_host_origin">
<meta name="google-signin-scope" content="profile email">
<script type="text/javascript" src="/public/js/auth.js"></script>
해당 태그를 헤드 부분에 복사해줍니다. 그 중 세번쨰 줄에 content 값으로 여러분들의 client id 값을 넣어줍니다. client id값을 확인하는 방법은 firebase 인증 페이지에서 알 수 있는데요. auth.js의 경우 아까 구글 div 태그 안에서 data 통신에 이용하는 함수를 설정해 줄 것입니다.
사진처럼 firebase Authentication 페이지에서 설정할 수 있습니다. 두번째 메뉴 탭으로 들어가셔서 Google 사용 설정 부분에 Client-id 값이 나와있습니다. 이를 그대로 복사해서 앞서 사진처럼 content 값으로 넣어주시면 됩니다.
// auth.js
function onSignIn(googleUser) {
console.log('Google Auth Response', googleUser);
let login_box = $("#login-box");
$.ajax({
url: '/logincheck',
dataType: 'json',
type: 'POST',
data: {token:googleUser.getAuthResponse().id_token},
success: function(user) {
console.log('ajax 성공');
console.log('user은 이겁니다 : ',user.email);
login_box.text(user.email);
}
});
}
프론트엔드에서 서버로 값을 보내는 방법은 여러개이지만 저같은 경우 jquery의 ajax 통신을 이용하였습니다. 먼저 router에서 url 경로 '/logincheck'를 등록하였습니다. 프론트엔드에서 구글 로그인을 통해 token 값을 얻으면 이를 ajax post 통신을 통해 서버로 보내줍니다.. 결과 함수로는 user email을 받고 로그인이 있던 div 태그 안에 삽입하는 방식입니다.
백엔드 설정
let token =req.body.token;
console.log('구글 로그인 실행');
var credential = firebase.auth.GoogleAuthProvider.credential(token);
// Sign in with credential from the Google user.
await firebase.auth().signInWithCredential(credential).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
var user = firebase.auth().currentUser;
console.log('user 정보 : ',user);
console.log('user email 주소 : ',user.email);
req.session.user=user.email;
res.send({email:user.email});
//res.render('home',{user:user.email});
}
'logincheck' 라우터 안의 소스 코드입니다. token 값을 전달받아 firebase의 토큰 로그인 메소드를 통해 인증을 받습니다. node.js의 경우 여러 기기에서 로그인 시 오류가 발생하여 저같은 경우 따로 session 값에 저장하여 이 후 로그인 상태를 확인하였습니다. 참고로 비동기화로 하면 email이 안넘어가는 오류가 생겨 라우터 전체 함수를 async 그리고 비동기적 실행이 되는 부분을 await으로 설정하여 동기적으로 변경시켜주었습니다. 인증 이후 이메일 정보를 res.send 메소를 통해 success 함수로 전달해줍시다. 그러면 프론트엔드 success 함수에서는 email을 로그인 상자 안에 표시해줍니다.
이렇게 아래 부분에 구글 로그인 버튼이 정상적으로 나온 것을 볼 수 있습니다. 클릭하여 본인 구글 계정으로 로그인 하면 프로세서가 정상적으로 실행됩니다.
개인 정보떄문에 가렸지만 빨간 부분에 로그인한 계정 정보가 표시됩니다.
조금만 더 힘내서 빨리 프로젝트를 진행해야겠네요. 참고하셔서 큰 도움이 되셨으면 좋겠습니다.
