생각을 개발하자, 박진형

[firebase] Authentication - OAuth 개념과 페이스북 OAuth #1 본문

Likelion/firebase

[firebase] Authentication - OAuth 개념과 페이스북 OAuth #1

imjinbro imjinbro 2017.06.01 16:02

[firebase Authentication]
- 페이스북, 구글 등 계정의 권한을 위임하는 과정, 위임받아 인증 key(Access Token)를 보관하는 서버를 쉽게 구현할 수 있음
- 로그인 서버를 따로 두는 개념


[OAuth란]
- 인증을 위한 오픈 스탠다드 프로토콜 + 인증과 허가의 뜻을 모두 가짐
- 다른 어플리케이션에 아이디, 비밀번호를 노출하지않고, API 접근 권한 위임 요청 시 사용하는 방법
- 아래의 필수 개념을 통해 어떻게 권한을 위임받고, 관리하는지 알아보자


[OAuth 필수 개념]
1) Service Provider : OAuth를 사용하는 Open API를 제공하는 서비스 - fb, google, naver, kakao 등
2) Consumer : OAuth 인증을 사용하여 Service Provider가 제공하는 기능을 사용하려는 어플리케이션(웹, 앱 등)
3) User : Service Provider에 계정을 가지고 있으면서 Consumer 서비스를 이용하려는 유저
4) Request Token : Consumer가 Service Provider의 OAuth를 통해 위임 받은 권한을 인증받기위해 사용하는 값, 인증 완료 후 Access Token으로 교환
5) Access Token : OAuth 인증 후 Consumer가 Service Provider의 자원(정보, 기능)에 접근하기위한 인증키를 포함한 값


 페이스북 로그인 : 페북 가입 정보로 myService에서 회원 간편등록 하기위해 페이스북 계정 개인 정보 가져오기 권한 받아야함
 서버의 요청 페이스북에 권한을 요청하기위해 일정 방법을 따라 서버 내 코딩을 해야함 : Request Token
 페이스북 권한 위임 확인창 : Consumer에서 Service Provider에서 제공하는 기능, 정보를 이용할 수 있는 권한을 위임하느냐고 묻는 과정
 Access Token 발급 : 페북 개인 계정의 정보, 기능(담벼락 게시 등) 일부 이용할 수 있는 권한 위임 확인 key를 포함한 값을 ConSumer 서버로 리턴
   (firebase가 액세스 토큰 관리까지 해줌)


[firebase Authentication : 웹과 페이스북 OAuth]
- firebase 용도 : 페이스북  자원 접근 권한 인증 요청 및 인증받은 Access Token을 보관까지 쉽게 개발할 수 있음 + 관리자 콘솔까지 제공
- 페이스북 접근, firebase Authentication 구현 환경 : express(nodejs)


1) 프로젝트 생성
- 프로젝트명 및 해당 국가 설정

2) firebase 로그인 방법 설정하기 : 페이스북 로그인 설정 및 페이스북 OAuth 리디렉션 URI 등록
- 프로젝트 콘솔 들어가기 > 왼편 Authentication 메뉴 내에서 설정

2-1) 앱 ID 및 비밀번호 설정 : 페이스북 개발자 페이지 내 앱 생성한 뒤 거기서 가져와서 설정해야하는 값(3번 항목 참조)

2-2) OAuth 리디렉션 URI 추가
- 페이스북 OAuth 인증을 요청하려는 서버 URI 설정 : 권한 위임 인증 토큰 리턴(redirect)
- 이미 지정되어있는 firebase 기본 URI로 페이스북 액세스 토큰을 받으면 방금 추가한 URI에서도 토큰을 사용할 수 있음


3) 페이스북 개발자 페이지에서 앱 생성하기 및 firebase 프로젝트 콘솔 내 정보 등록
- 페이스북 앱 생성 후 앱 콘솔 메뉴 들어가기 > 왼편 +제품 추가 메뉴 > Facebook 로그인 시작하기 클릭
- 로그인 제품 추가 후 왼쪽 대시보드 메뉴 클릭
- 방금 추가한 부분 밑에 OAuth 리디렉션 URl 복사하기
=> 권한을 위임 요청 - 응답이 완료되면 Service Provider 자원 접근키(액세스 토큰)를 리디렉션 URI로 리턴
=> 추가한 URI는 등록하지않아도됨, 페이스북에서 토큰을 리턴하면 firebase 콘솔에 등록한 URI에서는 토큰 사용 가능

- 앱 ID 및 앱 시크릿 코드 복사해서 firebase 프로젝트 콘솔에 정보 추가하기


4) 클라이언트 사이드(웹) firebase 개발 
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
 
<!-- sample.html -->
<body>
  <button onclick="login()">페북 로그인</button>
 
  <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-auth.js"></script>
    
 
  <!-- firebase-init -->
  <script src="../javascripts/firebase-init.js"></script>
 
  <script>
     var login = function(){
     var provider = new firebase.auth.FacebookAuthProvider();
     provider.addScope('user_birthday');
     provider.setCustomParameters({
          'display''popup'
     });
 
     firebase.auth().signInWithPopup(provider)
          .then(function(result){
          //로그인 팝업 관련 상태에 따른 처리
          })
        .catch(function(err){
 
         });
    }
 
  </script>
</body>
 
 
<!-- firebase-init.js -->
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API key 삽입할 >",
  authDomain: "<Project-ID>.firebaseapp.com",
};
 
firebase.initializeApp(config);
cs

- 권한 위임 요청 및 권한 위임 인증 key(자원 접근 권한)값 관리 등록 : 간단함, 구조 구성도 직접 개발하는 것보다 덜 신경씀
- 추가시켜야할 js 파일 목록 참조 : https://firebase.google.com/docs/web/setup

- firebase-init.js 내 들어가야할 내용 찾는 곳
1) apiKey : 프로젝트 콘솔 > 왼쪽 설정 버튼 > 프로젝트 설정 > 웹 API 키
2) Project-ID : 프로젝트 콘솔 > 왼쪽 설정 버튼 > 프로젝트 설정 > 프로젝트 ID

- 권한 위임 요청 버튼 : 로그인 버튼 만들고 이벤트 리스너 달기
- 이벤트 리스너(body > script) : 페이스북이 제공하는 권한 위임 요청 방식을 firebase 방법으로 구현(간단함)


5) 로그인 결과 firebase Authentication 콘솔 보기


[더하기]
- 액세스 토큰을 활용한 로그인 된 화면 및 기타 기능 만들어보기 : FB OAuth #2 포스팅
- API 키 관리하는 방법 : 비밀키 관리는 어떻게 할까?
- 액세스 토큰에 대해서 더 알아보기 : 만료 시간이나... 등등


[참고자료]
- NAVER D2, OAuth와 춤을 : http://d2.naver.com/helloworld/24942
- firebase, Firebase에서 사용자 관리하기 : https://firebase.google.com/docs/auth/web/manage-users

- facebook developer : https://developers.facebook.com/