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 bắt đầu bằng một phiên bản của ứng dụng mẫu thân thiện với Chat đã gần hoàn chỉnh. 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 đó, hãy chuyển sang thư mục security-start để xử lý 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 để có thể chạy mã. Nếu bạn đang sử dụng kết nối Internet chậm hơn, quá trình này có thể mất một hoặc hai phút:

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

Tìm hiểu về kho lưu trữ này

Thư mục security-solution/ chứa mã nguồn 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 các công việc trong lớp học lập trình này và còn thiếu một số phần quan trọng trong quy trình triển khai phương thức 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à đó 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 nhắn tin của bạn
  • public/scripts/main.js – nơi mã JS của ứng dụng nhắn tin (src/index.js) được biên dịch thành
  • src/firebase-config.js – chứa đối tượng cấu hình Firebase được dùng để khởi chạy ứng dụng nhắn tin của bạn
  • src/index.js - mã JS của ứng dụng trò chuyện của bạn

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

Bộ mô phỏng là một phần của CLI (giao diện dòng lệnh) của Firebase mà bạn có thể cài đặt 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 bên trong thư mục công khai/scripts/.

webpack build

Tiếp theo, hãy xác nhận rằng bạn có phiên bản CLI mới nhất. 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 của bạn

Nếu bạn chưa có dự án Firebase, hãy tạo một dự án Firebase mới trong bảng điều khiển của Firebase. Ghi lại Mã dự án mà bạn chọn vì bạn sẽ cần đến mã này sau này.

Bây giờ, bạn cần kết nối đoạn 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 email đại diện cho dự án. Thay thế $YOUR_PROJECT_ID bằng mã dự án Firebase của bạn.

$ firebase use $YOUR_PROJECT_ID

Bây giờ, 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 trên thiết bị. Điều này có nghĩa là đã đến lúc khởi động Bộ mô phỏng.

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

Từ bên 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 của mình.

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

Sau khi bạn thấy thông báo 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

Tính năng MFA đã được triển khai một phần trong kho lưu trữ này. Trước tiên, bạn sẽ thêm mã để đăng ký người dùng tham gia MFA, sau đó nhắc người dùng đã đăng ký MFA đối với 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 sử dụng điện thoại sai mục đích (trình xác minh reCAPTCHA được đặt thành ẩ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 đây để đă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 và thêm luồng điều khiển sau để nhắc người dùng đã đăng ký tính năng 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 tại đây, đã hoàn tất. Để xem cách hoạt động, hãy duyệt qua phần còn lại của tệp.

4. Hãy thử đăng nhập bằng tính năng xác thực đa yếu tố (MFA) trong trình mô phỏng

Bây giờ, hãy thử triển khai MFA! Hãy đả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. 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ố, 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 hàm chặn

Một số ứng dụng chỉ dành cho một nhóm người dùng cụ thể. Đối với những trường hợp đó, bạn nên 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ì 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à các Hàm đám mây, nhưng không giống như hầu hết các hàm, các hàm này 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 rồi tìm hàm beforecreated được nhận xét.

Thay thế mã này bằng 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. Dùng thử chức năng chặn trong trình mô phỏng

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

Sau đó, hãy thử tạo tài khoản bằng địa chỉ email không có đuôi là 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 địa chỉ email có đuôi là example.com. Tài khoản sẽ được tạo thành công.

Nhờ các hàm chặn, bạn có thể thiết lập mọi quy tắc hạn chế cần thiết liên quan đến việc xác thực. Để tìm hiểu thêm, hãy xem tài liệu tham khảo.

Nội dung tóm tắt

Thật tuyệt! 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 chức năng chặn. Chắc chắn bạn đã nhận được ảnh gif!

ảnh GIF mọi người trong văn phòng đang nhảy điệu nâng mái