javascript - 无法在简单的 HTML、JS 页面上使用 firebase 身份验证进行身份验证
问题描述
Firebase 在身份验证时似乎不起作用。这是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<div class="login form">
<input type="text" class="loginEmail" placeholder="Email..." id="email_field">
<br><br><br>
<input type="password" class="loginPass" placeholder="Password..." id="password_field">
<br><br>
<button class="logBut" onclick="login()">Log in</button>
</div>
</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<!-- Private -->
</script>
<script src="index.js"></script>
</html>
我的 index.js 代码
function login() {
var userEmail = document.getElementById("email_field").value;
var userPass = document.getElementById("password_field").value;
firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
window.alert("Error : " + errorMessage);
// ...
});
}
我不想使用像 React 或 Angular 这样的前端框架。这应该相当简单,因为这段代码前一阵子工作了,但现在不工作了
解决方案
添加以下脚本
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-auth.js">
</script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-firestore.js">
</script>
初始化您的 Firebase 配置
var firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appID: "app-id",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
在运行示例之前替换您的应用凭据。
推荐阅读
- oracle-apex - Oracle Apex 同一页面上的多个授权
- javascript - 正则表达式验证asp.net数据注释中格式化货币的最小值
- ios - 将特定元素从可编码类数组映射到数组
- azure - Azure 中的 Databricks:增量表的集群性能比较
- css - 在表格列内弹出
- javascript - 对象作为 React 子对象无效(找到:带有键 {} 的对象)。在本地机器(chrome浏览器)中工作,但不在生产和其他浏览器中工作
- javascript - react项目制作的脚本文件如何将静态html变成动态应用程序?
- spring - Spring boot 错误处理,保持对标准属性的支持
- windows - powershell ExecutionPolicy 设置不正确
- magento - Magento 2.4系统>配置>目录在后端显示空白页