[node.js] 프로젝트 - 로그인 구현 : 파이어베이스

[시작하기]

1) 파이어베이스 프로젝트 생성 -> 콘솔 -> Authentication -> 페이스북 활성화 -> 인증 토큰 리디렉션 URL 복사

2) 페북 개발자 페이지 -> 프로젝트 생성 -> 콘솔 -> 제품 추가 -  로그인 -> 로그인 메뉴 - 설정탭 - 인증 토큰 리디렉션 URL 붙여넣기 - 저장

=> 정해진 URL로만 인증토큰이 전송됨 : 파이어베이스 API 키가 노출되더라도 큰 피해가 없지만… 

3) 페이스북 프로젝트 대시보드 -> 앱 ID / 시크릿 코드 복사 -> 파이어베이스 Auth 페이스북 대시보드에 붙여넣기

4) 프로젝트에서 파이어베이스 API키로 파이어베이스를 이용하려면 Authentication 대시보드 > 승인된 도메인에 프로젝트 도메인을 추가해야함

=> https://support.google.com/firebase/answer/6400741

[필요한 모듈 작성 및 인클루드]

1) firebase-init : 파이어베이스 초기설정을 위한 모듈

var config = {
    apiKey: '파이어베이스 설정에 있음',
    authDomain: '프로젝트이름.firebaseapp.com' 
   //승인된 도메인을 설정하는데, 기본적으로 승인되어있는 프로젝트.firebaseapp.com 사용
};

firebase.initializeApp(config);

2) 필수 firebase js 파일 인클루드

- <script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-app.js"></script>

- <script src="https://www.gstatic.com/firebasejs/3.8.0/firebase-auth.js"></script>

3) 로그인 버튼 이벤트 : 실제로는 액세스 토큰을 받아오는 과정(파이어베이스에 저장)

- firebase 공식 example

function toggleSignIn() {
    if (!firebase.auth().currentUser) {
        var provider = new firebase.auth.FacebookAuthProvider();
        provider.addScope('user_birthday');
        provider.setCustomParameters({
          'display': 'popup'
        });
        firebase.auth().signInWithPopup(provider).then(function(result) {
          var token = result.credential.accessToken;
          var user = result.user;

        }).catch(function(error) {
          var errorCode = error.code;
          var errorMessage = error.message;
          var email = error.email;
          var credential = error.credential;
          
          if (errorCode === 'auth/account-exists-with-different-credential') {
            alert('You have already signed up with a different auth provider for that email.');
          } else {
            console.error(error);
          }
        });
      } else {

          alert('이미 로그인되어있습니다.');
      }

}

4) 상태 변경 리스너 함수 : 로그인 페이지(.html 혹은 .ejs)가 모두 로드되면 리스너 함수를 실행

- 3번에서 작성한 함수를 통해서 액세스 토큰을 받아와서 액세스 토큰을 통해서 사용자 정보를 받아오면 리스너 동작

=> 페이지 로드 시 initApp() 동작 > initApp 실행문 : firebase auth 상태가 변경되면 콜백함수 호출(받아온 유저정보 추출 -> DOM 텍스트노드 수정)

- firebase 공식 example code

function initApp() {
      // Listening for auth state changes.
      firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
              // 유저 로그인 됐을 때(로컬스토리지에 저장된 쿠키가 있을 때)
              var displayName = user.displayName;
              var email = user.email;
              var emailVerified = user.emailVerified;
              var photoURL = user.photoURL;
              var isAnonymous = user.isAnonymous;
              var uid = user.uid;
              var providerData = user.providerData;
          

          } else {
              // 유저 로그아웃 됐을 때(로컬스토리지 빔)
              
        }
                
      });
}      

/* 페이지 로드 완료 후 함수 실행 */
window.onload = function() {
    initApp();
};

5) 페이스북 개발자 페이지 > 앱 > 앱 검수 > 개발자 모드에서 공개모드로 전환 

[로컬스토리지 사용] 

- 파이어베이스 - Auth 제공 서비스(fb, 구글, 네이버 등) 간 통신한 후 결과값으로 액세스토큰을 받아오고, 사용자 정보를 받아옴

=> 사용자정보를 로컬 스토리지에 저장해둠 : 암호화된 형태

=> 파이어베이스 제공 함수를 통해 세션 있는지 여부 체크할 수 있음 : 위의 상태변경 리스너가 그 함수

=> 보안 : 로컬스토리지에 사용자정보를 저장해두는 것은 좋지못함 - 사용자 식별 정보만 클라이언트 로컬에 남기고 서버에 사용자 정보를 담아두는 것이 좋음

    => 치명적인 정보를 담고 있지않기때문에 그나마 괜찮음 : 페이스북에서 기본적으로 취득할 수 있는 정보들(그러나 사용자 관점에서는 그리 썩)

    => 로그아웃 버튼을 만들어서 로컬스토리지에 저장된 내용 삭제할 수 있도록 하기

    => 해커톤 끝난 후 수정할 것

   

[파이어베이스 개발 시 알아둬야할 것]

1) 로그인이 진행되고 있는 과정(액세스 토큰을 가져오거나, 파이어베이스에 저장된 액세스 토큰값이 맞는지 체크)에서 리다이렉트를 시키면 network-error남

=> 완료된 후 리다이렉트하기

2) 브라우저 환경보다 nodejs에서 파이어베이스 Auth를 개발하는 것이 좋음 : 외관상 코드 깔끔해지는 것도, 보안상, 모듈화 등등등등

=> 혹은 nodejs에서 개발하되 배포할 때 webpack 사용하기 

[프로젝트 체크]

- http://www.politics-watch.com/
- 프론트앤드 작업 거의 완료 : 개발자 페이지만들기 해야함, 프로필 사진 댓글란에 넣기

- 상황 설명에 대한 댓글 달기 기능 만들기 : mysql 서버 db table join

- 로그인, mysql 서버로부터 최신 정보 받아오기, 랭킹 보여주기 개발 완료