Firestore 보안 규칙으로 인증 여부에 따라 액세스 권한 제어
15109 단어 firestore.rulesFirebaseFirestore
0. 처음에
(본 기사는 졸작 Firestore 보안 규칙을 설정해 보는 계속되고 있습니다!)
이번에는 인증 정보를 얽힌 규칙을 설정해 보겠습니다!
0. Firestore 보안 규칙 읽기 ← 전회
1. Firestore 보안 규칙 설정 설정 ← 전회
2. Firestore 보안 규칙으로 인증 여부에 따라 액세스 권한 제어 ← 이번에 ★
1. 준비
매번, 다음은 작업 환경입니다 1
OS : Windows10 Home
Node : v11.13.0
yarn : v1.22.10
사전에 Firebase 콘솔에서 프로젝트를 생성합니다.
환경의 준비나 Firebase 프로젝트 작성에 대해서는 말하지 않습니다만, 자세한 것은 이쪽을(선전).
Firebase에서 배포하자!
2. 모델이 되는 사이트의 준비
2.1 인증을 실시하는 폼과 Firestore의 데이터를 표시하는 화면의 작성
전회의 「Firestore 보안 룰을 설정해 본다」에서 사용한 사이트를 베이스에 개수를 더합니다.
폼의 상단에 로그인/로그아웃 버튼을 세트 하고 있습니다, 변함없이 심한 질소인 UI입니다(웃음).
소스 이런 느낌, 인증 기능을 사용하기 위해 <script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-auth.js"></script> 의 일문이 필요합니다.
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>
<div class="auth">
<button type="button" onclick="logIn()">ログイン</button>
<button type="button" onclick="logOut()">ログアウト</button>
</div>
<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 ★ -->
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-auth.js"></script>
<!-- ★ ↑ 新しく追加したscript ★ -->
<script src="./index.js"></script>
<script src="./config.js"></script>
</body>
</html>
2.2 인증 기능 구현
이어서 javascript측에서는, firestore측에 데이터를 읽고 쓰기하는 처리와, email와 패스워드로 인증 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})`)
})
}
/*
認証機能
*/
// 認証情報(固定値)でログインを行う
logIn = async() => {
const UserData = {
email: "[email protected]",
passWord: "xxxxxxxxxxxxxxxxxxxxxx"
}
const {email, passWord} = UserData
try {
await firebase.auth().signInWithEmailAndPassword(email, passWord)
alert("successfully login")
} catch(error) {
alert(error)
}
}
// ログアウトをする
logOut = () => {
firebase.auth().signOut()
alert("successfully logout")
}
3. 인증 유무를 판정한다
firestore 규칙을 다음과 같이 설정하여 로그인하지 않으면 DB에 등록할 수 없게 합니다.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read: if true;
allow write: if request.auth.uid != null;
}
}
}
로그인하지 않은 상태에서 송신 버튼을 눌러도 권한으로 연주되어 등록되어 있지 않은 것을 확인할 수 있습니다.
끝에
실제 앱에서는 자격 증명에 따라 라우팅이라 할지 모르기 때문에 인증 부분은 이런 간단한 이야기가 아닙니다.
뭐, 시험으로 하는 분에는 문제 없을까라고 하는 느낌이군요.
참고
1. [Firebase] Firestore에서 읽고 쓰기 (웹 편)
배포(사이트 게시)하지 않으려면 Node, yarn이 필요하지 않습니다. ↩
2020/10/23 현재, email와 패스워드를 사용한 인증 방법은 취약성이 확인되고 있습니다.(htps : // 메이 m. 이 m/swlh/오오 gぇ-큃하면 어서 ㅇ 치카치 온-ゔl 네라비 ty-245050cb7 세 b). 실제 애플리케이션에는 도입하지 않는 것을 추천합니다. ↩
Reference
이 문제에 관하여(Firestore 보안 규칙으로 인증 여부에 따라 액세스 권한 제어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiroki-harada/items/d66a7430d0a33b6b9854
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
매번, 다음은 작업 환경입니다 1
OS : Windows10 Home
Node : v11.13.0
yarn : v1.22.10
사전에 Firebase 콘솔에서 프로젝트를 생성합니다.
환경의 준비나 Firebase 프로젝트 작성에 대해서는 말하지 않습니다만, 자세한 것은 이쪽을(선전).
Firebase에서 배포하자!
2. 모델이 되는 사이트의 준비
2.1 인증을 실시하는 폼과 Firestore의 데이터를 표시하는 화면의 작성
전회의 「Firestore 보안 룰을 설정해 본다」에서 사용한 사이트를 베이스에 개수를 더합니다.
폼의 상단에 로그인/로그아웃 버튼을 세트 하고 있습니다, 변함없이 심한 질소인 UI입니다(웃음).
소스 이런 느낌, 인증 기능을 사용하기 위해 <script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-auth.js"></script> 의 일문이 필요합니다.
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>
<div class="auth">
<button type="button" onclick="logIn()">ログイン</button>
<button type="button" onclick="logOut()">ログアウト</button>
</div>
<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 ★ -->
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-auth.js"></script>
<!-- ★ ↑ 新しく追加したscript ★ -->
<script src="./index.js"></script>
<script src="./config.js"></script>
</body>
</html>
2.2 인증 기능 구현
이어서 javascript측에서는, firestore측에 데이터를 읽고 쓰기하는 처리와, email와 패스워드로 인증 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})`)
})
}
/*
認証機能
*/
// 認証情報(固定値)でログインを行う
logIn = async() => {
const UserData = {
email: "[email protected]",
passWord: "xxxxxxxxxxxxxxxxxxxxxx"
}
const {email, passWord} = UserData
try {
await firebase.auth().signInWithEmailAndPassword(email, passWord)
alert("successfully login")
} catch(error) {
alert(error)
}
}
// ログアウトをする
logOut = () => {
firebase.auth().signOut()
alert("successfully logout")
}
3. 인증 유무를 판정한다
firestore 규칙을 다음과 같이 설정하여 로그인하지 않으면 DB에 등록할 수 없게 합니다.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read: if true;
allow write: if request.auth.uid != null;
}
}
}
로그인하지 않은 상태에서 송신 버튼을 눌러도 권한으로 연주되어 등록되어 있지 않은 것을 확인할 수 있습니다.
끝에
실제 앱에서는 자격 증명에 따라 라우팅이라 할지 모르기 때문에 인증 부분은 이런 간단한 이야기가 아닙니다.
뭐, 시험으로 하는 분에는 문제 없을까라고 하는 느낌이군요.
참고
1. [Firebase] Firestore에서 읽고 쓰기 (웹 편)
배포(사이트 게시)하지 않으려면 Node, yarn이 필요하지 않습니다. ↩
2020/10/23 현재, email와 패스워드를 사용한 인증 방법은 취약성이 확인되고 있습니다.(htps : // 메이 m. 이 m/swlh/오오 gぇ-큃하면 어서 ㅇ 치카치 온-ゔl 네라비 ty-245050cb7 세 b). 실제 애플리케이션에는 도입하지 않는 것을 추천합니다. ↩
Reference
이 문제에 관하여(Firestore 보안 규칙으로 인증 여부에 따라 액세스 권한 제어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiroki-harada/items/d66a7430d0a33b6b9854
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 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>
<div class="auth">
<button type="button" onclick="logIn()">ログイン</button>
<button type="button" onclick="logOut()">ログアウト</button>
</div>
<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 ★ -->
<script src="https://www.gstatic.com/firebasejs/7.22.0/firebase-auth.js"></script>
<!-- ★ ↑ 新しく追加した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})`)
})
}
/*
認証機能
*/
// 認証情報(固定値)でログインを行う
logIn = async() => {
const UserData = {
email: "[email protected]",
passWord: "xxxxxxxxxxxxxxxxxxxxxx"
}
const {email, passWord} = UserData
try {
await firebase.auth().signInWithEmailAndPassword(email, passWord)
alert("successfully login")
} catch(error) {
alert(error)
}
}
// ログアウトをする
logOut = () => {
firebase.auth().signOut()
alert("successfully logout")
}
firestore 규칙을 다음과 같이 설정하여 로그인하지 않으면 DB에 등록할 수 없게 합니다.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /dataList/{data} {
allow read: if true;
allow write: if request.auth.uid != null;
}
}
}
로그인하지 않은 상태에서 송신 버튼을 눌러도 권한으로 연주되어 등록되어 있지 않은 것을 확인할 수 있습니다.
끝에
실제 앱에서는 자격 증명에 따라 라우팅이라 할지 모르기 때문에 인증 부분은 이런 간단한 이야기가 아닙니다.
뭐, 시험으로 하는 분에는 문제 없을까라고 하는 느낌이군요.
참고
1. [Firebase] Firestore에서 읽고 쓰기 (웹 편)
배포(사이트 게시)하지 않으려면 Node, yarn이 필요하지 않습니다. ↩
2020/10/23 현재, email와 패스워드를 사용한 인증 방법은 취약성이 확인되고 있습니다.(htps : // 메이 m. 이 m/swlh/오오 gぇ-큃하면 어서 ㅇ 치카치 온-ゔl 네라비 ty-245050cb7 세 b). 실제 애플리케이션에는 도입하지 않는 것을 추천합니다. ↩
Reference
이 문제에 관하여(Firestore 보안 규칙으로 인증 여부에 따라 액세스 권한 제어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hiroki-harada/items/d66a7430d0a33b6b9854
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. [Firebase] Firestore에서 읽고 쓰기 (웹 편)
배포(사이트 게시)하지 않으려면 Node, yarn이 필요하지 않습니다. ↩
2020/10/23 현재, email와 패스워드를 사용한 인증 방법은 취약성이 확인되고 있습니다.(htps : // 메이 m. 이 m/swlh/오오 gぇ-큃하면 어서 ㅇ 치카치 온-ゔl 네라비 ty-245050cb7 세 b). 실제 애플리케이션에는 도입하지 않는 것을 추천합니다. ↩
Reference
이 문제에 관하여(Firestore 보안 규칙으로 인증 여부에 따라 액세스 권한 제어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiroki-harada/items/d66a7430d0a33b6b9854텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
