Bắt đầu xác thực Firebase trên trang web

Bạn có thể sử dụng Firebase Authentication để 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 cả phương thức đă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 liên kết như Đăng nhập bằng Google và Đăng nhập bằng Facebook. Hướng dẫn này sẽ giúp bạn bắt đầu sử dụng Firebase Authentication bằng cách hướng dẫn cách thêm địa chỉ email và mật khẩu đăng nhập vào ứng dụng.

Thêm và khởi chạy SDK Authentication

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

2. Thêm SDK JS Firebase Authentication và khởi chạy Firebase Authentication:

Web

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có không gian tên.

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

Web

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có không gian tên.

import firebase from "firebase/compat/app";
import "firebase/compat/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();

(Không bắt buộc) Tạo nguyên mẫu và kiểm thử bằng Firebase Local Emulator Suite

Trước khi nói về cách ứng dụng 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 bản mô hình và kiểm thử chức năng Authentication: Firebase Local Emulator Suite. Nếu bạn đang quyết định giữa các kỹ thuật và nhà cung cấp xác thực, thử nghiệm 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 Authentication và Firebase Security Rules, hoặc tạo bản minh hoạ thiết kế giao diện người dùng đăng nhập, thì việc có thể làm việc cục bộ mà không cần triển khai dịch vụ trực tiếp có thể là một ý tưởng hay.

Trình mô phỏng Authentication là một phần của Local Emulator Suite, cho phép ứng dụng của bạn tương tác với nội dung và cấu hình cơ sở dữ liệu được mô phỏng, cũng như các tài nguyên dự án được mô phỏng (hàm, cơ sở dữ liệu khác và quy tắc bảo mật) nếu muốn.

Bạn chỉ cần thực hiện vài bước để sử dụng trình mô phỏng Authentication:

1. Thêm một dòng mã vào cấu hình kiểm thử của ứng dụng để kết nối với trình mô phỏng.
2. Chạy firebase emulators:start từ thư mục gốc của dự án cục bộ.
3. Sử dụng giao diện người dùng Local Emulator Suite để tạo bản mô hình tương tác hoặc API REST của trình mô phỏng Authentication để kiểm thử không tương tác.

Bạn có thể xem hướng dẫn chi tiết tại phần Kết nối ứng dụng với trình mô phỏng Authentication. Để biết thêm thông tin, hãy xem phần giới thiệu về Local Emulator Suite.

Bây giờ, hãy tiếp tục tìm hiểu cách xác thực người dùng.

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

Tạo một biểu mẫu cho phép người dùng mới đăng ký bằng ứ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 tất 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 các thông tin đó đến phương thức createUserWithEmailAndPassword:

Web

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có không gian tên.

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

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

Tạo một 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 tất biểu mẫu, hãy gọi phương thức signInWithEmailAndPassword:

Web

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có không gian tên.

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

Đặ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 toàn cục. 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 đối tượng tiếp nhận dữ liệu bằng phương thức onAuthStateChanged. Khi người dùng đăng nhập thành công, bạn có thể lấy thông tin về người dùng đó trong trình quan sát.

Web

Tìm hiểu thêm về API Web mô-đun có thể loại bỏ cây và nâng cấp từ API có không gian tên.

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

Web

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

Các bước tiếp theo

Tìm hiểu cách thêm tính năng 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 bằng Google
• Đăng nhập bằng Facebook
• Đăng nhập bằng Twitter
• Đăng nhập vào GitHub
• Đăng nhập ẩn danh