เพิ่มการตรวจสอบสิทธิ์แบบหลายปัจจัยของ TOTP ลงในเว็บแอป

หากอัปเกรดเป็นการตรวจสอบสิทธิ์ Firebase ด้วย Identity Platform แล้ว คุณจะเพิ่มรหัสผ่านที่ส��ม��ร��ใ��้����������้เพียงครั้งเดียวตามเวลาได้ (TOTP) การตรวจสอบสิทธิ์แบบหลายปัจจัย (MFA) ไปยังแอปของคุณ

การตรวจสอบสิทธิ์ Firebase ด้วย Identity Platform ช่วยให้คุณใช้ TOTP เป็นปัจจัยเพิ่มเติมสำหรับ MFA ได้ เมื่อคุณ เปิดใช้ฟีเจอร์นี้ ผู้ใช้ที่พยายามลงชื่อเข้าใช้แอปจะเห็นคำขอ TOTP ในการสร้างแอป บุคคลนั้นต้องใช้แอป Authenticator ที่สร้างได้ รหัส TOTP ที่ถูกต้อง เช่น Google Authenticator

ก่อนเริ่มต้น

  1. เปิดใช้ผู้ให้บริการอย่างน้อย 1 รายที่รองรับ MFA โปรดทราบว่าผู้ให้บริการทั้งหมด ยกเว้น MFA การสนับสนุนต่อไปนี้

    • การตรวจสอบสิทธิ์ทางโทรศัพท์
    • การตรวจสอบสิทธิ์แบบไม่ระบุชื่อ
    • โทเค็นการตรวจสอบสิทธิ์ที่กำหนดเอง
    • เกมเซ็นเตอร์ของ Apple

  2. ตรวจสอบว่าแอปยืนยันอีเมลของผู้ใช้ MFA ต้องใช้อีเมล การยืนยันของคุณ วิธีนี้จะป้องกันไม่ให้ผู้ไม่ประสงค์ดีลงทะเบียนใช้บริการ ด้���ยที่อยู่อีเมลที่พวกเขาไม่ได้เป็นเจ้าของ แล้วล็อก เจ้าของอีเมลโดยเพิ่มปัจจัยที่ 2

  3. ติดตั้ง Firebase JavaScript SDK

    TOTP MFA ได้รับการสนับสนุนเฉพาะใน SDK เว็บแบบโมดูล เวอร์ชัน v9.19.1 และ ที่ด้านบน

เปิดใช้งาน TOTP MFA

หากต้องการเปิดใช้ TOTP เป็นปัจจัยที่ 2 ให้ใช้ Admin SDK หรือเรียกใช้โปรเจ็กต์ การกำหนดค่าปลายทาง REST

หากต้องการใช้ Admin SDK ให้ทำดังนี้

  1. ติดตั้ง SDK Node.js ของผู้ดูแลระบบ Firebase

    TOTP MFA ได้รับการสนับสนุนเฉพาะใน Firebase Admin Node.js SDK เวอร์ชัน 11.6.0 และ ที่ด้านบน

  2. เรียกใช้โค้ดต่อไปนี้

    import { getAuth } from 'firebase-admin/auth';

getAuth().projectConfigManager().updateProjectConfig(
{
      multiFactorConfig: {
          providerConfigs: [{
              state: "ENABLED",
              totpProviderConfig: {
                  adjacentIntervals: NUM_ADJ_INTERVALS
              }
          }]
      }
})

    โดยแทนที่ค่าต่อไปนี้

    • NUM_ADJ_INTERVALS: จำนวนที่อยู่ติดกัน ช่วงกรอบเวลาที่จะรับ TOTP ตั้งแต่ 0 ถึง 10 ค่าเริ่มต้นคือ 5

      TOTP ทำงานโดยตรวจสอบว่าเมื่อคู่สัญญา 2 ฝ่าย (สุภาษิตและ โปรแกรมตรวจสอบ) จะสร้าง OTP ภายในกรอบเวลาเดียวกัน (โดยปกติคือ 30 วินาที) ยาว) พวกเขาสร้างรหัสผ่านเดียวกัน แต่เพื่อให้สะดวกต่อนาฬิกา คลาดเคลื่อนระหว่างฝ่ายต่างๆ และเวลาตอบสนองของมนุษย์ คุณสามารถกำหนดค่า TOTP เพื่อรับ TOTP จากหน้าต่างที่อยู่ติดกัน

