Firebase-빠른 가이드

공식 Firebase 문서에 따르면-

Firebase는 데이터 저장소, 사용자 인증, 정적 호스팅 등을 포함하여 앱의 백엔드를 강화할 수 있습니다. 특별한 사용자 경험을 만드는 데 집중하십시오. 나머지는 우리가 처리합니다. Android, iOS 및 JavaScript SDK를 사용하여 크로스 플랫폼 네이티브 모바일 및 웹 앱을 빌드하십시오. 서버 측 라이브러리 또는 REST API를 사용하여 Firebase를 기존 백엔드에 연결할 수도 있습니다.

Firebase 기능

Real-time Database − Firebase는 JSON 데이터를 지원하며 이에 연결된 모든 사용자는 변경 될 때마다 실시간 업데이트를받습니다.
Authentication − 익명, 비밀번호 또는 다른 소셜 인증을 사용할 수 있습니다.
Hosting − 애플리케이션은 Firebase 서버에 대한 보안 연결을 통해 배포 할 수 있습니다.

Firebase 장점

간단하고 사용자 친화적입니다. 복잡한 구성이 필요하지 않습니다.
데이터는 실시간이므로 모든 변경 사항이 연결된 클라이언트를 자동으로 업데이트합니다.
Firebase는 간단한 제어 대시 보드를 제공합니다.
선택할 수있는 유용한 서비스가 많이 있습니다.

Firebase 제한

Firebase 무료 요금제는 연결 50 개와 저장 용량 100MB로 제한됩니다.

다음 장에서는 Firebase의 환경 설정에 대해 설명합니다.

이 장에서는 기존 애플리케이션에 Firebase를 추가하는 방법을 보여줍니다. 우리는 필요합니다NodeJS. 아직없는 경우 다음 표에서 링크를 확인하십시오.

Sr. 아니.	소프트웨어 및 설명
1	NodeJS and NPM NodeJS는 Firebase 개발에 필요한 플랫폼입니다. 우리의 체크 아웃 NodeJS 환경 설정을 .

1 단계-Firebase 계정 만들기

여기 에서 Firebase 계정을 만들 수 있습니다 .

2 단계-Firebase 앱 만들기

대시 보드 페이지에서 새 앱을 만들 수 있습니다. 다음 이미지는 우리가 만든 앱을 보여줍니다. 우리는Manage App 버튼을 눌러 앱에 들어갑니다.

3a 단계-기본 HTML / js 앱 만들기

앱을 배치 할 폴더를 생성하기 만하면됩니다. 그 폴더 안에는index.html 과 index.js파일. 앱의 헤더에 Firebase를 추가합니다.

index.html

<html>
   <head>
      <script src = "https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
      <script type = "text/javascript" src = "index.js"></script>
   </head>
	
   <body>

   </body>
</html>

3b 단계-NPM 또는 Bower 사용

기존 앱을 사용하려는 경우 Firebase NPM 또는 Bowers 패키지를 사용할 수 있습니다. 앱 루트 폴더에서 다음 명령 중 하나를 실행합니다.

npm install firebase --save

bower install firebase

Firebase 데이터는 JSON 개체를 나타냅니다. Firebase 대시 보드에서 앱을 열면 다음을 클릭하여 수동으로 데이터를 추가 할 수 있습니다.+ 기호.

간단한 데이터 구조를 만들 것입니다. 아래 이미지를 확인할 수 있습니다.

이전 장에서는 Firebase를 앱에 연결했습니다. 이제 Firebase를 콘솔에 기록 할 수 있습니다.

console.log(firebase)

플레이어의 컬렉션에 대한 참조를 만들 수 있습니다.

var ref = firebase.database().ref('players');

console.log(ref);

콘솔에서 다음 결과를 볼 수 있습니다.

이 장에서는 Firebase의 배열 표현에 대해 설명합니다. 이전 장의 동일한 데이터를 사용합니다.

다음 JSON 트리를 플레이어의 컬렉션에 전송하여이 데이터를 생성 할 수 있습니다.

