Firebase身份验证不适用于html表单元素
[英]Firebase Authentication not working with html form element
问题描述
I'm following the Firebase examples that uses web authentication, and I'm not able to login if I use the textboxes and buttons inside a html form element. 
我正在遵循使用Web身份验证的Firebase示例，如果使用html表单元素内的文本框和按钮，则无法登录。
Here is the 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>
And the js: 和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'; } }); }());
When I try to login, the console log rises the following message: 当我尝试登录时，控制台日志会显示以下消息：
"It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use. For the CDN builds, these are available in the following manner (replace with the name of a component - ie auth, database, etc): https://www.gstatic.com/firebasejs/5.0.0/firebase- .js" “看起来您正在使用Firebase JS SDK的开发版本。将Firebase应用程序部署到生产中时，建议仅导入要使用的单个SDK组件。对于CDN生成，以下可用方式（用组件名称替换-即auth，数据库等）： https: //www.gstatic.com/firebasejs/5.0.0/firebase- .js“
If I move the inputs and buttons outside the form element, the login works perfectly. 如果将输入和按钮移到form元素之外，则登录可以正常工作。
What am I missing? 我想念什么？
2 个解决方案
解决方案1
1 已采纳 2018-05-28 17:46:48
For your case best thing is to use firebase UI with CDN instead of npm and bower 对于您而言，最好的方法是将Firebase UI与CDN一起使用，而不是npm和bower
No worries and no confusion, no errors (I mean less depends on our skill) 没有后顾之忧，没有混乱，没有错误（我的意思是更少地取决于我们的技能）
- Add Firebase Authentication to your web application. 将Firebase身份验证添加到您的Web应用程序。
Include FirebaseUI via CDN: 通过CDN包括FirebaseUI：
Include the following script and CSS file in the tag of your page, below the initialization snippet: 在网页的代码中，在初始化代码段的下方包含以下脚本和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" />
In the Firebase console, open the Authentication section and enable email and password authentication.
在Firebase控制台中，打开“身份验证”部分，然后启用电子邮件和密码身份验证。 ui.start('#firebaseui-auth-container', { signInOptions: [ firebase.auth.EmailAuthProvider.PROVIDER_ID ], // Other config options... });
ui.start（'＃firebaseui-auth-container'，{signInOptions：[firebase.auth.EmailAuthProvider.PROVIDER_ID]，//其他配置选项...}）; Other Providers:
其他提供者： ui.start('#firebaseui-auth-container', { signInOptions: [ // List of OAuth providers supported. firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.FacebookAuthProvider.PROVIDER_ID, firebase.auth.TwitterAuthProvider.PROVIDER_ID, firebase.auth.GithubAuthProvider.PROVIDER_ID ], // Other config options... });
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]，//其他配置选项...}）;
For more info, please follow this link : https://firebase.google.com/docs/auth/web/firebaseui 有关更多信息，请点击以下链接： https : //firebase.google.com/docs/auth/web/firebaseui
解决方案2
1 2018-05-31 18:55:13
Look at this index.html file, this way I can login perfectly, because I commented the form element. 看一下这个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>
But using the html like the one I posted initially (using form element) rises the following error to the console: 但是像我最初发布的那样使用html（使用form元素）使用html会在控制台中引发以下错误：
"A network error (such as timeout, interrupted connection or unreachable host) has occurred." “发生了网络错误（例如超时，连接中断或主机不可达）。”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.