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 họ, cũng như để quản lý các tài khoản dựa trên mật khẩu của ứng dụng.

Trước khi bắt đầu

  1. Thêm Firebase vào dự án JavaScript.
  2. Nếu bạn chưa kết nối ứng dụng với dự án Firebase, hãy thực hiện việc này trong 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 Firebase, hãy mở phần Auth (Xác thực).
    2. Trên thẻ Phương thức đăng nhập, hãy bật phương thức đă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 bằng 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 bước xác thực tài khoản mới 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ác yêu cầu về độ phức tạp.
  2. Tạo tài khoản mới bằng cách truyền địa chỉ email và mật khẩu của người dùng mới vào 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. Hãy 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ý lỗi. Để biết danh sách mã lỗi, hãy xem Tài liệu tham khảo về tính năng 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 của 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, hãy chuyển địa chỉ email và mật khẩu của người dùng đến 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;
      });
    Hãy 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ý lỗi. Để biết danh sách mã lỗi, hãy xem Tài liệu tham khảo về tính năng xác thực.

Nên làm: Đặt chính sách mật khẩu

Bạn có thể tăng cường bảo mật tài khoản bằng cách thực thi các yêu cầu về độ phức tạp của mật khẩu.

Để định cấu hình chính sách mật khẩu cho dự án, hãy mở thẻ Password policy (Chính sách mật khẩu) trên trang Authentication Settings (Cài đặt xác thực) của bảng điều khiển Firebase:

Cài đặt xác thực

Chính sách mật khẩu Firebase Authentication hỗ trợ các yêu cầu sau đây về mật khẩu:

  • Phải có ký tự viết thường

  • Phải viết hoa ký tự

  • Bắt buộc phải có ký tự số

  • Bắt buộc phải có ký tự không phải chữ và số

    Các ký tự sau đây đáp ứng yêu cầu về ký tự không phải chữ và số: ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~

  • Độ dài tối thiểu của mật khẩu (từ 6 đến 30 ký tự; mặc định là 6)

  • Độ dài tối đa của mật khẩu (độ dài tối đa là 4096 ký tự)

Bạn có thể bật tính năng thực thi chính sách mật khẩu theo hai chế độ:

  • Bắt buộc: Người dùng sẽ không đăng ký được cho đến khi cập nhật mật khẩu tuân thủ chính sách của bạn.

  • Thông báo: Người dùng được phép đăng ký bằng mật khẩu không tuân thủ. Khi sử dụng chế độ này, bạn nên kiểm tra xem mật khẩu của người dùng có tuân thủ chính sách ở phía máy khách hay không và nhắc người dùng cập nhật mật khẩu nếu mật khẩu đó không tuân thủ.

Người dùng mới luôn phải chọn mật khẩu tuân thủ chính sách của bạn.

Nếu có người dùng đang hoạt động, bạn không nên bật tính năng buộc nâng cấp khi đăng nhập, trừ phi bạn có ý định chặn quyền truy cập của những người dùng có mật khẩu không tuân thủ chính sách của bạn. Thay vào đó, hãy sử dụng chế độ thông báo để cho phép người dùng đăng nhập bằng mật khẩu hiện tại và thông báo cho họ về những yêu cầu mà mật khẩu của họ còn thiếu.

Xác thực mật khẩu trên ứng dụng

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

Nên làm: Bật tính năng bảo vệ tính năng liệt kê email

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

Để 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ách sử dụng công cụ gcloud của Google Cloud. Xin lưu ý rằng việc bật tính năng này sẽ 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, một tài khoản người dùng mới sẽ được tạo và liên kết với thông tin xác thực (tức là tên người dùng và mật khẩu, số điện thoại hoặc thông tin về nhà cung cấp xác thực) mà người dùng đã đăng nhập. Tài khoản mới này được lưu trữ trong dự án Firebase và có thể được dùng để xác định người dùng trên mọi ứng dụng trong dự án, bất kể người dùng đăng nhập như thế nào.

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

  • Trong Quy tắc bảo mật Firebase Realtime DatabaseCloud Storage, bạn có thể lấy mã nhận dạng người dùng riêng biệt của người dùng đã đăng nhập từ biến auth và sử dụng mã nhận dạng đó để kiểm soát 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 bạn bằng nhiều trình cung cấp dịch vụ xác thực bằng cách liên kết thông tin xác thực của trình cung cấp dịch vụ xác thực với một tài khoản người dùng hiện có.

Để đăng xuấ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.
});