['john', 'amanda']

이는 Firebase가 배열을 직접 지원하지 않지만 정수를 키 이름으로 사용하여 객체 목록을 생성하기 때문입니다.

배열을 사용하지 않는 이유는 Firebase가 실시간 데이터베이스 역할을하고 두 명의 사용자가 동시에 배열을 조작하는 경우 배열 색인이 지속적으로 변경되므로 결과가 문제가 될 수 있기 때문입니다.

Firebase가 처리하는 방식에 따라 키 (색인)는 항상 동일하게 유지됩니다. 우리는 삭제할 수 있습니다john 과 amanda 여전히 키 (색인) 1이 있습니다.

이 장에서는 Firebase에 데이터를 저장하는 방법을 보여줍니다.

세트

그만큼 set메소드는 지정된 경로에 데이터를 쓰거나 바꿉니다. 플레이어 컬렉션에 대한 참조를 만들고 두 명의 플레이어를 설정하겠습니다.

var playersRef = firebase.database().ref("players/");

playersRef.set ({
   John: {
      number: 1,
      age: 30
   },
	
   Amanda: {
      number: 2,
      age: 20
   }
});

다음과 같은 결과를 볼 수 있습니다.

푸시 방법

그만큼 push()메소드는 데이터가 푸시 될 때 고유 한 ID를 생성합니다. 고유 ID로 이전 챕터의 플레이어를 만들려면 아래에 제공된 코드 스 니펫을 사용할 수 있습니다.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");
playersRef.push ({
   name: "John",
   number: 1,
   age: 30
});

playersRef.push ({
   name: "Amanda",
   number: 2,
   age: 20
});

이제 우리의 데이터는 다르게 보일 것입니다. 이름은 나머지 속성과 마찬가지로 이름 / 값 쌍입니다.

핵심 방법

Firebase에서 모든 키를 가져올 수 있습니다. key()방법. 예를 들어, 컬렉션 이름을 얻으려면 다음 스 니펫을 사용할 수 있습니다.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");

var playersKey = playersRef.key();
console.log(playersKey);

콘솔은 컬렉션 이름 (플레이어)을 기록합니다.

이에 대해서는 다음 장에서 자세히 설명합니다.

트랜잭션 데이터는 데이터베이스에서 일부 데이터를 반환 한 다음 일부 계산을 수행하고 다시 저장해야 할 때 사용됩니다.

플레이어 목록에 한 명의 플레이어가 있다고 가정 해 보겠습니다.

속성을 검색하고 1 년의 나이를 추가 한 다음 다시 Firebase에 반환하려고합니다.

그만큼 amandaRef컬렉션에서 나이를 검색하고 트랜잭션 메서드를 사용할 수 있습니다. 현재 나이를 얻고, 1 년을 추가하고 컬렉션을 업데이트합니다.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var amandaAgeRef = ref.child("players").child("-KGb1Ls-gEErWbAMMnZC").child('age');

amandaAgeRef.transaction(function(currentAge) {
   return currentAge + 1;
});

이 코드를 실행하면 age 값이 21.

이 장에서는 Firebase 데이터를 읽는 방법을 보여줍니다. 다음 이미지는 읽고 자하는 데이터를 보여줍니다.

우리는 on()데이터를 검색하는 방법. 이 메서드는 이벤트 유형을"value" 그런 다음 snapshot데이터의. 추가 할 때val() 메서드를 스냅 샷에 추가하면 데이터의 JavaScript 표현을 얻을 수 있습니다.

예

다음 예를 살펴 보겠습니다.

var ref = firebase.database().ref();

ref.on("value", function(snapshot) {
   console.log(snapshot.val());
}, function (error) {
   console.log("Error: " + error.code);
});

다음 코드를 실행하면 콘솔에 데이터가 표시됩니다.

다음 장에서는 데이터를 읽는 데 사용할 수있는 다른 이벤트 유형에 대해 설명합니다.

