[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/
'기타 > 멋쟁이사자처럼' 카테고리의 다른 글
| [firebase] 시작하기 전 - firebase가 뭐야 (0) | 2017.05.31 |
|---|---|
| [git] 버젼관리 #3 (0) | 2017.03.24 |
| [git] 버젼관리 #2 (0) | 2017.03.22 |
| [git] 버젼관리 #1 (0) | 2017.03.20 |
| [rails] 레일즈 모델 - 트랜잭션 (0) | 2017.03.04 |
댓글