'Tools/Firebase'에 해당되는 글 7건

애플리케이션에 파이어베이스 인증 적용

1. 정의

- 애플리케이션에 파이어베이스인증 정보를 삽입해서 사용한다

2. 방법

1) 파이어베이스에 접속하여 자신의 프로젝트를 클릭 한다

2) 해당하는 프로젝트 유형을 클릭하여 해당 script  소스를 복사한다

3. 인증 설정

1) auth = firebase.auth();

- 해당 변수를 이용하여 auth 정보 초기화

2) var authProvider = new firebase.auth.GoogleAuthProvider();

- 구글 계정을 이용한 인증정보 설정

3) auth.signInWithPopup(authProvider);

- 인증 팝업을 띄운다

4) 확인

var auth; // Initialize Firebase var config = { apiKey: "AIzaSyAsh7KajFCLWHqAAaS0eSNompCUqyXH4vs", authDomain: "editor-7e5ba.firebaseapp.com", databaseURL: "https://editor-7e5ba.firebaseio.com", storageBucket: "editor-7e5ba.appspot.com", messagingSenderId: "219994741100" }; firebase.initializeApp(config); auth = firebase.auth(); var authProvider = new firebase.auth.GoogleAuthProvider(); auth.signInWithPopup(authProvider);

- firebase serve

- 위 명령어로 해당 어플리케이션을 실행하면 아래와 같은 구글 인증 팝업창이 뜬다

4. 인증을 이용한 소스

1)  인증 허용/불허용을 이용한 소스

var auth; // Initialize Firebase var config = { apiKey: "AIzaSyAsh7KajFCLWHqAAaS0eSNompCUqyXH4vs", authDomain: "editor-7e5ba.firebaseapp.com", databaseURL: "https://editor-7e5ba.firebaseio.com", storageBucket: "editor-7e5ba.appspot.com", messagingSenderId: "219994741100" }; firebase.initializeApp(config); auth = firebase.auth(); var authProvider = new firebase.auth.GoogleAuthProvider(); //인증여부 auth.onAuthStateChanged(function(user){ if(user){ //인증성공 console.log(user); console.log("success"); }else{//인증실패 auth.signInWithPopup(authProvider); } });

파이어베이스(firebase) 로컬개발환경 설정

1. 설치

- node.js 와 firebase cli를 설치해야한다

1) node.js

- 사이트 : https://nodejs.org/en/

2) firebase cli

- npm을 통해 설치가 가능하다

- npm install firebase-tools -g

- 맥 os 경우 root 계정으로 실행

2. firebase cli 로그인

- 컴퓨터와 firebase연결

- firebase login

-  해당 명령어를 입력하면 firebase 웹 사이트로 이동하여 승인여부를 묻는 창이 뜬다

- firebase list 

- 해당 명령어로 프로젝트 정보 확인이 가능하다

3. firebase 프로젝트 초기화

- 프로젝트 폴더생성

- firebase init 으로 초기화 한다

- 선택을 해야하는데 하나는 데이터 베이스 설정, 하나는 호스팅 설정이다

1) 데이터베이스 설정

A. 프로젝트 설정

- 파이어베이스에 이미 만들어 놓은 프로젝트를 선택

B. 데이터 베이스 이름 설정

2) 호스팅 설정

A. 디렉토리

3) 확인

- json 파일이 생성됬다

4. index.html 브라우저로 띄우기

- 초기화로 생성된 기본 파일인 index.html을 브라우저에 출력

- firebase serve

- 해당 명령어를 입력하면 브라우저에서 확인 가능한 주소를 보여준다

파이어베이스(Firebase) 새 프로젝트 만들기

1. 사이트 및 회원가입

- 사이트: https://firebase.google.com

- 회원가입 : 구글, 깃허브 등 다양한 서브 파트로 로그인이 가능하다

2. 프로젝트 만들기

1) 콘솔로그로 이동

2) 프로젝트 만들기

- 시간이 조금 소요된다

3. 콘솔 창 설정

0) 웹 앱 firebase 추가

- 셋 중 자신이 원하는 프로젝트를 선택한다

- 선택 후, firebase를 적용 시키기 위한 소스가 팝업된다

1) Authentication 설정

a. 로그인 방법 설정

- 화면에 보이는 google 로고를 클릭하면 구글로 로그인이 가능해진다

2) DataBase

- 실시간 클라우드 

- 데이터는 json 형식으로 저장된다

- 화면에 + 를 클릭하며 해당 데이터를 추가한다

a. 규칙

- 권한 설정이 가능하며 시뮬레이션 버튼으로 데이터 읽기, 쓰기 등을 테스트 할 수 있다