หากต้องการเปิดใช้งาน TOTP MFA โดยใช้ REST API ให้เรียกใช้คำสั่งต่อไปนี้

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
            }
          }]
       }
    }'

โดยแทนที่ค่าต่อไปนี้

  • PROJECT_ID: รหัสโปรเจ็กต์

  • NUM_ADJ_INTERVALS: จำนวนกรอบเวลา ตั้งแต่ 0 ถึง 10 ค่าเริ่มต้นคือ 5

    TOTP ทำงานโดยตรวจสอบว่าเมื่อคู่สัญญา 2 ฝ่าย (สุภาษิตและ โปรแกรมตรวจสอบ) จะสร้าง OTP ภายในกรอบเวลาเดียวกัน (โดยปกติคือ 30 วินาที) ยาว) พวกเขาสร้างรหัสผ่านเดียวกัน แต่เพื่อให้สะดวกต่อนาฬิกา คลาดเคลื่อนระหว่างฝ่ายต่างๆ และเวลาตอบสนองของมนุษย์ คุณสามารถกำหนดค่า TOTP เพื่อรับ TOTP จากหน้าต่างที่อยู่ติดกัน

เลือกรูปแบบการลงทะเบียน

คุณเลือกได้ว่าจะให้แอปต้องใช้การตรวจสอบสิทธิ์แบบหลายปัจจัยหรือไม่ รวมถึงวิธี และกรณีที่ควรลงทะเบียนผู้ใช้ รูปแบบที่พบบ่อยบางส่วนมีดังนี้

  • ลงทะเบียนปัจจัยที่ 2 ของผู้ใช้ซึ่งเป็นส่วนหนึ่งของการลงทะเบียน ใช้ร่างคำตอบนี้ หากแอปของคุณต้องตรวจสอบสิทธิ์แบบหลายปัจจัยสำหรับผู้ใช้ทั้งหมด

  • เสนอตัวเลือกที่ข้ามได้เพื่อลงทะเบียนปัจจัยที่ 2 ระหว่างการลงทะเบียน หากคุณ ที่ต้องการกระตุ้น แต่ไม่ต้องการการตรวจสอบสิทธิ์แบบหลายปัจจัยในแอป อาจใช้วิธีนี้

  • มอบความสามารถในการเพิ่มปัจจัยที่ 2 จากบัญชีหรือโปรไฟล์ของผู้ใช้ หน้าการจัดการ แทนที่จะเป็นหน้าจอลงชื่อสมัครใช้ ซึ่งจะช่วยลดการติดขัดในระหว่าง กระบวนการลงทะเบียน ขณะที่ยังทำการตรวจสอบสิทธิ์แบบหลายปัจจัย พร้อมใช้งานสำหรับผู้ใช้ที่มีความละเอียดอ่อนด้านความปลอดภัย

  • ต้องเพิ่มปัจจัยที่ 2 เพิ่มเมื่อผู้ใช้ต้องการเข้าถึง ที่มีข้อกำหนดด้านความปลอดภัยที่เพิ่มขึ้น

ลงทะเบียนผู้ใช้ใน TOTP MFA

หลังจากที่คุณเปิดใช้ TOTP MFA เป็นปัจจัยที่ 2 สำหรับแอปของคุณ ให้ใช้ฝั่งไคลเอ็นต์ ตรรกะในการลงทะเบียนผู้ใช้ใน TOTP MFA:

  1. นำเข้าคลาสและฟังก์ชัน MFA ที่จำเป็น:

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

  2. ตรวจสอบสิทธิ์ผู้ใช้อีกครั้ง

  3. สร้างข้อมูลลับ TOTP สำหรับผู้ใช้ที่ตรวจสอบสิทธิ์แล้ว ดังนี้

    // Generate a TOTP secret.
