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 với Firebase bằng địa chỉ email và mật khẩu của họ, đồng thời 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

Thêm Firebase vào dự án JavaScript.
Nếu bạn chưa kết nối ứng dụng với dự án Firebase, hãy kết nối từ bảng điều khiển Firebase.
Bật tính năng đăng nhập bằng email/mật khẩu:
1. Trong Firebase bảng điều khiển, hãy mở phần 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.
Mẹo: Nếu bạn muốn sử dụng Firebase CLI, hãy chạy firebase init auth để định cấu hình nhà cung cấp dịch vụ xác thực, sau đó chạy firebase deploy --only auth để triển khai các thay đổi cho dự án.

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 trên trang đăng ký của ứng dụng:

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

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 đế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;
    // ..
  });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

Nếu tài khoản mới được tạo, người dùng sẽ tự động đăng nhập. 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ề 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 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:

Khi người dùng đăng nhập vào ứng dụng của bạn, hãy truyề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;
  });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

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ề xác thực.

Đề xuất: Đặt chính sách mật khẩu

Bạn có thể cải thiện tính bảo mật của 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ẻ Chính sách mật khẩu trên trang Cài đặt xác thực của bảng điều khiển Firebase:

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

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

Cần có ký tự viết thường
Cần có ký tự viết hoa
Cần có ký tự số
Cần 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 (tối đa 4096 ký tự)

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

Bắt buộc: Các lần thử đăng ký sẽ không thành công cho đến khi người dùng 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 theo cách nào đó 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 dự định chặn quyền truy cập đối với 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. Chế độ này 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ọ chưa đáp ứng.

Xác thực mật khẩu trên máy khách

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

Đề xuất: Bật tính năng bảo vệ chố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 ra các lỗi cụ thể nếu địa chỉ email chưa đă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 phải chưa sử dụng (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 cho việc đề xuất các biện pháp khắc phục cụ thể cho người dùng, nhưng các đối tượng xấu cũng có thể lợi dụng để khám phá địa chỉ email do 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ệ chống liệt kê email cho dự án bằ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's: hãy đảm bảo rằng ứ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à 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 hoặc thông tin nhà cung cấp dịch vụ xác thực mà người dùng đã đăng nhập. Tài khoản mới này được lưu trữ như một phần của dự án Firebase và có thể 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 bằng cách nào.

Trong ứng dụng, cách được đề xuất để biết trạng thái xác thực của người dùng là đặt một trình quan sát trên đối tượng Auth. Sau đó, bạn có thể lấy thông tin cơ bản về hồ sơ của người dùng từ đối tượng User. Xem bài viết Quản lý người dùng.
Trong Firebase Realtime Database và Cloud Storage 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, và sử dụng mã này để 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 bằng nhiều nhà cung cấp dịch vụ 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 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.
});auth_sign_out.js

Web

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