이전 게시글에서 사실상 거의 대부분의 작업 코드와 에러 해결에 대한 내용을 기록했기 때문에 회고록에서는 정리의 개념으로 기재하려고 한다.
1) 에러 확인
(1) 도메인 승인
일단 github배포까지 끝냈는데, 이번에는 배포 자체는 잘됨 ㅎㅎㅎ
404에러 안나고 행복했다..^^
배포후 대략적으로 검토했을 때는 한 개 문제 빼고는 잘 구동된 것 같았다.
다만 에러가 한개 발생했는데, 그 내용은 아래와 같다.
Uncaught (in promise) FirebaseError: Firebase: Error (auth/unauthorized-domain).
즉 firsebase Auth 부분에서 나는 에러였고
배포한 도메인에서 auth 인증이 안되는 문제인 것 같았다.
즉 내 배포 주소를 auth인증 주소에 넣어주면 되는 것
콘솔-> Authentication -> settings -> 승인된 도메인
여기에 kowoonlee.github.io 내 깃헙 도메인을 넣어주니 바로 소셜 로그인 창이 잘 뜨게 되었다.~~~😆
2) 보안 문제
(1) firestore rule 수정
- 콘솔 -> firestore -> 규칙에 가면 보안에 대한 규칙을 설정할 수 있음.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if
request.time < timestamp.date(2023, 4, 14);
} }}
위의 코드에 대한 해석은 아무 database나 document에 대해 read, write를 모두 허용해주는 것이다. 조건이 있는데 그것은 저 위에 날짜 이전일때까지만 적용.
이것을 해놓은 이유는 보안을 위해서임.
이건 기본 내용이고 조건을 걸어서 수정할 수 있음.
참고 문서: https://firebase.google.com/docs/database/security/rules-conditions?hl=ko
이것을 아래와 같이 수정할 수 있음.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if
request.auth != null;
} }}
위의 코드는 로그인이 되어있는 상태에서만 read, write가 가능하다는 뜻임.
(2) storage rule 수정
- 마찬가지로 storage 부분에서도 rule을 적용할 수 있음.
- 로그인한 사람만 storage에 파일을 업로드 할 수 있도록 허용할 수 있음.
- storage 콘솔 -> 규칙 보면 이미 로그인한 사람만 허용 설정되어있음.
(3) Google API key 보안 수정
- https://console.cloud.google.com/apis/credentials
위의 주소로 들어가면google API창이 뜸.
여기서 위에 탭에서 프로젝트를 선택하면 내가 작업한 프로젝트가 뜬다.
거기에서사용자인증정보탭에 들어가면 API keys들을 보여줌.
firebase에 의해 생성된 것임. 이부분에 대해 보안을 설정해 줄 것임.
- browser key를 클릭 ->애플리케이션 제한사항 설정 -> 옵션 부분을
웹사이트로 변경해주면 아래에ADD가 뜬다.
사람들이 우리 api를 사용할 수 있는 지 가능 여부임. ADD에 item을 추가해 줄 것임. 여기서는 우리 배포 사이트 URL임. (내 도메인)- 나는
kowoonlee.github.io/*이렇게 적음. localhost도 추가해줌. 그리고 저장
위의 페이지를 보면 체크표시가 되어있음.
- 오직 몇개의 url에서만 우리의 API key를 사용할 수 있게 한 것임.
❗️ 에러사항
그런데 이렇게 보안 설정해놓고 나니,, 에러가 왕창뜨기 시작했음.. ㅎㅎ..
내용은 아래와 같음..
1) 로그아웃 시 아래와 같은 에러 메세지가 뜸 (로그아웃은 잘 됨)
@firebase/firestore: Firestore (9.17.2): Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
도저히 검색해도 안나왔는데 이미 같은 증상인 사람이 있었다..
친절하게 공유해주셨음. 로그아웃을 했음에도 실시간 데이터를 계속 수신대기하고 있어서 그런 에러가 뜨는 것이라고 함.
Home.js
useEffect(() => {
const q = query(
collection(dbService, "fweets"),
// where("request.auth", "==", userObj.uid),
orderBy("createdAt", "desc")
);
const unsubscribe = onSnapshot(q, (snapshot) => {
const fweetArray = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
setContents(fweetArray);
});
auth.onAuthStateChanged((user) => {
if (user == null) {
unsubscribe();
}
});
}, []);이렇게 조건문 달아서 해결.
2) 소셜 로그인 안됨.
구글이랑 깃헙으로 소셜로그인 버튼을 클릭하면 The requested action is invalid. 에러메세지가 뜨고, 창을 끄면
Uncaught (in promise) FirebaseError: Firebase: Error (auth/popup-closed-by-user).
이런 에러가 뜬다..
아무래도 구글 API 인증했던 곳에서 뭔 문제가 있는 것 같았다.
에러메세지를 자세히 보니 내 fwitter-c75be.firebaseapp.com 주소 허용이 안된다 어쩌구 되어있는 것 같아서 구글 API 웹사이트 허용에 위의 주소도 추가해줬더니 해결!!!
흠.. 나는 localhost랑 github.io 도메인에서만 사용 중이라고 생각해서 그것만 추가했는데 아무래도 파이어베이스 프로젝트라 해당 도메인도 기재하는 게 맞나보다.
원래는 제한 없음으로 둬서 몰랐는데, 몇가지 도메인만 허용 걸어보니 이런 헛점들이
눈에 띄게 되었나보다.
⭐️ 수정해서 재배포하니 깔끔하게 잘 된다...
하지만 눈에 띄는 것이 있었으니.. 바로 모바일 사이즈에서 UI가 엉망진창이라는 점..ㅎㅎ
이렇게 서버랑 연결한 김에 뭔가 내가 직접 사용할 수 있음 좋겠는데 가볍게 기록용으로..
그러려면 아무래도 핸드폰에서 사용할 수 있어야 할 것 같다.
역시 모바일 사이즈로 반응형 구현해야겠다...ㅎㅎ..
거의 px 말고 비율쓰는 단위로 해서 괜찮을 줄 알았는데 크기가 확 작아지니 이상한게 티가 확나네,,
여튼 이번 파이어베이스 사용하면서 느낀점.. 작은 프로젝트할 때는 정말 유용한 것 같다.
공식 문서도 잘 되어있고, 예시도 잘 기재되어있는 느낌... 다만 그 공식문서에서
내가 필요한 내용을 찾기가 힘들었는데, 이건 처음하는 것들은 다 힘든 것이고, 공식 문서에서 내가 원하는 내용을 찾는 것 조차 중요한 연습이 될테니, 좋은 경험이 된 것 같다.😃
