Firebase의 Firestore와 Storage를 이용해 파일 업로드, 파일 정보 가져오기

 

firebase의 authAuthentication을 통해 로그인한 사용자만 cloud-firestore에 파일을 저장하는 기능을 구현하였습니다.

Cloud Firestore 이해하기 > Firebase 공식 사이트 참고 게시물

 

---

"데이터 추가"

Cloud Firestore에 데이터 추가 - Firebase 공식 사이트 참고 게시물

웹에서 Storage로 파일 업로드 - Firebase 공식 사이트 참고 게시물

 코드 설명

1. "파일 저장 버튼"을 클릭하면 인증 제공업체(google)에 현재 로그인한 사용자의 정보를 가져온다.
2. 로그인된 사용자면 firestore, storage에 파일을 추가할 수 있는 addFile함수를 호출하고, 로그인되지 않은 사용자라면 로그인을 할 수 있는 팝업창이 뜨도록 한다.
3. addFile함수 : 선택된 파일의 이름으로 storage에 파일을 업로드하고, storage에 파일이 성공적으로 업로드 되었다면 firestore에 파일명, 파일url, 파일id(파일명+저장시간), 저장시간과 같은 정보들을 저장한다. 

 

파일을 storage에 저장한 결과

파일 정보를 DB에 저장한 결과

 

 

 

"데이터 읽기"

 

Cloud Firestore로 데이터 가져오기 - Firebase 공식 사이트 참고 게시물

 

 코드 설명

1. 로그인된 사용자의 정보를 가져와 filelist함수를 호출한다.
2. filelist 함수 : 사용자의 uid에 따른 "filelist(하위컬렉션)" 내에 저장되어 있는 문서 데이터들을 rederFile함수에 전달한다.
3. renderFile함수 : <li>,<a> element를 생성하고 DB에 저장된 key로 파일명과 파일url을 가져와 생성된 리스트내에 추가한다.

 

파일 리스트 불러온 결과

 

 

 

"데이터 보안"

Cloud Firestore 보안 규칙 시작하기 - Firebase 공식 사이트 참고 게시물

Cloud Storage 보안 규칙 이해하기 - Firebase 공식 사이트 참고 게시물

 

Cloud-Firestore규칙은 사용자 인증을 거친 사용자만이 데이터를 읽고 쓸 수 있도록 다음과 같이 변경해준다.

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }
  }
}

 

Storage규칙도 마찬가지로, 사용자 인증을 거친 사용자만이 데이터를 읽고 쓸 수 있도록 변경해준다.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth.uid != null;
    }
  }
}