const multiFactorSession = await multiFactor(currentUser).getSession();
const totpSecret = await TotpMultiFactorGenerator.generateSecret(
  multiFactorSession
);

  4. แสดงข้อมูลลับให้ผู้ใช้ป้อนและแจ้งให้ป้อน แอป Authenticator

    แอป Authenticator จำนวนมากช่วยให้ผู้ใช้เพิ่มข้อมูลลับ TOTP ใหม่ได้อย่างรวดเร็วโดย กำลังสแกนคิวอาร์โค้ดที่แสดง URI คีย์ที่ใช้ร่วมกับ Google Authenticator ได้ หากต้องการสร้างคิวอาร์โค้ดเพื่อวัตถุประสงค์นี้ ให้สร้าง URI ด้วย generateQrCodeUrl() แล้วเข้าร��ัสโดยใช้ไลบรารีคิวอาร์โค้ดของ ตัวเลือก เช่น

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

    ไม่ว่าคุณจะแสดงคิวอาร์โค้ดหรือไม่ ให้แสดงคีย์ลับเสมอ เพื่อรอง��ับแอป Authenticator ที่อ่านคิวอาร์โค้ดไม่ได้

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

    หลังจากผู้ใช้เพิ่มข้อมูลลับในแอป Authenticator แล้ว แอปจะเริ่มต้น ในการสร้าง TOTP

  5. แจ้งให้ผู้ใช้พิมพ์ TOTP ที่แสดงในแอป Authenticator และ ใช้เพื่อเสร็จสิ้นการลงทะเบียน MFA

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

ให้ผู้ใช้ลงชื่อเข้าใช้ด้วยปัจจัยที่ 2

หากต้องการลงชื่อเข้าใช้ให้ผู้ใช้ด้วย TOTP MFA ให้ใช้รหัสต่อไปนี้

  1. นำเข้าคลาสและฟังก์ชัน MFA ที่จำเป็น:

    import {
    getAuth,
    getMultiFactorResolver,
    TotpMultiFactorGenerator,
} from "firebase/auth";

  2. เรียกใช้เมธอด signInWith- วิธีใดวิธีหนึ่งที่คุณทำได้หากไม่ได้ใช้ MFA (ตัวอย่างเช่น signInWithEmailAndPassword()) ถ้าเมธอดส่ง auth/multi-factor-auth-required โปรดเริ่มขั้นตอน MFA ของแอป

    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. ขั้นตอน MFA ของแอปควรแจ้งให้ผู้ใช้เลือกปัจจัยที่ 2 ก่อน ที่พวกเขาต้องการใช้ คุณสามารถดูรายการปัจจัยที่สองที่สนับสนุนได้โดย ตรวจสอบพร็อพเพอร์ตี้ hints ของอินสแตนซ์ MultiFactorResolver

    const mfaResolver = getMultiFactorResolver(getAuth(), error);
const enrolledFactors = mfaResolver.hints.map(info => info.displayName);

  4. หากผู้ใช้เลือกใช้ TOTP ให้พิมพ์ TOTP ที่แสดงอยู่ แอป Authenticator ของตนและใช้เพื่อลงชื่อเข้าใช้

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

ยกเลิกการลงทะเบียนจาก TOTP MFA

ส่วนนี้จะอธิบายวิธี��ัดการกับผู้ใช้ที่ยกเลิกการลงทะเบียนจาก TOTP MFA

หากผู้ใช้ได้ลงชื่อสมัครใช้ตัวเลือก MFA หลายรายการ และหากผู้ใช้ยกเลิกการลงทะเบียน จากตัวเลือกที่เปิดใช้ล่าสุด ผู้ใช้จะได้รับ auth/user-token-expired และออกจากระบบแล้ว ผู้ใช้ต้องลงชื่อเข้าใช้อีกครั้งและยืนยัน ข้อมูลเข้าสู่ระบบที่มีอยู่ เช่น อีเมลและรหัสผ่าน

หากต้องการยกเลิกการลงทะเบียนผู้ใช้ จัดการข้อผิดพลาด และเรียกใช้การตรวจสอบสิทธิ์ซ้ำ ให้ใช้ รหัสต่อไปนี้:

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

ขั้นตอนถัดไป