Firebase 身份验证不适用于 html 表单元素答案

【问题标题】：Firebase Authentication not working with html form elementFirebase 身份验证不适用于 html 表单元素
【发布时间】：2018-11-07 08:01:41
【问题描述】：

我正在关注使用 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 构建，这些可通过以下方式获得（替换为组件的名称 - 即身份验证、数据库等）： https://www.gstatic.com/firebasejs/5.0.0/firebase-.js"

如果我将输入和按钮移到表单元素之外，登录会完美运行。

我错过了什么？

【问题讨论】：

标签： javascript html firebase

【解决方案1】：

对于你的情况，最好的办法是使用带有 CDN 的 firebase UI 而不是 npm 和 bower

不用担心，不用困惑，不会出错（我的意思是更少取决于我们的技能）

将 Firebase 身份验证添加到您的 Web 应用程序。

通过 CDN 包含 FirebaseUI：

在你的页面标签中包含以下脚本和 CSS 文件，在初始化 sn-p 下方：

<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', { 登录选项：[ firebase.auth.EmailAuthProvider.PROVIDER_ID ], // 其他配置选项... });
其他供应商：

ui.start('#firebaseui-auth-container', { 登录选项：[ // 支持的 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

【讨论】：

感谢您的快速回答！您能否更具体地说明不同的步骤？抱歉，我只是从 firebase 开始。在第 1 步中，我只需要在我的 html 中包含脚本和 css 吗？我不明白在第 2 步中在哪里包含“ui.start...”。再次感谢！
欢迎您，您是要解决同样的问题还是要进行 Firebase UI CDN 集成
对不起，我刚开始使用 firebase。在第 1 步中，我只需要在我的 html 中包含脚本和 css 吗？我不明白在第 2 步中在哪里包含“ui.start...”。再次感谢！
是的，但它应该在 head 标签中
ui.start.. 应该用java脚本写

【解决方案2】：

看看这个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（使用表单元素）会在控制台出现以下错误：

“出现网络错误（如超时、连接中断或主机无法访问）。”

【讨论】：

app.js里面有什么
看第一篇，我把app.js放在了html后面