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

Możesz użyć Firebase Authentication, aby umożliwić użytkownikom uwierzytelnianie w Firebase przy użyciu adresów e-mail i haseł oraz zarządzać kontami w aplikacji opartymi na hasłach.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript.
  2. Jeśli nie masz jeszcze połączenia aplikacji z projektem Firebase, zrób to w Firebase konsoli.
  3. Włącz logowanie się przy użyciu adresu e-mail i hasła:
    1. W Firebasekonsoli otwórz sekcję Uwierzytelnianie.
    2. Na karcie Metoda logowania włącz logowanie za pomocą adresu e-mail i hasła, 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 w aplikacji:

  1. Gdy nowy użytkownik zarejestruje się za pomocą formularza rejestracji w Twojej aplikacji, wykonaj wszystkie wymagane przez nią czynności weryfikacyjne, np. sprawdź, czy hasło nowego konta zostało wpisane prawidłowo 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 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 nowe konto zostało utworzone, użytkownik zostanie automatycznie zalogowany. Aby uzyskać szczegółowe informacje o zalogowanym użytkowniku, zapoznaj się z sekcją Dalsze kroki poniżej.

    W tym miejscu możesz też wykrywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej dotyczącej autoryzacji.

Logowanie użytkownika za pomocą adresu e-mail i hasła

Czynności związane z logowaniem użytkownika za pomocą hasła są podobne do czynności związanych z tworzeniem nowego konta. Na stronie logowania aplikacji wykonaj te czynności:

  1. Gdy użytkownik zaloguje się w Twojej aplikacji, przekaż jego adres e-mail i hasło do 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ć szczegółowe informacje o zalogowanym użytkowniku, zapoznaj się z sekcją Dalsze kroki poniżej.

    W tym miejscu możesz też wykrywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej dotyczącej autoryzacji.

Zalecane: ustaw zasady dotyczące haseł

Możesz zwiększyć bezpieczeństwo kont, egzekwując wymogi w zakresie złożoności haseł.

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

Ustawienia uwierzytelniania

Zasady dotyczące haseł w usłudze Firebase Authentication obsługują te wymagania dotyczące haseł:

  • Wymagana mała litera

  • Wymagana jest wielka litera

  • Wymagany znak numeryczny

  • Wymagany znak niealfanumeryczny

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

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

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

Egzekwowanie zasad dotyczących haseł możesz włączyć w 2 trybach:

  • Wymagaj: próby rejestracji nie powiodą się, dopóki użytkownik nie zmieni hasła zgodnie z zasadami.

  • Powiadom: użytkownicy mogą zarejestrować się przy użyciu hasła, które nie spełnia wymogów. Gdy korzystasz z tego trybu, sprawdź po stronie klienta, czy hasło użytkownika jest zgodne z zasadami, i poproś użytkownika o zaktualizowanie 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 wymuszonej aktualizacji przy logowaniu, chyba że chcesz zablokować dostęp użytkownikom, których hasła nie są zgodne z Twoimi zasadami. Zamiast tego użyj trybu powiadamiania, który umożliwia użytkownikom logowanie się za pomocą bieżących haseł i informuje ich o wymaganiach, których nie spełnia ich hasło.

Sprawdzanie poprawności hasła na urządzeniu klienta

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ą konkretne błędy, jeśli adres e-mail jest niezarejestrowany, a powinien być zarejestrowany (np. podczas logowania się za pomocą adresu e-mail i hasła), lub zarejestrowany, a powinien być nieużywany (np. podczas zmiany adresu e-mail użytkownika). Może to być przydatne do sugerowania użytkownikom konkretnych rozwiązań, ale może też być wykorzystywane przez złośliwe podmioty do odkrywania adresów e-mail zarejestrowanych przez 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 Twoja aplikacja nie korzysta z bardziej szczegółowych błędów.

Dalsze kroki

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

  • Zalecanym sposobem sprawdzania stanu autoryzacji użytkownika w aplikacjach jest ustawienie obserwatora na obiekcie Auth. Następnie możesz pobrać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.

  • W Firebase Realtime Database i Cloud Storage regułach bezpieczeństwa możesz pobrać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik ma dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą wielu dostawców uwierzytelniania, łącząc dane logowania dostawcy uwierzytelniania z istniejącym 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