Xác thực bằng Firebase bằng Tài khoản dựa trên mật khẩu bằng JavaScript

Bạn có thể sử dụng Firebase Authentication để cho phép người dùng xác thực bằng Firebase bằng địa chỉ email và mật khẩu của tài khoản, đồng thời để quản lý tài khoản dựa trên mật khẩu.

Trước khi bắt đầu

  1. Thêm Firebase vào dự án JavaScript của bạn.
  2. Nếu bạn chưa kết nối ứng dụng của mình với dự án Firebase, hãy thực hiện từ bảng điều khiển Firebase.
  3. Bật tính năng đăng nhập bằng email/mật khẩu:
    1. Trong bảng điều khiển của Firebase, hãy mở phần Xác thực.
    2. Trên thẻ Phương thức đăng nhập, hãy bật tính năng đăng nhập Email/mật khẩu rồi nhấp vào Lưu.

Tạo tài khoản dựa trên mật khẩu

Để tạo tài khoản người dùng mới có mật khẩu, hãy hoàn tất các bước sau trong trang đăng ký của ứng dụng:

  1. Khi người dùng mới đăng ký bằng biểu mẫu đăng ký của ứng dụng, hãy hoàn tất mọi các bước xác thực tài khoản mà ứng dụng của bạn yêu cầu, chẳng hạn như xác minh rằng mật khẩu của tài khoản mới được nhập chính xác và đáp ứng được độ phức tạp của bạn các yêu cầu liên quan.
  2. Tạo tài khoản mới bằng cách chuyển địa chỉ email và mật khẩu của người dùng mới đến 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;
        // ..
      });
    Nếu tài khoản mới được tạo, người dùng sẽ được đăng nhập tự động. Vui lòng xem phần Các bước tiếp theo ở bên dưới để biết thông tin chi tiết về người dùng đã đăng nhập.

    Đây cũng là nơi bạn có thể phát hiện và xử lý các lỗi. Để biết danh sách mã lỗi, hãy xem Tài liệu tham khảo xác thực.

Đăng nhập người dùng bằng địa chỉ email và mật khẩu

Các bước để đăng nhập vào người dùng bằng mật khẩu tương tự như các bước để tạo tài khoản mới. Trên trang đăng nhập của ứng dụng, hãy làm như sau:

  1. Khi người dùng đăng nhập vào ứng dụng của bạn, hãy chuyển địa chỉ email của người dùng và mật khẩu đăng nhập 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;
      });
    Vui lòng xem phần Các bước tiếp theo ở bên dưới để biết thông tin chi tiết về người dùng đã đăng nhập.

    Đây cũng là nơi bạn có thể phát hiện và xử lý các lỗi. Để biết danh sách mã lỗi, hãy xem Tài liệu tham khảo xác thực.

Đề xuất: Bật tính năng bảo vệ liệt kê email

Một số phương thức Firebase Authentication lấy địa chỉ email làm tham số gửi các lỗi cụ thể nếu địa chỉ email bị huỷ đăng ký khi phải đăng ký địa chỉ đó (ví dụ: khi đăng nhập bằng địa chỉ email và mật khẩu) hoặc đã đăng ký khi không sử dụng đến (ví dụ: khi thay đổi địa chỉ email của người dùng). Mặc dù điều này có thể hữu ích trong việc đề xuất các biện pháp khắc phục cụ thể cho người dùng, nhưng nó cũng có thể bị những kẻ ác ý lợi dụng để phát hiện ra các địa chỉ email do người dùng.

Để giảm thiểu rủi ro này, bạn nên bật tính năng bảo vệ liệt kê email cho dự án của mình bằng công cụ gcloud của Google Cloud. Lưu ý rằng việc bật tính năng này tính năng thay đổi hành vi báo cáo lỗi của Firebase Authentication: hãy đảm bảo ứng dụng của bạn Không dựa vào các lỗi cụ thể hơn.

Các bước tiếp theo

Sau khi người dùng đăng nhập lần đầu tiên, một tài khoản người dùng mới sẽ được tạo và được liên kết với thông tin đăng nhập—tức là tên người dùng và mật khẩu, số điện thoại số hoặc thông tin của nhà cung cấp dịch vụ xác thực – người dùng đã đăng nhập. Thông tin mới này được lưu trữ như một phần của dự án Firebase và có thể được dùng để xác định một người dùng trên mọi ứng dụng trong dự án của bạn, bất kể người dùng đăng nhập bằng cách nào.

  • Trong ứng dụng của mình, bạn nên sử dụng cách để biết trạng thái xác thực của người dùng đặt trình quan sát trên đối tượng Auth. Sau đó, bạn có thể lấy thông tin thông tin hồ sơ cơ bản qua đối tượng User. Xem Quản lý người dùng.

  • Trong Firebase Realtime DatabaseCloud Storage của bạn Quy tắc bảo mật, bạn có thể lấy mã nhận dạng người dùng duy nhất của người dùng đã đăng nhập từ biến auth, để kiểm soát loại dữ liệu mà người dùng có thể truy cập.

Bạn có thể cho phép người dùng đăng nhập vào ứng dụng của mình bằng nhiều phương thức xác thực bằng cách liên kết thông tin đăng nhập của nhà cung cấp dịch vụ xác thực với tài khoản người dùng hiện có.

Để đăng xuất một người dùng, hãy gọi 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.
});