# #javascript #firebase #validation #google-cloud-firestore #firebase-authentication
Вопрос:
Электронная почта и пароль находятся в firestore, который поступает из приложения, моя задача-создать панель администратора в js, и в этой панели администратора есть страница входа, всякий раз, когда кто-то вводит туда электронную почту и пароль, моя задача-проверить электронную почту и пароль, если они совпадают с электронной почтой и паролем электронной почты и пароля firestore, затем покажите ему/ей панель администратора, в противном случае отобразите всплывающее окно, в котором вы не аутентифицированы.
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.3.3/firebase-analytics.js"></script>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-2"></div>
<div class="col-lg-6 col-md-8 login-box">
<div class="col-lg-12 ">
</div>
<div class="col-lg-12 login-title">
ADMIN PANEL
</div>
<div class="col-lg-12 login-form">
<div class="col-lg-12 login-form">
<form>
<div class="form-group">
<label class="form-control-label">EMAIL</label>
<input type="text" class="form-control email" name="email" id="email" >
</div>
<div class="form-group">
<label class="form-control-label">COMPANY NAME</label>
<input type="text" class="form-control" name="companyname" id="companyname">
</div>
<div class="form-group">
<label class="form-control-label">PASSWORD</label>
<input type="password" class="form-control" name="password" id="password" >
</div>
<div class="col-lg-12 loginbttm">
<div class="col-lg-6 login-btm login-text">
</div>
<div class="col-lg-6 login-btm login-button" style='float: right'>
<button class="btn btn-outline-primary" onclick="login()">LOGIN</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="from.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCBFPUeRkDtvB9oUYHKH18co6n8sVkktd0",
authDomain: "insurance-app-515f9.firebaseapp.com",
projectId: "insurance-app-515f9",
storageBucket: "insurance-app-515f9.appspot.com",
messagingSenderId: "507922592990",
appId: "1:507922592990:web:6ab80539593fc46ea43e4f",
measurementId: "G-85KC0RZSV8"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const db = firebase.firestore();
db.setting({ timestampsInSnapshots: true });
</script>
<script src="../assets/js/plugins/sweetalert2.js"></script>
</body>
</html>
form.js
function login() {
// var getId=localStorage.getItem("getId");
var useremail = document.getElementById("email").value;
var companyname = document.getElementById("companyname").value;
var password = document.getElementById("password").value;
db.collection('Companies List').where("CompanyEmail", "==", useremail, "CompanyPassword", "==", password);
Swal.fire({
title:'Match!',
text: 'Welcome to the dashboard',
type: 'success',
}).then(function() {
window.location = "dashboard.html";
});
}
Ответ №1:
Ваш запрос, по-видимому, соответствует вашим требованиям. Вам просто нужно проверить, соответствует ли какой-либо документ данным, предоставленным пользователем. Это можно сделать, проверив, является ли возвращенный снимок пустым или содержит соответствующий документ
const docRef = db.collection('Companies List')
.where("CompanyEmail", "==", useremail)
.where("CompanyPassword", "==", password);
// ^ separate .where()
docRef.get().then((snapshot) => {
if (snapshot.empty) {
// no docs matched
console.log("Invalid Credentials")
} else {
console.log(snapshot.docs[0].data())
Swal.fire({
title:'Match!',
text: 'Welcome to the dashboard',
type: 'success',
}).then(function() {
window.location = "dashboard.html";
});
}
})
Просто обратите внимание, что в идеале вам следует избегать использования Firestore или любой базы данных напрямую для аутентификации. Вы можете войти в систему пользователей с помощью аутентификации Firebase, а затем сохранить идентификаторы пользователей в соответствующем документе компании.
Комментарии:
1. Сэр, большое вам спасибо, что это сработало. не могли бы вы, пожалуйста, рассказать мне, как отправить метку времени в firestore с помощью кнопки?
2. @saqibdiar это звучит как отдельный вопрос, и для этого вам следует задать новый.
3. @Dharmaraj Вам действительно следует добавить правила безопасности, соответствующие вашему текущему коду запроса, или подчеркнуть, что этот «ответ» никогда не следует использовать , и это создает огромную дыру в безопасности, потому что любой может прийти и просто запустить
firebase.firestore().collection("Companies List").get().then(qs => qs.docs.map(doc => [doc.get("CompanyEmail"), doc.get("CompanyPassword")])).then(console.dir)утечку учетных данных каждого администратора (что, вероятно, они использовали этот пароль в другом месте).4. Спасибо за предложение @samthecodingman. Я обновлю ответ как можно скорее.