Firebase는 데이터 읽기를위한 다양한 이벤트 유형을 제공합니다. 가장 일반적으로 사용되는 몇 가지가 아래에 설명되어 있습니다.

값

첫 번째 이벤트 유형은 value. 지난 장에서 가치를 사용하는 방법을 보여 드렸습니다. 이 이벤트 유형은 데이터가 변경 될 때마다 트리거되며 하위를 포함한 모든 데이터를 검색합니다.

child_added

이 이벤트 유형은 모든 플레이어와 새 플레이어가 데이터에 추가 될 때마다 한 번씩 트리거됩니다. 목록에서 추가 된 플레이어 및 이전 플레이어에 대한 액세스 권한을 얻으므로 목록 데이터를 읽는 데 유용합니다.

예

다음 예를 살펴 보겠습니다.

var playersRef = firebase.database().ref("players/");

playersRef.on("child_added", function(data, prevChildKey) {
   var newPlayer = data.val();
   console.log("name: " + newPlayer.name);
   console.log("age: " + newPlayer.age);
   console.log("number: " + newPlayer.number);
   console.log("Previous Player: " + prevChildKey);
});

우리는 다음과 같은 결과를 얻을 것입니다.

Bob이라는 새 플레이어를 추가하면 업데이트 된 데이터를 받게됩니다.

child_changed

이 이벤트 유형은 데이터가 변경 될 때 트리거됩니다.

예

다음 예를 살펴 보겠습니다.

var playersRef = firebase.database().ref("players/");

playersRef.on("child_changed", function(data) {
   var player = data.val();
   console.log("The updated player name is " + player.name);
});

우리는 바꿀 수 있습니다 Bob ...에 Maria Firebase에서 업데이트를 가져옵니다.

child_removed

삭제 된 데이터에 대한 액세스 권한을 얻으려면 child_removed 이벤트 유형.

예

var playersRef = firebase.database().ref("players/");

playersRef.on("child_removed", function(data) {
   var deletedPlayer = data.val();
   console.log(deletedPlayer.name + " has been deleted");
});

이제 Firebase에서 Maria를 삭제하여 알림을받을 수 있습니다.

이 장에서는 Firebase에서 콜백을 분리하는 방법을 보여줍니다.

이벤트 유형에 대한 콜백 분리

함수에 대한 콜백을 분리하고 싶다고 가정 해 보겠습니다. value 이벤트 유형.

예

var playersRef = firebase.database().ref("players/");

ref.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

우리는 사용해야합니다 off()방법. 이렇게하면 모든 콜백이 제거됩니다.value 이벤트 유형.

playersRef.off("value");

모든 콜백 분리

모든 콜백을 분리하려면 다음을 사용할 수 있습니다.

playersRef.off();

Firebase는 데이터를 주문하는 다양한 방법을 제공합니다. 이 장에서는 간단한 쿼리 예제를 보여줍니다. 이전 장의 동일한 데이터를 사용합니다.

어린이 주문

이름으로 데이터를 주문하려면 다음 코드를 사용할 수 있습니다.

예

다음 예를 살펴 보겠습니다.

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").on("child_added", function(data) {
   console.log(data.val().name);
});

알파벳순으로 이름이 표시됩니다.

키로 주문

비슷한 방식으로 키별로 데이터를 주문할 수 있습니다.

예

다음 예를 살펴 보겠습니다.

var playersRef = firebase.database().ref("players/");

playersRef.orderByKey().on("child_added", function(data) {
   console.log(data.key);
});

출력은 다음과 같습니다.

값으로 정렬

값으로 데이터를 주문할 수도 있습니다. Firebase에 등급 컬렉션을 추가해 보겠습니다.

이제 우리는 각 플레이어의 값으로 데이터를 주문할 수 있습니다.

예

다음 예를 살펴 보겠습니다.

var ratingRef = firebase.database().ref("ratings/");

ratingRef.orderByValue().on("value", function(data) {
   
   data.forEach(function(data) {
      console.log("The " + data.key + " rating is " + data.val());
   });
   
});

