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

Za pomocą Firebase Authentication możesz zezwolić użytkownikom na uwierzytelnianie w Firebase za pomocą ich adresów e-mail i haseł oraz do zarządzania kontami opartymi na hasłach w aplikacji.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript.
  2. Jeśli Twoja aplikacja nie jest jeszcze połączona z projektem Firebase, możesz to zrobić z poziomu konsoli Firebase.
  3. Włącz logowanie za pomocą adresu e-mail/hasła:
    1. W konsoli Firebase otwórz sekcję Uwierzytelnianie.
    2. Na karcie Metoda logowania włącz metodę logowania Adres e-mail i hasło, a następnie 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ę w aplikacji, wykonaj nowe czynności weryfikacyjne konta wymagane przez aplikację, np. sprawdź, 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:
    WebWeb
    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;
        // ..
      });
    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 zostało utworzone nowe konto, użytkownik zostanie automatycznie zalogowany. Zajrzyj do sekcji Dalsze kroki poniżej, aby uzyskać dane zalogowanego użytkownika.

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

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 Twojej aplikacji, przekaż jego adres e-mail i hasło do signInWithEmailAndPassword:
    WebWeb
    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;
      });
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
      });
    Zajrzyj do sekcji Dalsze kroki poniżej, aby uzyskać dane zalogowanego użytkownika.

    Możesz w nim też wykrywać i poprawiać 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, wymuszając wymagania 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

Zasady dotyczące haseł w Firebase Authentication 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ślna wartość to 6).

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

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

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

  • Powiadom: użytkownicy mogą rejestrować się przy użyciu niezgodnego hasła. Gdy używasz tego trybu, sprawdź, czy hasło użytkownika jest zgodne z zasadami po stronie klienta, i w razie potrzeby poproś go o zaktualizowanie hasła.

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

Jeśli masz aktywnych użytkowników, zalecamy nie włączać wymuszania uaktualnienia podczas logowania, chyba że chcesz zablokować dostęp użytkownikom, których hasła są niezgodne z Twoimi zasadami. Zamiast tego użyj trybu powiadomień, który umożliwia użytkownikom logowanie się przy użyciu aktualnych haseł i informowanie ich o wymaganiach, których 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, powodują wystąpienie błędów, jeśli adres e-mail nie jest zarejestrowany, gdy trzeba go zarejestrować (np. podczas logowania się za pomocą adresu e-mail i hasła), albo są rejestrowane, gdy musi być nieużywany (np. podczas zmiany adresu e-mail użytkownika). Może to być przydatne, jeśli chcesz zaproponować użytkownikom konkretne rozwiązania, ale może też zostać wykorzystane przez osoby o złych zamiarach do wykrycia adresów e-mail zarejestrowanych przez Twoich użytkowników.

Aby ograniczyć to ryzyko, zalecamy włączenie w projekcie ochrony przed wyliczeniem adresów e-mail za pomocą narzędzia Google Cloud gcloud. Pamiętaj, że włączenie tej funkcji zmienia działanie raportowania błędów w Firebase Authentication: dopilnuj, aby Twoja aplikacja nie polegała 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ł. Nowe konto jest przechowywane w ramach Twojego projektu Firebase i może być używane do identyfikowania użytkowników we wszystkich aplikacjach w Twoim projekcie niezależnie od tego, jak się on loguje.

  • W aplikacjach zalecany sposób sprawdzania stanu uwierzytelniania użytkownika to 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 DatabaseCloud Storage Regułach bezpieczeństwa możesz pobrać z zmiennej auth unikalny identyfikator zalogowanego użytkownika i używać go do kontrolowania dostępu użytkownika 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 signOut:

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

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