Firestore 보안 규칙 설정 설정
0. 처음에
(본 기사는, 졸작Firestore 보안 규칙 읽기의 계속이 되고 있습니다!)
마지막으로 Firestore에 기본적으로 설정된 규칙을 읽었으므로 이번에는 직접 규칙을 설정하려고합니다.
이번에는 읽기/쓰기에 대해 올바르게 규칙이 설정되어 있는지 살펴보겠습니다.
0. Firestore 보안 규칙 읽기 ← 이전
1. Firestore 보안 규칙 설정 ← 이번에 ★
1. 준비
동작 환경입니다만, 필자는 이하의 환경에서 동작 확인하고 있습니다.
OS : Windows10 Home
Node : v11.13.0
yarn : v1.22.4
또한 사전에 Firebse 프로젝트를 작성해 둡니다.
(자세한 단계는 언급하지 않지만 프로젝트 작성에 대해 자세히 알고 싶다면 참고로 졸작 기사를 참조하십시오 : Firebase에서 배포하자!)
2. 모델이 되는 사이트의 준비
Firestore에 데이터를 등록하기 위한 입력 폼과 등록된 데이터를 표시하기 위한 리스트가 있는 사이트를 빨리 준비합니다1. 맨 위의 양식에 뭔가 문자를 입력하고 "제출"을 누르면 firestore 측에 등록되어 "업데이트"에서 firestore에 등록되어있는 모든 데이터가 표시되는 구조로되어 있습니다.
입력과 표시의 코드는 이런 느낌
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>firestore-otameshi</title>
</head>
<body>
<form action="submit">
<input id="addData" type="text">
</form>
<button type="button" onclick="addData()">送信</button>
<button type="button" onclick="getData()">更新</button>
<h5>Firestore-dataList</h5>
<div id="dataList"></div>
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-firestore.js"></script>
<script src="./index.js"></script>
<script src="./config.js"></script>
</body>
</html>
Firestore측에 등록 데이터 취득이 실패하면, 에러 로그를 표시하는 구조로 하고 있습니다(참고 2부터).
firebase의 API KEY는 어쨌든 별도의 파일로 준비했습니다 2.
index.js// 受け取ったHTMLを表示
dispData = (html) => {
document.querySelector("#dataList").innerHTML = html
}
// フォームのデータをfirestoreに追加
addData = () => {
const inputData = document.getElementById("addData")
if (!inputData.value) return
firebase.firestore().collection("dataList").add({
text: inputData.value
})
.then(() => {
console.log("success!")
})
.catch((error) => {
dispData(`データの追加に失敗しました (${error})`)
})
}
// firestoreからデータを取得
getData = () => {
firebase.firestore().collection("dataList").get().then((querySnapshot) => {
let html = "<ul>"
querySnapshot.forEach((doc) => {
const data = doc.data()
html += `<li>${data.text}</li>`
})
html += "</ul>"
dispData(html)
})
.catch((error)=> {
dispData(`データの取得に失敗しました (${error})`)
})
}
config.js// Initialize Firebase
firebase.initializeApp({
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "firestore-otameshi.firebaseapp.com",
databaseURL: "https://XXXXXXXXXXXXXXXXX.firebaseio.com",
projectId: "firestore-otameshi",
storageBucket: "XXXXXXXXXXXXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
measurementId: "XXXXXXXXXXXXXXXXXXX"
})
3. 규칙 설정 전의 동작
우선은, read, write의 양쪽 모두를 허가한 상태에서 데이터의 등록과 취득을 실시합니다.
설정하는 규칙은 여기↓
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read, write: if true;
}
}
}
(정말은 gif를 붙이고 싶습니다만,) 상기의 룰이라고 등록도 취득 잘 작동합니다.
4. 규칙 설정 후 동작
그런 다음 규칙을 설정해 봅니다. 우선은, 쓰기 금지로부터.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read: if true;
allow write: if false;
}
}
}
폼에 입력하고 제출을 누르면, 확실히 권한이 없어서 에러가 발생하고 있는 것을 알 수 있습니다(위에서 설정한 에러 문언이 표시되고 있습니다).
3
또한 아래와 같이 기술하는 것으로, 전혀 관계가 없는 컬렉션( dataList )에 대해서 룰을 설정해도, data에는 적용되지 않는 것도 확인할 수 있습니다 
.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read, write: if true;
}
match /dummyList/{data} {
allow read: if true;
allow write: if false;
}
}
}
이어서 읽기 권한을 부여하지 않은 경우에도 마찬가지로 확인할 수 있습니다.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow write: if true;
allow read: if false;
}
}
}
4
끝에
이번에는 dummyList와 dataList에 초점을 맞추고 있습니다. 두 개는 각각 read 합니다.
참고
1. 
2. Cloud Firestore 보안 규칙 구조화
라고 말하면서, 만드는데 꽤 시간이 걸려 버렸습니다(웃음) [Firebase] Firestore에서 읽고 쓰기 (웹 편)
그렇지만 API KEY의 스코프가 글로벌하게 되어 있는 것, 좋지 않다고 생각한다 ↩
어떤 언어의 신택스 하이라이트 사용한 것인지, 잘 모르겠습니다만, 무엇으로 한 것입니다. . . ? ↩
또한 규칙을 설정하지 않은 컬렉션에는 모든 작업이 금지됩니다 ↩
Reference
이 문제에 관하여(Firestore 보안 규칙 설정 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiroki-harada/items/8fc55075505fefc523ad
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
동작 환경입니다만, 필자는 이하의 환경에서 동작 확인하고 있습니다.
OS : Windows10 Home
Node : v11.13.0
yarn : v1.22.4
또한 사전에 Firebse 프로젝트를 작성해 둡니다.
(자세한 단계는 언급하지 않지만 프로젝트 작성에 대해 자세히 알고 싶다면 참고로 졸작 기사를 참조하십시오 : Firebase에서 배포하자!)
2. 모델이 되는 사이트의 준비
Firestore에 데이터를 등록하기 위한 입력 폼과 등록된 데이터를 표시하기 위한 리스트가 있는 사이트를 빨리 준비합니다1. 맨 위의 양식에 뭔가 문자를 입력하고 "제출"을 누르면 firestore 측에 등록되어 "업데이트"에서 firestore에 등록되어있는 모든 데이터가 표시되는 구조로되어 있습니다.
입력과 표시의 코드는 이런 느낌
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>firestore-otameshi</title>
</head>
<body>
<form action="submit">
<input id="addData" type="text">
</form>
<button type="button" onclick="addData()">送信</button>
<button type="button" onclick="getData()">更新</button>
<h5>Firestore-dataList</h5>
<div id="dataList"></div>
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-firestore.js"></script>
<script src="./index.js"></script>
<script src="./config.js"></script>
</body>
</html>
Firestore측에 등록 데이터 취득이 실패하면, 에러 로그를 표시하는 구조로 하고 있습니다(참고 2부터).
firebase의 API KEY는 어쨌든 별도의 파일로 준비했습니다 2.
index.js// 受け取ったHTMLを表示
dispData = (html) => {
document.querySelector("#dataList").innerHTML = html
}
// フォームのデータをfirestoreに追加
addData = () => {
const inputData = document.getElementById("addData")
if (!inputData.value) return
firebase.firestore().collection("dataList").add({
text: inputData.value
})
.then(() => {
console.log("success!")
})
.catch((error) => {
dispData(`データの追加に失敗しました (${error})`)
})
}
// firestoreからデータを取得
getData = () => {
firebase.firestore().collection("dataList").get().then((querySnapshot) => {
let html = "<ul>"
querySnapshot.forEach((doc) => {
const data = doc.data()
html += `<li>${data.text}</li>`
})
html += "</ul>"
dispData(html)
})
.catch((error)=> {
dispData(`データの取得に失敗しました (${error})`)
})
}
config.js// Initialize Firebase
firebase.initializeApp({
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "firestore-otameshi.firebaseapp.com",
databaseURL: "https://XXXXXXXXXXXXXXXXX.firebaseio.com",
projectId: "firestore-otameshi",
storageBucket: "XXXXXXXXXXXXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
measurementId: "XXXXXXXXXXXXXXXXXXX"
})
3. 규칙 설정 전의 동작
우선은, read, write의 양쪽 모두를 허가한 상태에서 데이터의 등록과 취득을 실시합니다.
설정하는 규칙은 여기↓
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read, write: if true;
}
}
}
(정말은 gif를 붙이고 싶습니다만,) 상기의 룰이라고 등록도 취득 잘 작동합니다.
4. 규칙 설정 후 동작
그런 다음 규칙을 설정해 봅니다. 우선은, 쓰기 금지로부터.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read: if true;
allow write: if false;
}
}
}
폼에 입력하고 제출을 누르면, 확실히 권한이 없어서 에러가 발생하고 있는 것을 알 수 있습니다(위에서 설정한 에러 문언이 표시되고 있습니다).
3
또한 아래와 같이 기술하는 것으로, 전혀 관계가 없는 컬렉션( dataList )에 대해서 룰을 설정해도, data에는 적용되지 않는 것도 확인할 수 있습니다 .
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read, write: if true;
}
match /dummyList/{data} {
allow read: if true;
allow write: if false;
}
}
}
이어서 읽기 권한을 부여하지 않은 경우에도 마찬가지로 확인할 수 있습니다.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow write: if true;
allow read: if false;
}
}
}
4
끝에
이번에는 dummyList와 dataList에 초점을 맞추고 있습니다. 두 개는 각각 read 합니다.
참고
1.
2. Cloud Firestore 보안 규칙 구조화
라고 말하면서, 만드는데 꽤 시간이 걸려 버렸습니다(웃음) [Firebase] Firestore에서 읽고 쓰기 (웹 편)
그렇지만 API KEY의 스코프가 글로벌하게 되어 있는 것, 좋지 않다고 생각한다 ↩
어떤 언어의 신택스 하이라이트 사용한 것인지, 잘 모르겠습니다만, 무엇으로 한 것입니다. . . ? ↩
또한 규칙을 설정하지 않은 컬렉션에는 모든 작업이 금지됩니다 ↩
Reference
이 문제에 관하여(Firestore 보안 규칙 설정 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiroki-harada/items/8fc55075505fefc523ad
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>firestore-otameshi</title>
</head>
<body>
<form action="submit">
<input id="addData" type="text">
</form>
<button type="button" onclick="addData()">送信</button>
<button type="button" onclick="getData()">更新</button>
<h5>Firestore-dataList</h5>
<div id="dataList"></div>
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-firestore.js"></script>
<script src="./index.js"></script>
<script src="./config.js"></script>
</body>
</html>
// 受け取ったHTMLを表示
dispData = (html) => {
document.querySelector("#dataList").innerHTML = html
}
// フォームのデータをfirestoreに追加
addData = () => {
const inputData = document.getElementById("addData")
if (!inputData.value) return
firebase.firestore().collection("dataList").add({
text: inputData.value
})
.then(() => {
console.log("success!")
})
.catch((error) => {
dispData(`データの追加に失敗しました (${error})`)
})
}
// firestoreからデータを取得
getData = () => {
firebase.firestore().collection("dataList").get().then((querySnapshot) => {
let html = "<ul>"
querySnapshot.forEach((doc) => {
const data = doc.data()
html += `<li>${data.text}</li>`
})
html += "</ul>"
dispData(html)
})
.catch((error)=> {
dispData(`データの取得に失敗しました (${error})`)
})
}
// Initialize Firebase
firebase.initializeApp({
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "firestore-otameshi.firebaseapp.com",
databaseURL: "https://XXXXXXXXXXXXXXXXX.firebaseio.com",
projectId: "firestore-otameshi",
storageBucket: "XXXXXXXXXXXXXXXXXXXX.appspot.com",
messagingSenderId: "XXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
measurementId: "XXXXXXXXXXXXXXXXXXX"
})
우선은, read, write의 양쪽 모두를 허가한 상태에서 데이터의 등록과 취득을 실시합니다.
설정하는 규칙은 여기↓
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read, write: if true;
}
}
}
(정말은 gif를 붙이고 싶습니다만,) 상기의 룰이라고 등록도 취득 잘 작동합니다.
4. 규칙 설정 후 동작
그런 다음 규칙을 설정해 봅니다. 우선은, 쓰기 금지로부터.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read: if true;
allow write: if false;
}
}
}
폼에 입력하고 제출을 누르면, 확실히 권한이 없어서 에러가 발생하고 있는 것을 알 수 있습니다(위에서 설정한 에러 문언이 표시되고 있습니다).
3
또한 아래와 같이 기술하는 것으로, 전혀 관계가 없는 컬렉션( dataList )에 대해서 룰을 설정해도, data에는 적용되지 않는 것도 확인할 수 있습니다 .
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read, write: if true;
}
match /dummyList/{data} {
allow read: if true;
allow write: if false;
}
}
}
이어서 읽기 권한을 부여하지 않은 경우에도 마찬가지로 확인할 수 있습니다.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow write: if true;
allow read: if false;
}
}
}
4
끝에
이번에는 dummyList와 dataList에 초점을 맞추고 있습니다. 두 개는 각각 read 합니다.
참고
1.
2. Cloud Firestore 보안 규칙 구조화
라고 말하면서, 만드는데 꽤 시간이 걸려 버렸습니다(웃음) [Firebase] Firestore에서 읽고 쓰기 (웹 편)
그렇지만 API KEY의 스코프가 글로벌하게 되어 있는 것, 좋지 않다고 생각한다 ↩
어떤 언어의 신택스 하이라이트 사용한 것인지, 잘 모르겠습니다만, 무엇으로 한 것입니다. . . ? ↩
또한 규칙을 설정하지 않은 컬렉션에는 모든 작업이 금지됩니다 ↩
Reference
이 문제에 관하여(Firestore 보안 규칙 설정 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiroki-harada/items/8fc55075505fefc523ad
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read: if true;
allow write: if false;
}
}
}
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read, write: if true;
}
match /dummyList/{data} {
allow read: if true;
allow write: if false;
}
}
}
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow write: if true;
allow read: if false;
}
}
}
이번에는
dummyList와 dataList에 초점을 맞추고 있습니다. 두 개는 각각 read 합니다.참고
1.
2. Cloud Firestore 보안 규칙 구조화
라고 말하면서, 만드는데 꽤 시간이 걸려 버렸습니다(웃음) [Firebase] Firestore에서 읽고 쓰기 (웹 편)
그렇지만 API KEY의 스코프가 글로벌하게 되어 있는 것, 좋지 않다고 생각한다 ↩
어떤 언어의 신택스 하이라이트 사용한 것인지, 잘 모르겠습니다만, 무엇으로 한 것입니다. . . ? ↩
또한 규칙을 설정하지 않은 컬렉션에는 모든 작업이 금지됩니다 ↩
Reference
이 문제에 관하여(Firestore 보안 규칙 설정 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiroki-harada/items/8fc55075505fefc523ad
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Firestore 보안 규칙 설정 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiroki-harada/items/8fc55075505fefc523ad텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