출력은 다음과 같습니다.

Firebase는 데이터를 필터링하는 여러 가지 방법을 제공합니다.

처음과 마지막으로 제한

처음과 마지막의 한계가 무엇인지 이해합시다.

limitToFirst 메서드는 첫 번째 항목부터 지정된 항목 수를 반환합니다.
limitToLast 메서드는 마지막 항목부터 시작하여 지정된 수의 항목을 반환합니다.

우리의 예는 이것이 어떻게 작동하는지 보여줍니다. 데이터베이스에는 두 명의 플레이어 만 있으므로 쿼리를 한 명의 플레이어로 제한합니다.

예

다음 예를 살펴 보겠습니다.

var firstPlayerRef = firebase.database().ref("players/").limitToFirst(1);

var lastPlayerRef = firebase.database().ref('players/').limitToLast(1);

firstPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

lastPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

콘솔은 첫 번째 쿼리의 첫 번째 플레이어와 두 번째 쿼리의 마지막 플레이어를 기록합니다.

기타 필터

다른 Firebase 필터링 방법을 사용할 수도 있습니다. 그만큼startAt(), endAt() 그리고 equalTo()주문 방법과 결합 할 수 있습니다. 이 예에서 우리는 그것을orderByChild() 방법.

예

다음 예를 살펴 보겠습니다.

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").startAt("Amanda").on("child_added", function(data) {
   console.log("Start at filter: " + data.val().name);
});

playersRef.orderByChild("name").endAt("Amanda").on("child_added", function(data) {
   console.log("End at filter: " + data.val().name);
});

playersRef.orderByChild("name").equalTo("John").on("child_added", function(data) {
   console.log("Equal to filter: " + data.val().name);
});

playersRef.orderByChild("age").startAt(20).on("child_added", function(data) {
   console.log("Age filter: " + data.val().name);
});

첫 번째 쿼리는 이름으로 요소를 정렬하고 이름으로 플레이어에서 필터링합니다. Amanda. 콘솔은 두 플레이어를 모두 기록합니다. 두 번째 쿼리는이 이름으로 쿼리를 종료하므로 "Amanda"를 기록합니다. 세 번째는 "John"이라는 이름을 가진 플레이어를 검색하고 있으므로 기록합니다.

네 번째 예는 필터를 "연령"값과 결합하는 방법을 보여줍니다. 문자열 대신 숫자를startAt() 나이는 숫자 값으로 표현되기 때문입니다.

이 장에서는 Firebase의 모범 사례를 살펴 보겠습니다.

데이터 중첩 방지

Firebase에서 데이터를 가져 오면 모든 하위 노드를 가져옵니다. 이것이 딥 네 스팅이 모범 사례가 아닌 이유입니다.

데이터 비정규 화

깊은 중첩 기능이 필요한 경우 몇 가지 다른 컬렉션을 추가하는 것이 좋습니다. 데이터 중복을 추가하고 둘 이상의 요청을 사용하여 필요한 항목을 검색해야하는 경우에도 마찬가지입니다.

이 장에서는 Firebase 이메일 / 비밀번호 인증을 사용하는 방법을 보여줍니다.

사용자 생성

사용자를 인증하기 위해 우리는 createUserWithEmailAndPassword(email, password) 방법.

예

다음 예를 살펴 보겠습니다.

var email = "[email protected]";
var password = "mypassword";

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

Firebase 대시 보드를 확인하고 사용자가 생성되었는지 확인할 수 있습니다.

로그 아웃

마지막으로 사용자를 로그 아웃 할 수 있습니다. signOut() 방법.

예

다음 예를 살펴 보겠습니다.

firebase.auth().signOut().then(function() {
   console.log("Logged out!")
}, function(error) {
   console.log(error.code);
   console.log(error.message);
});

이 장에서는 Firebase에서 Google 인증을 설정하는 방법을 보여줍니다.

1 단계-Google 인증 활성화

