firebase 인증 시작하기

firebase 는 우리의 애플리케이션에 다양한 로그인 방식을 간편하게 붙일 수 있도록 돕는다. 보편적으로 많이 사용하는 이메일 주소를 통한 로그인이나 제휴 ID 제공업체를 통해 로그인하는 방법을 예로 들 수 있는데 아래 화면처럼 다양한 방식을 제공한다.

애플리케이션에 로그인을 붙이기 위해서는 이중에서 사용하고자 하는 제공업체를 선택해서 사용 설정만 ON 해주면 끝이다. 여기 예제에서는 Google 로그인을 사용해보도록 한다.

사용 설정을 활성화 했으면 이제 코드로 구현을 해야 할 텐데 그 예제 샘플은 아래 링크에서 모두 확인이 가능하다. 거의 복사&붙여넣기만 하면 바로 사용할 수 있는 수준이다.
https://firebase.google.com/docs/auth/?hl=ko

firebase 의 모든 기능을 붙일 때도 동일하게 우리의 코드 상에 Firebase config 를 설정해줘야 한다. 코드상에서 우리의 파이어베이스 프로젝트를 찾을 수 있도록 연결해주는 과정이라고 이해하면 된다. 관련된 부분은 공식 문서를 봐도 되고 앞선 글인 firebase 저장소 사용하기에서 관련된 부분을 참고해도 좋다.

config 설정이 끝났으면 로그인 관련된 코드를 애플리케이션에 바로 삽입해보자. 아래는 Google 제공업체 개체의 인스턴스를 생성하는 코드이다.

var provider = new firebase.auth.GoogleAuthProvider();

이제  firebase.auth() 에 provider 를 넘겨서 우리가 선택한 로그인 제공업체로 인증이 진행되도록 한다. 이때 취할 수 있는 방식으로는 두 가지가 있는데 하나씩 살펴보자.

팝업 창을 통한 로그인

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).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;
  // ...
});

말 그대로 로그인 버튼을 눌렀을 때 팝업창이 뜨고 그 위에서 인증을 진행하는 방식이다. 단점이라면 모바일은 팝업 개념이 없기 때문에 모바일 환경도 고려하고 있는 웹 애플리케이션을 개발할 때는 추천되지 않는 방식이다.

로그인 페이지로 리디렉션해서 로그인

firebase.auth().signInWithRedirect(provider);

위 코드는 provider 로 리디렉션해서 인증 절차를 수행하는 코드이다. 인증의 결과에 대해서는 페이지가 다시 로드되면 아래처럼 얻을 수 있다.

firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = result.credential.accessToken;
    // ...
  }
  // The signed-in user info.
  var user = result.user;
}).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;
  // ...
});

리디렉션을 통한 페이지의 전환이 이루어지기 때문에 두 개 코드를 한 개의 함수내에 위치시키면 정상적으로 결과를 가져올 수 없게 된다. 적당히 분리해서 처리해야 할 것이다. 실제 사용되는 예제가 궁금하면 오픈소스로 진행하고 있는 livemsg 를 통해 확인할 수 있겠다. ( 혹시 작은 도움이라도 되었다면 Star 부탁드립니다 )

이렇게 로그인처리는 끝났다. 이후 사용자를 로그아웃 시키기위해서는 아래처럼 코드를 작성해주면 된다.

사용자 로그아웃

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

인증을 붙여보면 확실히 느끼게 된다. firebase 가 아래와 같은 슬로건을 자신있게 내미는 이유를 말이다.

인증 / 저장소 / 통계 등등 다 우리가 관리 서포트 합니다, 여러분은 개발에만 집중하세요.

승인된 도메인

위에서 소개한 인증 기능을 상용 서비스에서 사용하기 위해서는 도메인을 파이어베이스에 미리 등록해야 한다. 메뉴의 위치는 [ DEVELOP->Authentication->로그인 방법 ] 에서 찾을 수 있다. 아래는 livemsg.ga 라는 도메인에 해당 서비스를 붙여본 것에 대한 예제이다.

여기까지 우리는 서비스에 파이어베이스 인증 기능을 붙여보았는데 예제를 찾기 어려워서 그렇지 막상 서비스에 붙이는데는 크게 무리가 없다는 것을 알 수 있다. 오히려 지메일 등 한 개를 붙여보면 다른 인증방식은 거의 복사&붙여넣기 수준처럼 쉽게 느껴진다. 이제 인증도 파이어베이스가 해결해주었으니 정말 서비스 개발에만 집중할 수 있겠다.

(*) 최대한 심플하게 표현하기 위해서 선택적으로 넣을 수 있는 내용에 대해서는 다루지 않았습니다.