Bắt đầu với Xác thực Firebase trên Trang web

Bạn có thể sử dụng Xác thực Firebase để cho phép người dùng đăng nhập vào ứng dụng của bạn bằng một hoặc nhiều phương thức đăng nhập, bao gồm đăng nhập bằng địa chỉ email và mật khẩu cũng như các nhà cung cấp danh tính được liên kết như Đăng nhập bằng Google và Đăng nhập bằng Facebook. Hướng dẫn này giúp bạn bắt đầu với Xác thực Firebase bằng cách chỉ cho bạn cách thêm địa chỉ email và đăng nhập mật khẩu vào ứng dụng của bạn.

Thêm và khởi chạy SDK xác thực

1. Nếu bạn chưa cài đặt, hãy cài đặt SDK Firebase JS và khởi tạo Firebase .

2. Thêm SDK JS xác thực Firebase và khởi chạy Xác thực Firebase:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

import firebase from "firebase/app";
import "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(Tùy chọn) Nguyên mẫu và thử nghiệm với Firebase Local Emulator Suite

Trước khi nói về cách ứng dụng của bạn xác thực người dùng, hãy giới thiệu một bộ công cụ mà bạn có thể sử dụng để tạo nguyên mẫu và thử nghiệm chức năng Xác thực: Firebase Local Emulator Suite. Nếu bạn đang quyết định giữa các nhà cung cấp và kỹ thuật xác thực, hãy thử các mô hình dữ liệu khác nhau với dữ liệu công khai và riêng tư bằng cách sử dụng Quy tắc bảo mật xác thực và Firebase hoặc tạo mẫu thiết kế giao diện người dùng đăng nhập, có thể là một ý tưởng tuyệt vời để có thể hoạt động cục bộ mà không cần triển khai các dịch vụ trực tiếp .

Trình giả lập Xác thực là một phần của Bộ giả lập cục bộ, cho phép ứng dụng của bạn tương tác với cấu hình và nội dung cơ sở dữ liệu được mô phỏng, cũng như các tài nguyên dự án được mô phỏng của bạn (các chức năng, cơ sở dữ liệu khác và quy tắc bảo mật) theo tùy chọn.

Việc sử dụng trình giả lập Xác thực chỉ bao gồm một vài bước:

1. Thêm một dòng mã vào cấu hình thử nghiệm của ứng dụng để kết nối với trình giả lập.
2. Từ thư mục gốc của thư mục dự án cục bộ của bạn, hãy chạy firebase emulators:start .
3. Sử dụng giao diện người dùng Bộ giả lập cục bộ để tạo nguyên mẫu tương tác hoặc API REST của trình mô phỏng xác thực để thử nghiệm không tương tác.

Hướng dẫn chi tiết có sẵn tại Kết nối ứng dụng của bạn với trình giả lập Xác thực . Để biết thêm thông tin, hãy xem phần giới thiệu Bộ giả lập cục bộ .

Bây giờ hãy tiếp tục với cách xác thực người dùng.

Đăng ký người dùng mới

Tạo biểu mẫu cho phép người dùng mới đăng ký với ứng dụng của bạn bằng địa chỉ email và mật khẩu của họ. Khi người dùng hoàn thành biểu mẫu, hãy xác thực địa chỉ email và mật khẩu do người dùng cung cấp, sau đó chuyển chúng đến phương thức createUserWithEmailAndPassword :

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_signup_password.js

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

Đăng nhập người dùng hiện tại

Tạo biểu mẫu cho phép người dùng hiện tại đăng nhập bằng địa chỉ email và mật khẩu của họ. Khi người dùng hoàn thành biểu mẫu, hãy gọi phương thức signInWithEmailAndPassword :

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

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

Đặt trình quan sát trạng thái xác thực và nhận dữ liệu người dùng

Đối với mỗi trang của ứng dụng cần thông tin về người dùng đã đăng nhập, hãy đính kèm một trình quan sát vào đối tượng xác thực chung. Trình quan sát này được gọi bất cứ khi nào trạng thái đăng nhập của người dùng thay đổi.

Đính kèm trình quan sát bằng phương thức onAuthStateChanged . Khi người dùng đăng nhập thành công, bạn có thể nhận thông tin về người dùng trong trình quan sát.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

Bước tiếp theo

Tìm hiểu cách thêm hỗ trợ cho các nhà cung cấp danh tính khác và tài khoản khách ẩn danh:

• Đăng nhập Google
• Đăng nhập Facebook
• Đăng nhập Twitter
• Đăng nhập GitHub
• Đăng nhập ẩn danh