javascript - Firebase 身份验证不适用于 html 表单元素-6ren

javascript - Firebase 身份验证不适用于 html 表单元素

转载作者：行者123 更新时间：2023-11-30 14:34:59

我正在关注使用网络身份验证的 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”

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

我错过了什么？

最佳答案

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

没有后顾之忧，没有困惑，没有错误(我的意思是更少取决于我们的技能)

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

通过 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', { 登录选项:[ firebase.auth.EmailAuthProvider.PROVIDER_ID ], //其他配置选项...});
其他 vendor :
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

关于javascript - Firebase 身份验证不适用于 html 表单元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50571234/