javascript - 想在js中匹配来自firestore数据库的电子邮件和密码
问题描述
电子邮件和密码在来自应用程序的firestore中我的工作是在js中创建管理面板并且该管理面板具有登录页面,每当有人输入电子邮件和密码时,我的工作是检查电子邮件和密码,如果它与电子邮件匹配和 firestore 电子邮件和密码的密码,然后显示他/她的管理面板,否则显示一个弹出窗口,表明您未通过身份验证。
表单.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>
表单.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";
});
}
解决方案
您的查询似乎符合您的要求。您只需要检查是否有任何文档与用户提供的数据匹配。您可以通过检查返回的快照是否为空或具有匹配的文档来完成
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 身份验证登录用户,然后将用户的 UID 存储在相应的公司文档中。
推荐阅读
- android - Viewpager2 Android:视图上的下一步按钮会在右侧生成两张幻灯片
- graphql - 自定义指令的非原始类型属性
- android - 三个风味维度,想覆盖两个
- r - 将这些数据重塑为宽格式的最佳方法是什么?
- python - Python GEKKO:优化非线性优化的性能
- google-analytics - GA:来源和媒体未正确跟踪
- ios - Mapbox iOS:如何获取几何相机/Android getCameraForGeometry
- sql - 具有所有组合的 Oracle 返回树
- azure-webjobs - 我可以在 settings.job 中指定单个网络作业吗
- java - 在两个列表中创建匹配元素的映射