Question

我关注使用网络身份验证的Firebase示例，如果我使用html表单元素中的文本框和按钮，则无法登录。

这是html：

＆＃13;

<!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>

＆＃13;

和js：

＆＃13;

(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';
        }
    });


}());

＆＃13;

当我尝试登录时，控制台日志会显示以下消息：

＆＃34;您似乎正在使用Firebase JS SDK的开发版本。将Firebase应用程序部署到生产环境时，建议仅导入您打算使用的各个SDK组件。对于CDN构建，可以通过以下方式获得这些构建（替换为组件的名称 - 即auth，数据库等）： https://www.gstatic.com/firebasejs/5.0.0/firebase- JS＆＃34;

如果我将输入和按钮移到表单元素之外，则登录工作完美。

我错过了什么？

Answer 1

对于您的情况，最好的方法是使用带有CDN的firebase UI而不是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

Answer 2

看看这个index.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>

<!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（使用表单元素）会将以下错误提升到控制台：

“发生网络错误（例如超时，中断连接或无法访问的主机）。”

Firebase身份验证无法使用html表单元素

2 个答案: