Uwierzytelniaj za pomocą Firebase za pomocą kont opartych na haśle i JavaScript

Za pomocą Firebase Authentication możesz zezwolić użytkownikom na uwierzytelnianie się w Firebase przy użyciu adresów e-mail i haseł oraz zarządzać kontami opartymi na hasłach w aplikacji.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript.
  2. Jeśli nie masz jeszcze połączonej aplikacji z projektem Firebase, zrób to w konsoli Firebase.
  3. Włącz logowanie za pomocą adresu e-mail i hasła:
    1. W konsoli Firebase otwórz sekcję Autoryzacja.
    2. Na karcie Metoda logowania włącz metodę logowania Adres e-mail i hasło, a następnie kliknij Zapisz.

Tworzenie konta z hasłem

Aby utworzyć nowe konto użytkownika z hasłem, wykonaj te czynności na stronie rejestracji aplikacji:

  1. Gdy nowy użytkownik zarejestruje się w aplikacji, wykonaj nowe czynności weryfikacyjne konta wymagane przez aplikację, np. sprawdzenie, czy hasło do nowego konta zostało poprawnie wpisane i czy spełnia wymagania dotyczące złożoności.
  2. Utwórz nowe konto, przekazując adres e-mail i hasło nowego użytkownika do funkcji createUserWithEmailAndPassword:

    Web

    import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
    auth_signup_password.js

    Web

    firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
    email.js
    Jeśli zostało utworzone nowe konto, użytkownik zostanie automatycznie zalogowany. Aby uzyskać informacje o zalogowanym użytkowniku, zapoznaj się z sekcją Dalsze kroki poniżej.

    Tutaj możesz też wykrywać i rozwiązywać błędy. Listę kodów błędów znajdziesz w dokumentacji na temat autoryzacji.

Logowanie użytkownika przy użyciu adresu e-mail i hasła

Procedura logowania się użytkownika za pomocą hasła jest podobna do procedury tworzenia nowego konta. Na stronie logowania w aplikacji:

  1. Gdy użytkownik zaloguje się w aplikacji, prześlij jego adres e-mail i hasło do funkcji signInWithEmailAndPassword:

    Web

    import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_signin_password.js

    Web

    firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
    email.js
    Aby uzyskać informacje o zalogowanym użytkowniku, zapoznaj się z sekcją Dalsze kroki poniżej.

    Tutaj możesz też wykrywać i rozwiązywać błędy. Listę kodów błędów znajdziesz w dokumentacji na temat autoryzacji.

Zalecane: skonfiguruj zasady dotyczące haseł

Możesz zwiększyć bezpieczeństwo konta, egzekwując wymogi dotyczące złożoności haseł.

Aby skonfigurować zasadę dotyczącą haseł w projekcie, otwórz kartę Zasady dotyczące haseł na stronie Ustawienia uwierzytelniania w konsoli Firebase:

Ustawienia uwierzytelniania

Firebase Authentication zasady dotyczące haseł obsługują te wymagania dotyczące haseł:

  • Wymagane są małe litery

  • Wymagany jest znak w wielkiej literze

  • Wymagany znak liczbowy

  • Wymagany znak niealfanumeryczny

    Te znaki spełniają wymagania dotyczące znaków niealfanumerycznych:^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~

  • Minimalna długość hasła (od 6 do 30 znaków; domyślnie 6)

  • Maksymalna długość hasła (maksymalnie 4096 znaków)

Możesz włączyć egzekwowanie zasad dotyczących haseł w 2 trybach:

  • Wymagaj: logowanie nie będzie możliwe, dopóki użytkownik nie zmieni hasła zgodnie z zasadami.

  • Powiadomienie: użytkownicy mogą się rejestrować przy użyciu hasła, które nie spełnia wymogów. Korzystając z tego trybu, sprawdź, czy hasło użytkownika jest zgodne z zasadami po stronie klienta, i poproś użytkownika o zmianę hasła, jeśli nie jest ono zgodne z zasadami.

Nowi użytkownicy muszą zawsze wybrać hasło zgodne z Twoimi zasadami.

Jeśli masz aktywnych użytkowników, nie zalecamy włączania wymuszania aktualizacji podczas logowania, chyba że zamierzasz zablokować dostęp użytkownikom, których hasła nie są zgodne z Twoimi zasadami. Zamiast tego użyj trybu informowania, który pozwala użytkownikom na logowanie się za pomocą bieżących haseł i informuje ich o wymaganiach, których ich hasło nie spełnia.

Weryfikowanie hasła na kliencie

import { getAuth, validatePassword } from "firebase/auth";

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

Zalecane: włącz ochronę przed wyliczaniem adresów e-mail

Niektóre metody Firebase Authentication, które przyjmują adresy e-mail jako parametry, zgłaszają określone błędy, jeśli adres e-mail jest niezarejestrowany, gdy musi być zarejestrowany (np. podczas logowania się za pomocą adresu e-mail i hasła), lub zarejestrowany, gdy musi być nieużywany (np. podczas zmiany adresu e-mail użytkownika). Może to być przydatne do proponowania użytkownikom konkretnych rozwiązań, ale może też zostać wykorzystane przez osoby o złych zamiarach do wykrywania adresów e-mail zarejestrowanych przez Twoich użytkowników.

Aby zmniejszyć to ryzyko, zalecamy włączenie ochrony przed wyliczaniem adresów e-mail w projekcie za pomocą narzędzia gcloud Google Cloud. Pamiętaj, że włączenie tej funkcji zmienia sposób raportowania błędów przez Firebase Authentication: upewnij się, że aplikacja nie opiera się na bardziej szczegółowych błędach.

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone z danymi logowania, czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami dostawcy uwierzytelniania, za pomocą których użytkownik się zalogował. To nowe konto jest przechowywane w ramach projektu Firebase i może służyć do identyfikowania użytkownika we wszystkich aplikacjach w projekcie, niezależnie od tego, jak użytkownik się loguje.

  • W swoich aplikacjach zalecamy ustalanie stanu uwierzytelniania użytkownika przez ustawienie obserwatora w obiekcie Auth. Następnie możesz uzyskać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.

  • W regułach Firebase Realtime Database i Cloud Storage Regułach bezpieczeństwa możesz pobrać z zmiennej auth unikalny identyfikator zalogowanego użytkownika i używać go do kontrolowania dostępu do danych.

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą danych uwierzytelniających od różnych dostawców, łącząc je z dotychczasowym kontem użytkownika.

Aby wylogować użytkownika, wywołaj funkcję signOut:

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js