Firebase 대시 보드를 열고 Auth왼쪽 메뉴에서. 사용 가능한 방법 목록을 열려면SIGN_IN_METHODS 탭 메뉴에서.

이제 선택할 수 있습니다 Google 목록에서 활성화하고 저장하십시오.

2 단계-버튼 만들기

우리 내부 index.html, 두 개의 버튼을 추가합니다.

index.html

<button onclick = "googleSignin()">Google Signin</button>
<button onclick = "googleSignout()">Google Signout</button>

3 단계-로그인 및 로그 아웃

이 단계에서는 로그인 및 로그 아웃 기능을 생성합니다. 우리는 사용할 것입니다signInWithPopup() 과 signOut() 행동 양식.

예

다음 예를 살펴 보겠습니다.

var provider = new firebase.auth.GoogleAuthProvider();

function googleSignin() {
   firebase.auth()
   
   .signInWithPopup(provider).then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function googleSignout() {
   firebase.auth().signOut()
	
   .then(function() {
      console.log('Signout Succesfull')
   }, function(error) {
      console.log('Signout Failed')  
   });
}

페이지를 새로 고침 한 후 Google Signin버튼을 눌러 Google 팝업을 실행합니다. 로그인에 성공하면 개발자 콘솔이 사용자로 로그인됩니다.

클릭 할 수도 있습니다. Google Signout버튼을 눌러 앱에서 로그 아웃합니다. 콘솔은 로그 아웃이 성공했는지 확인합니다.

이 장에서는 Firebase Facebook 인증으로 사용자를 인증합니다.

1 단계-Facebook 인증 활성화

Firebase 대시 보드를 열고 Auth사이드 메뉴에서. 다음으로 우리는SIGN-IN-METHOD탭 바에서. Facebook 인증을 활성화하고 추가해야하므로 열어 둡니다.App ID 과 App Secret 2 단계를 마치면

2 단계-Facebook 앱 만들기

Facebook 인증을 활성화하려면 Facebook 앱을 만들어야합니다. 시작 하려면 이 링크 를 클릭하십시오 . 앱이 생성되면 복사해야합니다.App ID 과 App Secret 1 단계에서 열어 둔 Firebase 페이지로 이동합니다. OAuth Redirect URI이 창에서 Facebook 앱으로. 찾을 수 있습니다+ Add Product Facebook 앱 대시 보드의 사이드 메뉴 내부.

고르다 Facebook Login사이드 메뉴에 나타납니다. 입력 필드를 찾을 수 있습니다Valid OAuth redirect URIs 복사해야 할 곳 OAuth Redirect URI Firebase에서.

3 단계-Facebook SDK에 연결

시작 부분에 다음 코드를 복사하십시오. body 태그 index.html. 교체하십시오'APP_ID' Facebook 대시 보드에서 앱 ID로

예

다음 예를 살펴 보겠습니다.

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));
	
</script>

4 단계-버튼 만들기

처음 세 단계에서 모든 것을 설정 했으므로 이제 로그인 및 로그 아웃을위한 두 개의 버튼을 만들 수 있습니다.

index.html

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

5 단계-인증 기능 생성

이것이 마지막 단계입니다. 열다index.js 다음 코드를 복사하십시오.

index.js

var provider = new firebase.auth.FacebookAuthProvider();

function facebookSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
   });
}

function facebookSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

이 장에서는 Twitter 인증을 사용하는 방법에 대해 설명합니다.

1 단계-Twitter 앱 만들기

이 링크 에서 Twitter 앱을 만들 수 있습니다 . 앱이 생성되면Keys and Access Tokens 찾을 수있는 곳 API Key 과 API Secret. 2 단계에서 필요합니다.

2 단계-Twitter 인증 활성화

Firebase 대시 보드 사이드 메뉴에서 Auth. 그런 다음SIGN-IN-METHOD탭. 활성화하려면 Twitter를 클릭하십시오. 추가해야합니다.API Key 과 API Secret 1 단계에서

