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

Aby umożliwić użytkownikom uwierzytelnianie przy użyciu: Firebase Authentication, Firebase za pomocą ich adresów e-mail i haseł oraz do zarządzania kont opartych na haśle.

Zanim zaczniesz

  1. Dodaj Firebase do projektu JavaScript.
  2. Jeśli Twoja aplikacja nie jest jeszcze połączona z projektem Firebase, zrób to na stronie konsolę 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 logowanie Adres e-mail/hasło. i kliknij Zapisz.

Tworzenie konta opartego na haśle

Aby utworzyć nowe konto użytkownika z hasłem, wykonaj następujące czynności w sekcji stronie rejestracji aplikacji:

  1. Gdy nowy użytkownik zarejestruje się za pomocą formularza rejestracji w aplikacji, wpisz wszystkie nowe weryfikacji konta wymaganych w aplikacji, takich jak sprawdzenie, czy nowe hasło do konta było poprawnie wpisane i jest zgodne z Twoją złożonością .
  2. Utwórz nowe konto, przekazując jego adres e-mail i hasło. 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 będzie zalogowany automatycznie. 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 referencyjnej uwierzytelniania.

.

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

Procedury logowania użytkownika za pomocą hasła są podobne do tych na stronie tworzenia nowego konta. Na stronie logowania aplikacji wykonaj te czynności:

  1. Gdy użytkownik zaloguje się w Twojej aplikacji, przekaż mu jego adres e-mail oraz 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
    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 referencyjnej uwierzytelniania.

Zalecane: włącz ochronę wyliczania e-maili

Niektóre metody Firebase Authentication, które przyjmują adresy e-mail jako parametry, określone błędy, jeśli adres e-mail nie został zarejestrowany, a należało go zarejestrować; (np. podczas logowania za pomocą adresu e-mail i hasła) lub gdy musi być nieużywany (na przykład podczas zmiany adresu e-mail użytkownika). Może to być pomocne podczas sugerowania użytkownikom konkretnych rozwiązań, ale może też niepowołane osoby wykorzystywane do wykrywania adresów e-mail zarejestrowanych przez użytkowników.

Aby ograniczyć to ryzyko, zalecamy włączenie ochrony przed wyliczeniem adresów e-mail. swojego projektu za pomocą narzędzia gcloud Google Cloud. Pamiętaj, że włączenie tej opcji zmienia działanie funkcji raportowania błędów w Firebase Authentication: upewnij się, że aplikacja nie polega na bardziej szczegółowych błędach.

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, tworzone jest nowe konto użytkownika. powiązane z danymi logowania, czyli z nazwą użytkownika, hasłem i numerem telefonu, numer telefonu lub informacje o dostawcy uwierzytelniania – użytkownik zalogowany. Ten nowy jest przechowywane w ramach projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od tego, jak się loguje.

  • Aby poznać stan uwierzytelniania użytkownika w swoich aplikacjach, ustaw obserwatora na obiekcie Auth. Dzięki temu możesz uzyskać dane użytkownika podstawowych informacji o profilu z obiektu User. Zobacz Zarządzanie użytkownikami

  • Na liście Firebase Realtime Database i Cloud Storage regułami zabezpieczeń, pobierz ze zmiennej auth unikalny identyfikator zalogowanego użytkownika, i używać ich do kontrolowania, do jakich danych użytkownik ma dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji przy użyciu wielokrotnego uwierzytelniania. dostawców, łącząc dane logowania dostawcy uwierzytelniania z istniejącego konta użytkownika.

Aby wylogować użytkownika, wywołaj 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