Thêm tính năng xác thực đa yếu tố TOTP vào ứng dụng web

Nếu đã nâng cấp lên Firebase Authentication with Identity Platform, bạn có thể thêm tính năng xác thực đa yếu tố (MFA) bằng mật khẩu một lần dựa trên thời gian (TOTP) vào ứng dụng của mình.

Firebase Authentication with Identity Platform cho phép bạn sử dụng TOTP làm yếu tố bổ sung cho MFA. Khi bạn bật tính năng này, người dùng cố gắng đăng nhập vào ứng dụng của bạn sẽ thấy yêu cầu TOTP. Để tạo mã này, họ phải sử dụng một ứng dụng xác thực có thể tạo mã TOTP hợp lệ, chẳng hạn như Google Authenticator.

Trước khi bắt đầu

  1. Hãy bật ít nhất một nhà cung cấp hỗ trợ MFA. Xin lưu ý rằng tất cả nhà cung cấp ngoại trừ những nhà cung cấp sau đây đều hỗ trợ phương thức xác thực nhiều yếu tố:

    • Xác thực điện thoại
    • Xác thực ẩn danh
    • Mã thông báo xác thực tuỳ chỉnh
    • Apple Game Center
  2. Đảm bảo ứng dụng của bạn xác minh địa chỉ email của người dùng. Phương thức xác thực nhiều yếu tố yêu cầu xác minh email. Thao tác này ngăn đối tượng độc hại đăng ký dịch vụ bằng địa chỉ email mà chúng không sở hữu rồi khoá chủ sở hữu thực sự của địa chỉ email đó bằng cách thêm yếu tố thứ hai.

  3. Nếu bạn chưa cài đặt, hãy cài đặt SDK JavaScript của Firebase.

    Phương thức xác thực đa yếu tố TOTP chỉ được hỗ trợ trên SDK Web mô-đun, phiên bản v9.19.1 trở lên.

Bật TOTP MFA

Để bật TOTP làm yếu tố thứ hai, hãy sử dụng Admin SDK hoặc gọi điểm cuối REST của cấu hình dự án.

Để sử dụng Admin SDK, hãy làm như sau:

  1. Nếu bạn chưa cài đặt, hãy cài đặt SDK Node.js dành cho quản trị viên Firebase.

    Phương thức xác thực đa yếu tố TOTP chỉ được hỗ trợ trên SDK Node.js dành cho quản trị viên Firebase phiên bản 11.6.0 trở lên.

  2. Chạy lệnh sau:

    import { getAuth } from 'firebase-admin/auth';
    
    getAuth().projectConfigManager().updateProjectConfig(
    {
          multiFactorConfig: {
              providerConfigs: [{
                  state: "ENABLED",
                  totpProviderConfig: {
                      adjacentIntervals: NUM_ADJ_INTERVALS
                  }
              }]
          }
    })
    

    Thay thế đoạn mã sau:

    • NUM_ADJ_INTERVALS: Số khoảng thời gian liền kề để chấp nhận mã xác thực một lần (TOTP), từ 0 đến 10. Giá trị mặc định là 5.

      TOTP hoạt động bằng cách đảm bảo rằng khi hai bên (bên xác minh và bên xác thực) tạo OTP trong cùng một khoảng thời gian (thường là 30 giây), thì họ sẽ tạo cùng một mật khẩu. Tuy nhiên, để điều chỉnh độ trễ đồng hồ giữa các bên và thời gian phản hồi của con người, bạn có thể định cấu hình dịch vụ TOTP để cũng chấp nhận TOTP từ các cửa sổ liền kề.

Để bật tính năng xác thực đa yếu tố TOTP bằng API REST, hãy chạy mã sau:

curl -X PATCH "https://identitytoolkit.googleapis.com/admin/v2/projects/PROJECT_ID/config?updateMask=mfa" \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    -H "X-Goog-User-Project: PROJECT_ID" \
    -d \
    '{
        "mfa": {
          "providerConfigs": [{
            "state": "ENABLED",
            "totpProviderConfig": {
              "adjacentIntervals": NUM_ADJ_INTERVALS
            }
          }]
       }
    }'

