Firebase не может регистрировать пользователей с помощью электронной почты и пароля

ProgramBox

Firebase не может регистрировать пользователей с помощью электронной почты и пароля

Post author:admin
Запись опубликована:17 мая, 2023
Post category:Вопросы по программированию

#javascript #html #firebase

#javascript #HTML #firebase

Вопрос:

Я использую firebase для регистрации пользователей с использованием электронной почты и пароля на моем веб-сайте. Я включил регистрацию по электронной почте и паролю на своей консоли. Когда я регистрирую пользователя на веб-странице, адрес электронной почты пользователя и пароль не передаются Firebase, и ошибка также не отображается.

Это мой интерфейсный код

 <!DOCTYPE html>
<html>
<head>
  <title>Registration </title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-database.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="signup.js" defer></script>
</head>

<body>    
  <form id="form">
    <div class="header">
        <h2>Sign up as a Language Learner</h2>
    </div>
    <div class="input">
      <input id="username" type="text" name="username" placeholder="Username">
    </div>
    <div class="input">
      <input id="email" type="email" name="email" placeholder="Email">
    </div>
    <div class="input">
      <input id="password1" type="password" name="password_1" placeholder="Password">
    </div>
    <div class="input">
      <input id="password2" type="password" name="password_2" placeholder="Confirm Password">
    </div>
    <div>
      <p id="message">
      </p>
    </div>
    <div class="input">
      <button id="register_button" class="btn" name="signup">Register</button>
        <p class="input">Already a member? <a href="login.html">Sign in</a>
       amp;nbsp <a href="/">Cancel</a>
      </p>
    </div>
  </form>
  <div id="signup_success">
    <h2>Sign-up Successful!</h2>
  </div>

</body>
</html>

Вот мой signup.js файл:

 var password2 = document.querySelector("#password2").value;
var register_button = document.querySelector("#register_button");
var config = {
  apiKey: "111",
  authDomain: "222",
  databaseURL: "333",
  projectId: "444",
  storageBucket: "555",
  messagingSenderId: "666"
};
firebase.initializeApp(config);

register_button.onclick = function() {
  var email = document.querySelector("#email").value;
  var password1 = document.querySelector("#password1").value;
  firebase.auth().createUserWithEmailAndPassword(email, password1).catch(function(error) {
    alert("hello");
    var errorCode = error.code;
    var errorMessage = error.message;
    document.querySelector("#message").innerHTML = errorCode   ": "   errorMessage;
  })
}

У меня правильно настроена конфигурация с данными из консоли. Если я избавлюсь от register_button.onclick = function() , firebase.auth().createUserWithEmailAndPassword выполняется. Я пытался добавить register_button.addEventListener("click", register_user, false); в конце, и это тоже не работает.

Я понятия не имею, что с этим не так, любая помощь и совет очень ценятся. Заранее спасибо.

* Редактировать: Благодаря @Fire-in-D-Hole ниже, это произошло из-за моего тега в HTML, использование тега портит то, что мы отправляем в Firebase. Извлеченный урок: никогда не используйте при использовании Firebase

Ответ №1:

Ваш код абсолютно правильный. Однако, похоже, в методе есть дополнительное пространство createUserWithEmailAndPassword(email, password1) , которое вызывает проблему.

Пожалуйста, измените это на createUserWithEmailAndPassword(email,password1) .

Кроме того, когда я нажимаю на Register, кажется, что вы используете Form Tag , и значения отображаются в адресной строке (см. Ниже). Предлагаю вам, пожалуйста, проверить, поскольку вы, возможно, не захотите показывать детали в адресной строке.

Скриншот регистрации пользователей:

Наконец, вы используете два поля в качестве пароля убедитесь, что у вас записана логика, согласно которой оба поля пароля должны совпадать. Добавляю приведенный ниже код, который я пробовал, и у него нет тегов формы.

 var password2 = document.querySelector("#password2").value;
var register_button = document.querySelector("#register_button");



  var config = {
    apiKey: "111",
    authDomain: "1111",
    databaseURL: "1111",
    projectId: "1111",
    storageBucket: "11111",
    messagingSenderId: "111"
  };
  firebase.initializeApp(config);


register_button.onclick = function() {
  var email = document.querySelector("#email").value;
  var password1 = document.querySelector("#password1").value;
  var password2= document.querySelector("#password2").value;

  //alert("heyman im in register button");
  //console.log("Email"  email);
 // console.log("password1 Value"  password1);
 // console.log("password2 Value"  password2);

  firebase.auth().createUserWithEmailAndPassword(email, password1).catch(function(error) {
    //alert("hello");
    var errorCode = error.code;
    var errorMessage = error.message;
    document.querySelector("#message").innerHTML = errorCode   ": "   errorMessage;
  });
}

 <!DOCTYPE html>
<html>
<head>
  <title>Registration </title>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-database.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
  <script src="signup.js" defer></script>
</head>

<body>    
    <div class="header">
        <h2>Sign up as a Language Learner</h2>
    </div>
    <div class="input">
      <input id="username" type="text" name="username" placeholder="Username">
    </div>
    <div class="input">
      <input id="email" type="email" name="email" placeholder="Email">
    </div>
    <div class="input">
      <input id="password1" type="password" name="password_1" placeholder="Password">
    </div>
    <div class="input">
      <input id="password2" type="password" name="password_2" placeholder="Confirm Password">
    </div>
    <div>
      <p id="message">
      </p>
    </div>
    <div class="input">
      <button id="register_button" class="btn" name="signup">Register</button>
        <p class="input">Already a member? <a href="login.html">Sign in</a>
       amp;nbsp <a href="/">Cancel</a>
      </p>
    </div>
  <div id="signup_success">
    <h2>Sign-up Successful!</h2>
  </div>

</body>
</html>

Ответ №2:

Вам нужно использовать .onAuthStateChanged observer для обработки изменения состояния входа.

1. Я сильно сомневаюсь, что это ответ. Этот вопрос касается невозможности создать учетную запись, а не входа в систему.

2. Привет, Рон, как мне реализовать .onAuthStateChanged для регистрации пользователя? Спасибо