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.

Aby uzyskać pomoc AI, skopiuj poniższy prompt do asystenta kodowania AI (np. Antigravity, Claude Code, Codex i Cursor). Możesz dostosować prompta i współpracować z agentem. Szczegółowe informacje o instalacji znajdziesz w sekcji Umiejętności agenta Firebase. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me set up and use Firebase Authentication with email and password authentication in my app.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript.
  2. Jeśli nie masz jeszcze połączonej aplikacji z projektem w Firebase, zrób to w Firebase konsoli.
  3. Włącz w projekcie Firebase dostawcę logowania Email/Hasło:
    1. W konsoli Firebase otwórz Bezpieczeństwo > Uwierzytelnianie.
    2. Na karcie Metoda logowania włącz dostawcę logowania E-mail/hasło.
    3. Kliknij Zapisz.

Tworzenie konta opartego na haśle

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

  1. Gdy nowy użytkownik zarejestruje się za pomocą formularza rejestracji w Twojej aplikacji, wykonaj wszystkie wymagane przez nią kroki weryfikacji nowego konta, np. sprawdź, czy hasło do 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;
    // ..
  });

    Web

    firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
    Jeśli nowe konto zostało utworzone, użytkownik jest automatycznie logowany. 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 Uwierzytelniania.

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;
  });

    Web

    firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
    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 Uwierzytelniania.

Zalecane: ustaw zasady dotyczące haseł

Bezpieczeństwo konta możesz zwiększyć, egzekwując wymogi w zakresie złożoności haseł.

Aby skonfigurować zasady dotyczące haseł w projekcie, otwórz sekcję Zasady dotyczące haseł na karcie Bezpieczeństwo > Uwierzytelnianie > Ustawienia w konsoliFirebase:

Ustawienia uwierzytelniania

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

  • Wymagana mała litera

  • Wymagana 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:

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

  • Powiadamianie: użytkownicy mogą rejestrować się przy użyciu haseł, które nie spełniają wymogów. W tym trybie należy sprawdzić po stronie klienta, czy hasło użytkownika jest zgodne z zasadami, i w jakiś sposób poprosić 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 podczas logowania, 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.

Weryfikowanie 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, gdy powinien być zarejestrowany (np. podczas logowania się za pomocą adresu e-mail i hasła), lub zarejestrowany, gdy 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 Twoich użytkowników.

Aby zmniejszyć to ryzyko, zalecamy włączenie w projekcie ochrony przed wyliczaniem adresów e-mail. To ustawienie możesz sprawdzić w konsoli Firebase: otwórz Bezpieczeństwo > Uwierzytelnianie > karta Ustawienia, a następnie kliknij Działania użytkownika.

Pamiętaj, że włączenie tej funkcji zmienia sposób raportowania błędów w przypadku Firebase Authentication, więc upewnij się, że Twoja aplikacja nie korzysta z bardziej szczegółowych błędów.

Dalsze kroki

Po pierwszym zalogowaniu się użytkownika tworzone jest nowe konto użytkownika, które jest 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ł. To nowe konto jest przechowywane w ramach projektu w 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 uwierzytelniania 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 może mieć 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.
});

Web

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