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łączenia aplikacji z projektem w Firebase, zrób to w Firebase konsoli.
  3. Włącz w projekcie Firebase logowanie za pomocą adresu e-mail i hasła:
    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 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;
    // ..
  });

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

    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 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 sekcję Zasady dotyczące haseł na karcie Bezpieczeństwo > Uwierzytelnianie > Ustawienia w konsoliFirebase:

Ustawienia uwierzytelniania

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

  • Wymagana jest 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.

  • Powiadamianie: użytkownicy mogą rejestrować się przy użyciu haseł, które nie spełniają wymogów. W tym trybie należy sprawdzić, czy hasło użytkownika jest zgodne z zasadami po stronie klienta, 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ę przy użyciu obecnych 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 Firebasekonsoli: otwórz kartę Zabezpieczenia > Uwierzytelnianie > Ustawienia, a potem 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

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 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.

  • W aplikacjach zalecanym sposobem sprawdzania stanu autoryzacji użytkownika 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.
});

Web

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