Javascript 中的 Firebase 身份验证设置答案

【问题标题】：Firebase Authentication setup in Java ScriptJavascript 中的 Firebase 身份验证设置
【发布时间】：2018-05-24 04:59:43
【问题描述】：

我当前的 firebase html 和 javascript 设置存在问题，导致用户无法注册到我的 firebase 用户数据库。运行以下代码时，我没有在浏览器中收到任何错误警报。我还尝试通过运行“firebase serve”来运行该站点，但没有将任何错误记录到控制台。

html 源代码包括和 javascript 文件如下。我已经测试以确保我能够从文档中访问用户名和密码字段并且工作正常。如果您需要查看任何其他信息，请告诉我。谢谢！

在我的 html 中的 Body 标记之后，我包含以下脚本：

<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-auth.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="register.js"></script>

然后在我的 register.js 文件中：

    // Initialize Firebase
      var config = {
        apiKey: "mykey",
        authDomain: "mydomain",
        databaseURL: "myurl",
        projectId: "myid",
        storageBucket: "mybucket",
        messagingSenderId: "mysenderid"
      };
      firebase.initializeApp(config);


    $(document).ready(function(){


    $("form").submit(function(){

      var email = $('user').val();
      var password = $('#password').val();
      firebase.auth().createUserWithEmailAndPassword(email, password)
      .then(function(val) {
            alert("Success!!");
            console.log(val);
        })
      .catch(function(error) {
        // Handle Errors here.
        alert("ERROR");
        var errorCode = error.code;
        var errorMessage = error.message;
        // [START_EXCLUDE]
        if (errorCode == 'auth/weak-password') {
          alert('The password is too weak.');
        } else {
          alert(errorMessage);
        }
        console.log(error);
        // [END_EXCLUDE]
      }).success(function(json) {
        console.log(json);
            alert("TESTER");
      })
          // [END createwithemail]
        });
});

【问题讨论】：

你做的 xhr 请求的结果是什么，查看你的开发者工具的网络标签

标签： javascript jquery html firebase firebase-authentication

【解决方案1】：

几点说明：

1/ 初始化你只需要做

<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase.js"></script>

或

<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase-auth.js"></script>

见https://firebase.google.com/docs/web/setup

2/ 不要调用表单的提交方法。只需获取电子邮件和密码字段的值（例如 var email = $('user').val();）并像您一样调用 Firebase createUserWithEmailAndPassword(email, password) 函数，无需提交表单。

请注意，如果您想处理成功的注册，您应该添加一个then()，如下所示，因为该函数返回一个promise（参见文档here）

firebase.auth().createUserWithEmailAndPassword(email, password)
        .then(function(val) {
            //Success!!
            console.log(val);
        })
        .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode == 'auth/weak-password') {
            alert('The password is too weak.');
        } else {
            alert(errorMessage);
        }
        console.log(error);
    });

【讨论】：

在您的帮助下，我已成功将用户添加到用户列表，但我收到此错误：" {code: "auth/network-request-failed", message: "A network error (例如超时、连接中断或主机无法访问）。"}
另外，我可以将提交按钮留在原处，但不让提交按钮创建获取请求，只需触发脚本中的函数调用吗？
@KevinGardenhire 对于您的第二条评论，是的，您可以（在这种情况下您应该）这样做：按钮应该只调用 JavaScript 函数。对于您的第一条评论，互联网上的快速搜索显示它可能来自表单标签，请参阅stackoverflow.com/questions/38860900/…。所以我想说你应该完全删除你的表单标签，它不会带来任何东西，而只是错误！ :-)
还有一个问题...我相信我应该能够将 firebase 配置设置放在一个单独的脚本中，这样我就可以跨多个脚本调用它，对吗？每当我这样做时，将脚本调用放在 html 中的其余部分之上......它似乎不起作用。遗漏了一些明显的东西？
如果不了解您如何组织页面（或多个页面），很难回答。如果您在 HTML 页面的顶部（在标记中的

【解决方案2】：

添加成功函数回调并查看响应

$("form").submit(function(){

  var email = $('user').val();
  var password = $('#password').val();
  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    alert("ERROR");
    var errorCode = error.code;
    var errorMessage = error.message;
    // [START_EXCLUDE]
    if (errorCode == 'auth/weak-password') {
      alert('The password is too weak.');
    } else {
      alert(errorMessage);
    }
    console.log(error);
    // [END_EXCLUDE]
  }).success(function(json) { 
        console.log(json); 
  });
  // [END createwithemail]
});

【讨论】：