Thay thế nội dung sau:

  • PROJECT_ID: Mã dự án.
  • NUM_ADJ_INTERVALS: Số khoảng thời gian của cửa sổ, từ 0 đến 10. Giá trị mặc định là 5.

    TOTP hoạt động bằng cách đảm bảo rằng khi hai bên (bên xác minh và bên xác thực) tạo OTP trong cùng một khoảng thời gian (thường là 30 giây), thì họ sẽ tạo cùng một mật khẩu. Tuy nhiên, để điều chỉnh độ trễ đồng hồ giữa các bên và thời gian phản hồi của con người, bạn có thể định cấu hình dịch vụ TOTP để cũng chấp nhận TOTP từ các cửa sổ liền kề.

Chọn một mẫu đăng ký

Bạn có thể chọn liệu ứng dụng của mình có yêu cầu xác thực đa yếu tố hay không, cũng như cách thức và thời điểm đăng ký người dùng. Sau đây là một số mẫu phổ biến:

  • Đăng ký yếu tố thứ hai của người dùng trong quá trình đăng ký. Sử dụng phương thức này nếu ứng dụng của bạn yêu cầu xác thực đa yếu tố đối với tất cả người dùng.

  • Cung cấp lựa chọn có thể bỏ qua để đăng ký yếu tố thứ hai trong quá trình đăng ký. Nếu muốn khuyến khích nhưng không bắt buộc phải xác thực đa yếu tố trong ứng dụng, bạn có thể sử dụng phương pháp này.

  • Cho phép thêm yếu tố thứ hai từ trang quản lý tài khoản hoặc hồ sơ của người dùng, thay vì màn hình đăng ký. Điều này giúp giảm thiểu sự phiền toái trong quá trình đăng ký, đồng thời vẫn cung cấp phương thức xác thực đa yếu tố cho những người dùng nhạy cảm về bảo mật.

  • Yêu cầu thêm yếu tố thứ hai khi người dùng muốn truy cập vào các tính năng có yêu cầu bảo mật cao hơn.

Đăng ký người dùng sử dụng phương thức xác thực đa yếu tố TOTP

Sau khi bạn bật TOTP MFA làm yếu tố thứ hai cho ứng dụng, hãy triển khai logic phía máy khách để đăng ký người dùng vào TOTP MFA:

  1. Nhập các lớp và hàm MFA bắt buộc:

    import {
      multiFactor,
      TotpMultiFactorGenerator,
      TotpSecret,
      getAuth,
    } from "firebase/auth";
    
  2. Xác thực lại người dùng.

  3. Tạo khoá bí mật TOTP cho người dùng đã xác thực:

    // Generate a TOTP secret.
    const multiFactorSession = await multiFactor(currentUser).getSession();
    const totpSecret = await TotpMultiFactorGenerator.generateSecret(
      multiFactorSession
    );
    
  4. Hiển thị khoá bí mật cho người dùng và nhắc họ nhập khoá đó vào ứng dụng trình xác thực.

    Với nhiều ứng dụng xác thực, người dùng có thể nhanh chóng thêm khoá bí mật TOTP mới bằng cách quét mã QR đại diện cho URI khoá tương thích với Google Authenticator. Để tạo mã QR cho mục đích này, hãy tạo URI bằng generateQrCodeUrl(), sau đó mã hoá URI đó bằng thư viện mã QR mà bạn chọn. Ví dụ:

    const totpUri = totpSecret.generateQrCodeUrl(
        currentUser.email,
        "Your App's Name"
    );
    await QRExampleLib.toCanvas(totpUri, qrElement);
    

    Bất kể bạn có hiển thị mã QR hay không, hãy luôn hiển thị khoá bí mật để hỗ trợ các ứng dụng xác thực không thể đọc mã QR:

    // Also display this key:
    const secret = totpSecret.secretKey;
    

    Sau khi người dùng thêm khoá bí mật vào ứng dụng trình xác thực, ứng dụng này sẽ bắt đầu tạo mã TOTP.

  5. Nhắc người dùng nhập mã TOTP hiển thị trên ứng dụng trình xác thực của họ và sử dụng mã này để hoàn tất quy trình đăng ký phương thức xác thực đa yếu tố:

    // Ask the user for a verification code from the authenticator app.
    const verificationCode = // Code from user input.
    
    // Finalize the enrollment.
    const multiFactorAssertion = TotpMultiFactorGenerator.assertionForEnrollment(
      totpSecret,
      verificationCode
    );
    await multiFactor(currentUser).enroll(multiFactorAssertion, mfaDisplayName);
    