그런 다음 복사해야합니다. callback URLTwitter 앱에 붙여 넣습니다. 을 클릭하면 Twitter 앱의 콜백 URL을 찾을 수 있습니다.Settings 탭.

3 단계-버튼 추가

이 단계에서는 내부에 두 개의 버튼을 추가합니다. body 태그 index.html.

index.html

<button onclick = "twitterSignin()">Twitter Signin</button>
<button onclick = "twitterSignout()">Twitter Signout</button>

4 단계-인증 기능

이제 Twitter 인증을위한 함수를 만들 수 있습니다.

index.js

var provider = new firebase.auth.TwitterAuthProvider();

function twitterSignin() {
   firebase.auth().signInWithPopup(provider)
    
  .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code)
      console.log(error.message)
   });
}

function twitterSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed!')
   });
}

앱을 시작할 때 두 개의 버튼을 클릭하여 로그인하거나 로그 아웃 할 수 있습니다. 콘솔은 인증이 성공했는지 확인합니다.

이 장에서는 GitHub API를 사용하여 사용자를 인증하는 방법을 보여줍니다.

1 단계-GitHub 인증 활성화

Firebase 대시 보드를 열고 Auth 사이드 메뉴에서 SIGN-IN-METHOD탭 바에서. GitHub 인증을 활성화하고Callback URL. 2 단계에서 필요합니다. 추가해야하므로이 탭을 열어 둘 수 있습니다.Client ID 과 Client Secret 2 단계를 마치면

2 단계-Github 앱 만들기

이 링크 를 따라 GitHub 앱을 만듭니다. 당신은 복사해야Callback URL Firebase에서 Authorization callback URL들. 앱이 생성되면Client Key 그리고 Client Secret GitHub 앱에서 Firebase로.

3 단계-버튼 만들기

두 개의 버튼을 body 꼬리표.

index.html

<button onclick = "githubSignin()">Github Signin</button>
<button onclick = "githubSignout()">Github Signout</button>

4 단계-인증 기능 생성

로그인 및 로그 아웃 기능을 index.js 파일.

index.js

var provider = new firebase.auth.GithubAuthProvider();

function githubSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function githubSignout(){
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

이제 버튼을 클릭하여 인증을 트리거 할 수 있습니다. 콘솔에 인증 성공이 표시됩니다.

이 장에서는 익명으로 사용자를 인증합니다.

1 단계-익명 인증 활성화

이것은 이전 장에서와 동일한 프로세스입니다. Firebase 대시 보드를 열어야합니다.Auth 사이드 메뉴에서 SIGN-IN-METHOD탭 바 안에. 익명 인증을 활성화해야합니다.

2 단계-로그인 기능

우리는 사용할 수 있습니다 signInAnonymously() 이 인증 방법.

예

다음 예를 살펴 보겠습니다.

firebase.auth().signInAnonymously()
.then(function() {
   console.log('Logged in as Anonymous!')
   
   }).catch(function(error) {
   var errorCode = error.code;
   var errorMessage = error.message;
   console.log(errorCode);
   console.log(errorMessage);
});

이 장에서는 Firebase 연결 상태를 처리하는 방법을 보여줍니다.

연결 확인

다음 코드를 사용하여 연결 값을 확인할 수 있습니다.

index.js

var connectedRef = firebase.database().ref(".info/connected");

connectedRef.on("value", function(snap) {
   if (snap.val() === true) {
      alert("connected");
   } else {
      alert("not connected");
   }
});

앱을 실행하면 팝업이 연결에 대해 알려줍니다.

위에 주어진 함수를 사용하면 연결 상태를 추적하고 그에 따라 앱을 업데이트 할 수 있습니다.

Firebase의 보안은 보안 규칙 내에 JSON 유사 객체를 설정하여 처리됩니다. 클릭하면 보안 규칙을 찾을 수 있습니다.Database 사이드 메뉴 내부에 RULES 탭 바에서.

이 장에서는 Firebase 데이터를 보호하는 방법을 보여주는 몇 가지 간단한 예를 살펴 보겠습니다.

읽고 쓰기

Firebase 보안 규칙 내에 정의 된 다음 코드 스 니펫은 /users/'$uid'/ 동일한 인증 된 사용자 uid,하지만 누구나 읽을 수 있습니다.

예

다음 예를 살펴 보겠습니다.

{
   "rules": {
      "users": {
         
         "$uid": {
            ".write": "$uid === auth.uid",
            ".read": true
         }
         
      }
   }
}

확인

다음 예제를 사용하여 데이터를 문자열에 적용 할 수 있습니다.

예

{
   "rules": {
      
      "foo": {
         ".validate": "newData.isString()"
      }
      
   }
}

이 장에서는 Firebase 보안 규칙의 표면 만 다루었습니다. 중요한 것은 이러한 규칙이 작동하는 방식을 이해하여 앱 내에서 결합 할 수 있도록하는 것입니다.

이 장에서는 Firebase 서버에서 앱을 호스팅하는 방법을 보여줍니다.

시작하기 전에 텍스트를 추가하겠습니다. index.html본문 태그. 이 예에서는 다음 텍스트를 추가합니다.

<h1>WELCOME TO FIREBASE TUTORIALS APP</h1>

1 단계-Firebase 도구 설치

Firebase 도구를 전역 적으로 설치해야합니다. command prompt 창문.

npm install -g firebase-tools

2 단계-Firebase 앱 초기화

먼저 Firebase에 로그인해야합니다. command prompt.

firebase login

다음에서 앱의 루트 폴더를 엽니 다. command prompt 다음 명령을 실행하십시오.

firebase init

이 명령은 앱을 초기화합니다.

NOTE − 기본 구성을 사용한 경우 public 폴더가 생성되고 index.html이 폴더 안에는 앱의 시작점이됩니다. 해결 방법으로 공용 폴더에 앱 파일을 복사 할 수 있습니다.

3 단계-Firebase 앱 배포

이것이이 장의 마지막 단계입니다. 다음 명령을 실행하십시오.command prompt 앱을 배포합니다.

firebase deploy

이 단계가 끝나면 콘솔에서 앱 Firebase URL을 기록합니다. 우리의 경우에는https://tutorialsfirebase.firebaseapp.com. 브라우저에서이 링크를 실행하여 앱을 볼 수 있습니다.

Firebase-빠른 가이드

Firebase 기능

Firebase 장점

Firebase 제한

1 단계-Firebase 계정 만들기

2 단계-Firebase 앱 만들기

3a 단계-기본 HTML / js 앱 만들기

index.html

3b 단계-NPM 또는 Bower 사용

세트

최신 정보

푸시 방법

핵심 방법

예

값

child_added

예

child_changed

예

child_removed

예

이벤트 유형에 대한 콜백 분리

예

모든 콜백 분리

어린이 주문

예

키로 주문

예

값으로 정렬

예

처음과 마지막으로 제한

예

기타 필터

예

데이터 중첩 방지

데이터 비정규 화

사용자 생성

예

로그인

예

로그 아웃

예

1 단계-Google 인증 활성화

2 단계-버튼 만들기

index.html

3 단계-로그인 및 로그 아웃

예

1 단계-Facebook 인증 활성화

2 단계-Facebook 앱 만들기

3 단계-Facebook SDK에 연결

예

4 단계-버튼 만들기

index.html

5 단계-인증 기능 생성

index.js

1 단계-Twitter 앱 만들기

2 단계-Twitter 인증 활성화

3 단계-버튼 추가

index.html

4 단계-인증 기능

index.js

1 단계-GitHub 인증 활성화

2 단계-Github 앱 만들기

3 단계-버튼 만들기

index.html

4 단계-인증 기능 생성

index.js

1 단계-익명 인증 활성화

2 단계-로그인 기능

예

연결 확인

index.js

읽고 쓰기

예

확인

예

1 단계-Firebase 도구 설치

2 단계-Firebase 앱 초기화

3 단계-Firebase 앱 배포