Trang này được dịch bởi Cloud Translation API.

Tính năng Xác thực nâng cao

1. Thiết lập

Lấy mã nguồn

Trong lớp học lập trình này, bạn sẽ bắt đầu với một phiên bản gần như hoàn chỉnh của ứng dụng mẫu Friendly Chat. Vì vậy, việc đầu tiên bạn cần làm là sao chép mã nguồn:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Sau đó, chuyển đến thư mục security-start, nơi bạn sẽ làm việc trong phần còn lại của lớp học lập trình này:

$ cd codelab-friendlychat-web/security-start

Bây giờ, hãy cài đặt các phần phụ thuộc để bạn có thể chạy mã. Nếu bạn đang sử dụng kết nối Internet chậm, quá trình này có thể mất một vài phút:

$ npm install && (cd functions && npm install)

Làm quen với kho lưu trữ này

Thư mục security-solution/ chứa mã hoàn chỉnh cho ứng dụng mẫu. Thư mục security-start là nơi bạn sẽ thực hiện lớp học lập trình và thiếu một số phần quan trọng của quá trình triển khai xác thực. Các tệp và tính năng chính trong security-start/ và security-solution/ là:

functions/index.js chứa mã Cloud Functions và đây là nơi bạn sẽ viết các hàm chặn xác thực.
public/ – chứa các tệp tĩnh cho ứng dụng trò chuyện
public/scripts/main.js – nơi mã JS của ứng dụng trò chuyện (src/index.js) được biên dịch
src/firebase-config.js – chứa đối tượng cấu hình Firebase dùng để khởi động ứng dụng trò chuyện của bạn
src/index.js – mã JS của ứng dụng trò chuyện

Tải Giao diện dòng lệnh (CLI) của Firebase

Bộ công cụ mô phỏng là một phần của Giao diện dòng lệnh (CLI) của Firebase. Bạn có thể cài đặt bộ công cụ này trên máy của mình bằng lệnh sau:

$ npm install -g firebase-tools@latest

Tạo javascript bằng webpack. Thao tác này sẽ tạo main.js trong thư mục public/scripts/.

webpack build

Tiếp theo, hãy xác nhận rằng bạn có phiên bản mới nhất của CLI. Lớp học lập trình này hoạt động với phiên bản 11.14 trở lên.

$ firebase --version
11.14.2

Kết nối với dự án Firebase

Tạo một dự án Firebase mới

Đăng nhập vào bảng điều khiển của Firebase bằng Tài khoản Google của bạn.
Nhấp vào nút này để tạo một dự án mới, rồi nhập tên dự án (ví dụ: Authentication MFA Codelab).
Tên dự án này được dùng làm tên hiển thị trong các giao diện của Firebase và Firebase sẽ tự động tạo một mã dự án duy nhất dựa trên tên dự án này. Xin lưu ý rằng bạn có thể nhấp vào biểu tượng Chỉnh sửa ngay bây giờ để đặt mã dự án mà bạn muốn, nhưng bạn không thể thay đổi mã này sau khi tạo dự án.

Hãy nhớ mã dự án vì bạn sẽ cần mã này sau này để xác định dự án Firebase của mình trong Firebase CLI. Nếu quên mã nhận dạng, bạn luôn có thể tìm thấy mã này sau trong phần Cài đặt dự án.
Nhấp vào Tiếp tục.
Nếu được nhắc, hãy xem xét và chấp nhận các điều khoản của Firebase, rồi nhấp vào Tiếp tục.
(Không bắt buộc) Bật tính năng hỗ trợ của AI trong bảng điều khiển của Firebase (còn gọi là "Gemini trong Firebase").
Đối với lớp học lập trình này, bạn không cần Google Analytics, vì vậy hãy tắt lựa chọn Google Analytics.
Nhấp vào Tạo dự án, đợi dự án được cấp phép rồi nhấp vào Tiếp tục.

Kết nối mã của bạn với dự án Firebase

Giờ đây, bạn cần kết nối mã này với dự án Firebase của mình. Trước tiên, hãy chạy lệnh sau để đăng nhập vào Firebase CLI:

$ firebase login

Tiếp theo, hãy chạy lệnh sau để tạo một bí danh dự án. Thay $YOUR_PROJECT_ID bằng mã dự án Firebase của bạn.

$ firebase use $YOUR_PROJECT_ID

Giờ thì bạn đã sẵn sàng chạy ứng dụng!

2. Chạy trình mô phỏng

Trong phần này, bạn sẽ chạy ứng dụng cục bộ. Điều này có nghĩa là đã đến lúc khởi động Emulator Suite.

Khởi động Trình mô phỏng

Trong thư mục nguồn của lớp học lập trình, hãy chạy lệnh sau để khởi động trình mô phỏng:

$ firebase emulators:start