Đăng nhập người dùng bằng yếu tố thứ hai

Để đăng nhập người dùng bằng phương thức xác thực đa yếu tố TOTP, hãy sử dụng mã sau:

  1. Nhập các lớp và hàm MFA bắt buộc:

    import {
        getAuth,
        getMultiFactorResolver,
        TotpMultiFactorGenerator,
    } from "firebase/auth";
    
  2. Gọi một trong các phương thức signInWith như khi bạn không sử dụng phương thức xác thực nhiều yếu tố. (Ví dụ: signInWithEmailAndPassword().) Nếu phương thức này gửi lỗi auth/multi-factor-auth-required, hãy bắt đầu luồng MFA của ứng dụng.

    try {
        const userCredential = await signInWithEmailAndPassword(
            getAuth(),
            email,
            password
        );
        // If the user is not enrolled with a second factor and provided valid
        // credentials, sign-in succeeds.
    
        // (If your app requires MFA, this could be considered an error
        // condition, which you would resolve by forcing the user to enroll a
        // second factor.)
    
        // ...
    } catch (error) {
        switch (error.code) {
            case "auth/multi-factor-auth-required":
                // Initiate your second factor sign-in flow. (See next step.)
                // ...
                break;
            case ...:  // Handle other errors, such as wrong passwords.
                break;
        }
    }
    
  3. Trước tiên, quy trình xác thực nhiều yếu tố của ứng dụng phải nhắc người dùng chọn yếu tố thứ hai mà họ muốn sử dụng. Bạn có thể xem danh sách các yếu tố thứ hai được hỗ trợ bằng cách kiểm tra thuộc tính hints của một thực thể MultiFactorResolver:

    const mfaResolver = getMultiFactorResolver(getAuth(), error);
    const enrolledFactors = mfaResolver.hints.map(info => info.displayName);
    
  4. Nếu người dùng chọn sử dụng TOTP, hãy nhắc họ nhập TOTP hiển thị trên ứng dụng xác thực của họ rồi sử dụng TOTP đó để đăng nhập:

    switch (mfaResolver.hints[selectedIndex].factorId) {
        case TotpMultiFactorGenerator.FACTOR_ID:
            const otpFromAuthenticator = // OTP typed by the user.
            const multiFactorAssertion =
                TotpMultiFactorGenerator.assertionForSignIn(
                    mfaResolver.hints[selectedIndex].uid,
                    otpFromAuthenticator
                );
            try {
                const userCredential = await mfaResolver.resolveSignIn(
                    multiFactorAssertion
                );
                // Successfully signed in!
            } catch (error) {
                // Invalid or expired OTP.
            }
            break;
        case PhoneMultiFactorGenerator.FACTOR_ID:
            // Handle SMS second factor.
            break;
        default:
            // Unsupported second factor?
            break;
    }
    

Huỷ đăng ký phương thức xác thực nhiều yếu tố TOTP

Phần này mô tả cách xử lý việc người dùng huỷ đăng ký khỏi phương thức xác thực đa yếu tố TOTP.

Nếu người dùng đã đăng ký nhiều phương thức xác thực đa yếu tố và nếu họ huỷ đăng ký phương thức được bật gần đây nhất, thì họ sẽ nhận được auth/user-token-expired và bị đăng xuất. Người dùng phải đăng nhập lại và xác minh thông tin đăng nhập hiện có, chẳng hạn như địa chỉ email và mật khẩu.

Để huỷ đăng ký người dùng, xử lý lỗi và kích hoạt tính năng xác thực lại, hãy sử dụng đoạn mã sau:

import {
    EmailAuthProvider,
    TotpMultiFactorGenerator,
    getAuth,
    multiFactor,
    reauthenticateWithCredential,
} from "firebase/auth";

try {
    // Unenroll from TOTP MFA.
    await multiFactor(currentUser).unenroll(mfaEnrollmentId);
} catch  (error) {
    if (error.code === 'auth/user-token-expired') {
        // If the user was signed out, re-authenticate them.

        // For example, if they signed in with a password, prompt them to
        // provide it again, then call `reauthenticateWithCredential()` as shown
        // below.

        const credential = EmailAuthProvider.credential(email, password);
        await reauthenticateWithCredential(
            currentUser,
            credential
        );
    }
}

Bước tiếp theo