Блог

В настоящее время я работаю над веб-сайтом, на котором есть панель администратора, но я не могу войти в систему. Конфигурация Firebase копируется с веб-сайта, и аутентификация активируется с помощью электронной почты и пароля. Вот мой код:

     <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-auth.js"></script>
    <script>
        // CONFIG FIREBASE
        const firebaseConfig = {
            // Firebase config is copied from the Firebase project
        };
        firebase.initializeApp(firebaseConfig);

        // WORK ON USER
        const myButton = document.getElementById('signing');
        const emailField = document.getElementById('inputEmail');
        const passwordField = document.getElementById('inputPassword');

        myButton.addEventListener(`click`, function() {
            const email = emailField.value;
            const password = passwordField.value;
            
            firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
                const errorCode = error.code;
                const errorMessage = error.message;
                alert('Error : '   errorCode   ' - '   errorMessage);
            });

            firebase.auth().onAuthStateChanged(function(user) {
                if (user) {
                    const displayName = user.displayName;
                    const emailU = user.email;
                    alert('Hello '   displayName   '!');
                    alert('Your mail is '   emailU);
                } else {
                    alert('Not logged !');
                }
            });
        });
    </script>`
  

Код соответствующей формы:

 <form class="form-signin">
  <img
    class="mb-4"
    src="assets/images/logo.png"
    alt=""
    width="72"
    height="72"
  />
  <h1 class="h3 mb-3 font-weight-normal">Se connecter</h1>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input
    type="email"
    id="inputEmail"
    class="form-control"
    placeholder="Email"
    required
    autofocus
  />
  <label for="inputPassword" class="sr-only">Password</label>
  <input
    type="password"
    id="inputPassword"
    class="form-control"
    placeholder="Mot de passe"
    required
  />
  <button
    id="signing"
    class="btn btn-lg btn-primary btn-block"
    type="submit"
  >
    Se connecter
  </button>
  <p class="mt-5 mb-3 text-muted">Les papilles de Lydie</p>
</form>
  

Ваша проблема, скорее всего, связана с тем фактом, что ваша форма отправляется до signInWithEmailAndPassword() запуска метода Firebase.

Как видно из кода формы, вы объявляете свою кнопку с типом submit :

 <form class="form-signin">
    // ....
    <button id="signing" class="..." type="submit">Se connecter</button>
    // .... 
</form>
  

Вы не хотите отправлять форму, вы просто хотите получить значения, введенные в поля, и передать их signInWithEmailAndPassword() методу.

Итак, если вы присвоите button своей кнопке тип, как показано ниже, это должно решить вашу проблему, потому что форма не будет отправлена.

 <button id="signing" class="..." type="button">Se connecter</button>