Thao tác này sẽ phân phát ứng dụng của bạn tại http://127.0.0.1:5170 và liên tục tạo lại mã nguồn khi bạn thực hiện thay đổi. Bạn chỉ cần làm mới hoàn toàn (ctrl-shift-r) cục bộ trong trình duyệt để xem các thay đổi.

Bạn sẽ thấy một số kết quả như sau:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

Khi bạn thấy thông báo All emulators ready (Tất cả trình mô phỏng đã sẵn sàng), tức là ứng dụng đã sẵn sàng sử dụng.

3. Triển khai MFA

MFA đã được triển khai một phần trong kho lưu trữ này. Bạn sẽ thêm mã để trước tiên đăng ký cho người dùng sử dụng MFA, sau đó nhắc người dùng đã đăng ký MFA cung cấp yếu tố thứ hai.

Trong trình chỉnh sửa, hãy mở tệp src/index.js rồi tìm phương thức startEnrollMultiFactor(). Thêm mã sau để thiết lập trình xác minh reCAPTCHA nhằm ngăn chặn hành vi sai trái qua điện thoại (trình xác minh reCAPTCHA được đặt ở chế độ ẩn và người dùng sẽ không nhìn thấy):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Sau đó, hãy tìm phương thức finishEnrollMultiFactor() rồi thêm nội dung sau để đăng ký yếu tố thứ hai:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

Tiếp theo, hãy tìm hàm signIn rồi thêm luồng điều khiển sau đây để nhắc người dùng đã đăng ký MFA nhập yếu tố thứ hai:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .then(function (userCredential) {
      // User successfully signed in and is not enrolled with a second factor.
    })
    .catch(function (error) {
      if (error.code == "auth/multi-factor-auth-required") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

Phần còn lại của quá trình triển khai, bao gồm cả các hàm được gọi ở đây, đã hoàn tất. Để xem cách hoạt động của các tệp này, hãy duyệt qua phần còn lại của tệp.

4. Thử đăng nhập bằng MFA trong trình mô phỏng

Bây giờ, hãy thử triển khai MFA! Đảm bảo trình mô phỏng của bạn vẫn đang chạy và truy cập vào ứng dụng được lưu trữ cục bộ tại localhost:5170. Hãy thử đăng nhập và khi được nhắc cung cấp mã MFA, bạn sẽ thấy mã MFA trong cửa sổ dòng lệnh.

Vì trình mô phỏng hỗ trợ đầy đủ tính năng Xác thực đa yếu tố nên môi trường phát triển của bạn có thể hoàn toàn độc lập.

Để tìm hiểu thêm về cách triển khai MFA, hãy xem tài liệu tham khảo của chúng tôi.

5. Tạo một hàm chặn

Một số ứng dụng chỉ dành cho một nhóm người dùng cụ thể. Trong những trường hợp đó, bạn muốn có thể tạo các yêu cầu tuỳ chỉnh để người dùng đăng ký hoặc đăng nhập vào ứng dụng của bạn.

Đó là những gì mà các hàm chặn cung cấp: một cách để tạo các yêu cầu xác thực tuỳ chỉnh. Đây là Cloud Functions, nhưng không giống như hầu hết các hàm, chúng chạy đồng bộ khi người dùng cố gắng đăng ký hoặc đăng nhập.

Để tạo một hàm chặn, hãy mở functions/index.js trong trình chỉnh sửa của bạn và tìm hàm beforecreated đã được nhận xét.

Thay thế bằng đoạn mã này để chỉ cho phép người dùng có miền example.com tạo tài khoản:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. Hãy thử chức năng chặn trong trình mô phỏng

Để thử chức năng chặn, hãy đảm bảo rằng trình mô phỏng của bạn đang chạy và đăng xuất trong ứng dụng web tại localhost:5170.

Sau đó, hãy thử tạo tài khoản bằng một địa chỉ email không có đuôi example.com. Hàm chặn sẽ ngăn thao tác thành công.

Bây giờ, hãy thử lại bằng một địa chỉ email có đuôi example.com. Tài khoản sẽ được tạo thành công.

Với các hàm chặn, bạn có thể tạo mọi quy định hạn chế cần thiết về việc xác thực. Để tìm hiểu thêm, hãy xem tài liệu tham khảo.

Tóm tắt

Tuyệt vời! Bạn đã thêm tính năng Xác thực đa yếu tố vào một ứng dụng web để giúp người dùng bảo mật tài khoản của họ, sau đó bạn đã tạo các yêu cầu tuỳ chỉnh để người dùng đăng ký bằng các hàm chặn. Bạn chắc chắn đã nhận được một ảnh GIF!

ảnh GIF có cảnh mọi người trong văn phòng đang nhảy điệu "giơ tay lên trời"

Tính năng Xác thực nâng cao Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.