Firebase身份验证不适用于html表单元素
[英]Firebase Authentication not working with html form element
问题描述
我正在遵循使用Web身份验证的Firebase示例，如果使用html表单元素内的文本框和按钮，则无法登录。
这是html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script> </head> <body> <form id="app"> <input type="email" id="txtEmail" placeholder="Email"> <input type="password" id="txtPassword" placeholder="Password"> <button id="btnLogin">Login</button> <button id="btnSignUp">SignUp</button> <button id="btnLogout">Logout</button> </form> </body> <script src="app.js"></script> </html>
和js：
(function() { // Initialize Firebase const config = { apiKey: "MyData", authDomain: "MyData", databaseURL: "MyData", projectId: "MyData", storageBucket: "MyData", messagingSenderId: "MyData" }; firebase.initializeApp(config); const txtEmail = document.getElementById('txtEmail'); const txtPassword = document.getElementById('txtPassword'); const btnLogin = document.getElementById('btnLogin'); const btnSignUp = document.getElementById('btnSignUp'); const btnLogout = document.getElementById('btnLogout'); btnLogin.addEventListener('click', e => { const email = txtEmail.value; const pass = txtPassword.value; const auth = firebase.auth(); const promise = auth.signInWithEmailAndPassword(email, pass); promise.catch(e => console.log(e.message)); }); btnSignUp.addEventListener('click', e => { const email = txtEmail.value; const pass = txtPassword.value; const auth = firebase.auth(); const promise = auth.createUserWithEmailAndPassword(email, pass); promise .catch(e => console.log(e.message)); }); btnLogout.addEventListener('click', e => { firebase.auth().signOut(); }); firebase.auth().onAuthStateChanged(firebaseUser => { if(firebaseUser){ console.log(firebaseUser); btnLogout.style.display = 'block'; } else { console.log('not logged in'); btnLogout.style.display = 'none'; } }); }());
当我尝试登录时，控制台日志会显示以下消息：
“看起来您正在使用Firebase JS SDK的开发版本。将Firebase应用程序部署到生产中时，建议仅导入要使用的单个SDK组件。对于CDN生成，以下可用方式（用组件名称替换-即auth，数据库等）： https: //www.gstatic.com/firebasejs/5.0.0/firebase- .js“
如果将输入和按钮移到form元素之外，则登录可以正常工作。
我想念什么？
2 个解决方案
解决方案1
1 已采纳 2018-05-28 17:46:48
对于您而言，最好的方法是将Firebase UI与CDN一起使用，而不是npm和bower
没有后顾之忧，没有混乱，没有错误（我的意思是更少地取决于我们的技能）
- 将Firebase身份验证添加到您的Web应用程序。
通过CDN包括FirebaseUI：
在网页的代码中，在初始化代码段的下方包含以下脚本和CSS文件：
<script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />
在Firebase控制台中，打开“身份验证”部分，然后启用电子邮件和密码身份验证。
ui.start（'＃firebaseui-auth-container'，{signInOptions：[firebase.auth.EmailAuthProvider.PROVIDER_ID]，//其他配置选项...}）;
其他提供者：
ui.start（'＃firebaseui-auth-container'，{signInOptions：[//支持的OAuth提供者列表。firebase.auth.GoogleAuthProvider.PROVIDER_ID，firebase.auth.FacebookAuthProvider.PROVIDER_ID，firebase.auth.TwitterAuthProvider.PROVIDER_ID，firebase .auth.GithubAuthProvider.PROVIDER_ID]，//其他配置选项...}）;
有关更多信息，请点击以下链接： https : //firebase.google.com/docs/auth/web/firebaseui
解决方案2
1 2018-05-31 18:55:13
看一下这个index.html文件，这样我就可以完美登录，因为我评论了form元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script> </head> <body> <!-- <form id="app"> --> <input type="email" id="txtEmail" placeholder="Email"> <input type="password" id="txtPassword" placeholder="Password"> <button id="btnLogin">Login</button> <button id="btnSignUp">SignUp</button> <button id="btnLogout">Logout</button> <!-- </form> --> </body> <script src="app.js"></script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script> </head> <body> <form id="app"> <input type="email" id="txtEmail" placeholder="Email"> <input type="password" id="txtPassword" placeholder="Password"> <button id="btnLogin">Login</button> <button id="btnSignUp">SignUp</button> <button id="btnLogout">Logout</button> </form> </body> <script src="app.js"></script> </html>
但是像我最初发布的那样使用html（使用form元素）使用html会在控制台中引发以下错误：
“发生了网络错误（例如超时，连接中断或主机不可达）。”
将 HTML 表单导出到 Excel CSV 不使用 Element.append() 方法
[英]Export HTML form to Excel CSV not working with Element.append() method
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.