파이어 베이스는 아주 간단하게 주요 인증 (sns, email, 문자발송)등을 쉽게 구현합니다. 로그인을 적용하는 방법은 2가지가 있는데, 첫 번째는 삽입형으로, 웹소스에 FirebaseUI 인증에 접근할 수 있는 UI까지 완전 삽입하는 방법, 두번째는 사용할 로그인 타입의 UI를 직접 만들 수 있는 Firebase SDK 인증 방식이 있습니다.
[공식문서]
Firebase 인증소개 : https://firebase.google.com/docs/auth/?authuser=0 .
기본 UI로 로그인 : https://firebase.google.com/docs/auth/web/firebaseui?authuser=0 .
1. 프로젝트 생성.
먼저 파이어 베이스 프로젝트를 추가하겠습니다. 파이어 베이스 콘솔페이지에서, 새 프로젝트를 선택합니다.
프로젝트 추가 창이 뜨면, 프로젝트 이름을 적고 프로젝트 만들기 버튼을 눌러 주도록 합니다.
콘솔화면에 들어와 웹추가 버튼을 눌러 줍니다.
그러면, 파이어 베이스 설정 코드를 붙여 넣어 파이어베이스 SDK를 초기화 할 수 있도록 해 줍니다. 사용할 웹페이지의 Head 태그 사이에 붙여 넣도록 합니다.
2. 파이어 베이스 인증 라이브러리 추가.
지금 부터 시작하는 내용은 공식문서의 [ 기본 UI로 로그인 ] 페이지의 내용을 보고 진행하였습니다. 함께 보며 따라하신다면 좋으실 것 같습니다.
위에서 html소스를 붙여 넣은 것은, 파이어 베이스 기본 라이브러리와 생성한 프로젝트의 설정 입니다. 인증을 사용하기 위해서는 인증 라이브러리를 추가해야 합니다. 공식문서에는 3가지 방법을 설명하고 있는 데, 저는 그중 CDN을 통해 추가하도록 하겠습니다. 아래 태그를 <head> 태그 속에 붙여 넣으면 됩니다.
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
3. 로그인 방법 설정.
파이어 베이스는 현재 이메일/비밀번호 부터 익명의 로그인까지 10가지 (게임센터는 베타) 로그인 방법을 제공합니다. 처음에는 모두 비활성화 되어 있으므로, 사용할 방법을 파이어 베이스에서 설정해야 합니다.
일단 이메일/비밀번호를 사용해 로그인할 수 있도록 설정하겠습니다. 관리자 콘솔에서 Authentication을 선택하고, 로그인 방법 탭을 선택한 후 이메일/비밀번호를 선택합니다.
아래와 같이 [이메일/비밀번호]에 사용설정을 한 후 저장 버튼을 눌러 주도록 합니다. (상단 하나만 활성화 합니다.)
그 다음 파이어 베이스 인증 라이브러리를 추가합니다.
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
4. 로그인 창 호출.
너무 간단해 당황스럽지만, 이제 마지막 단원입니다. 아래와 같이 로그인 UI를 그려 주는 창을 호출 합니다.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', {
signInFlow: 'popup',
signInSuccessUrl: 'http://ntct24p006.cafe24.com/corner_v1/service/',
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
// Other config options...
});
그리고, 창이 그려질 위치를 지정해 줍니다.
<div id="firebaseui-auth-container"></div>
