Wijmo Snapshot 클래스를 사용한 실시간 Firestore 업데이트

추천0

페이지 정보

작성자 GrapeCity

작성일 2020-05-28 00:00 조회 2,908회 댓글 0건

본문

관련링크

다른 포스팅에서는 Firestore 및 Collection 클래스를 사용하는 방법에 대해 설명합니다. 이 클래스를 이용하면 하위 수준의 REST API를 사용해 Firestore 데이터베이스에 있는 데이터를 로드, 확인 및 편집할 수 있습니다. 하위 수준의 REST API는 가볍고 빠르지만 오프라인 캐싱, 실시간 업데이트와 같이 Firestore 웹 클라이언트 라이브러리에 의해 사용 가능해지는 고급 기능은 제공하지 않습니다.

Snapshot 클래스는 CollectionView 클래스를 확장하여 Firebase 컬렉션 및 쿼리에 대한 액세스 권한을 제공합니다. 또한 웹 클라이언트 라이브러리에 의존하여 실시간 업데이트 및 기타 고급 기능을 제공합니다. Snapshot 클래스를 사용하려면 NPM 또는 CDN에서 웹 클라이언트 라이브러리를 로드해야 합니다.

스냅샷 만들기

웹 클라이언트 라이브러리를 로드했다면 다음과 같이 Snapshot 클래스를 만들어 사용할 수 있습니다.

 // initialize Firestore web client library
 const firebaseConfig = {
     apiKey: …
     authDomain: …,
 };
 firebase.initializeApp(firebaseConfig);

 // get a snapshot of the "restaurants" collection
 const db = firebase.firestore();
 let restaurants = db.collection('restaurants');
 let snapshot = new Snapshot(restaurants, {
     query: restaurants.where('type', 'in', ['Japanese', 'Italian' ])
 });

 // bind the snapshot to a FlexGrid
 new FlexGrid('#theGrid', {
     itemsSource: snapshot
 });

위 코드는 웹 클라이언트 라이브러리를 초기화하는 것으로 시작합니다. 그런 다음 식당 유형이 "Japanese" 또는 "Italian"인 "restaurants" 컬렉션의 콘텐츠에 기반을 둔 Snapshot을 빌드합니다.

query 속성은 언제든지 변경될 수 있지만, 항상 "restaurants" 컬렉션에 기반을 두어야 합니다.

끝으로 이 코드에서는 Snapshot을 FlexGrid를 위한 데이터 소스로 사용합니다.

누구든지 "restaurants" 컬렉션을 변경하면 Snapshot은 이에 대한 알림을 받고 그리드는 자동으로 업데이트됩니다.

인증 활성화

Snapshot 클래스는 웹 클라이언트 라이브러리를 사용하며 이 라이브러리의 인증 메커니즘에 의존합니다.

대부분의 응용 프로그램은 읽기 및 쓰기 작업에 제한 사항을 적용하므로 특정 사용자만 데이터를 보거나 편집할 수 있습니다. 웹 클라이언트 라이브러리는 Firestore 데이터베이스 보안 규칙과 통합됩니다. Firebase 콘솔에서 이 규칙을 만들고 검토하고 수정할 수 있습니다. 예:

이 예에서는 누구나 데이터를 읽을 수 있지만 특정 사용자만 변경할 수 있도록 규칙이 설정되어 있습니다. 사용자는 데이터베이스 내에서 "admins" 컬렉션을 사용하여 정의되어 있습니다. "admins" 컬렉션에는 데이터베이스에 쓸 권한이 있는 사용자의 이메일이 포함되어 있습니다.

규칙은 다음과 같습니다.

service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
       allow read;
       allow write: if exists(/databases/$(database)/documents/admins/$(request.auth.token.email));
     }
   }
 }

Firestore 클래스를 사용할 때와 마찬가지로 OAuth2 클래스를 사용하여 사용자에게 권한을 부여할 수 있습니다. 유일한 차이점은 웹 클라이언트 라이브러리를 사용할 때 이전처럼 accessToken 속성을 사용하지는 않는다는 것입니다. 대신에 OAuth2 클래스가 제공하는 idToken에 기반을 둔 자격 증명 개체를 만들고 이 자격 증명을 사용해 Firebase 클라이언트 라이브러리로 서명해야 합니다.

 // update state when user changes
 auth.userChanged.addHandler(s => {
     let user = s.user;
     oAuthBtn.textContent = user ? 'Sign Out' : 'Sign In';

     // update Firestore access tokens
     //fs.accessToken = user ? s.accessToken : null;

     // Sign in with credential from the Google user.
     // https://firebase.google.com/docs/auth/web/google-signin
     if (user) {
         let credential = firebase.auth.GoogleAuthProvider.credential(s.idToken);
         firebase.auth().signInWithCredential(credential);
     } else {
         firebase.auth().signOut();
     }
 });