获取我们在 Firebase 峰会上发布的所有信息,了解 Firebase 可如何帮助您加快应用开发速度并满怀信心地运行应用。了解详情

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

หากคุณได้อัปเกรดเป็นการตรวจสอบสิทธิ์ Firebase ด้วย Identity Platform คุณสามารถเพิ่มการตรวจสอบสิทธิ์แบบหลายปัจจัยทาง SMS ลงในเว็บแอปของคุณได้

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

ก่อนจะเริ่ม

  1. เปิดใช้งานผู้ให้บริการอย่างน้อยหนึ่งรายที่รองรับการตรวจสอบสิทธิ์แบบหลายปัจจัย ผู้ให้บริการทุกรายรองรับ MFA ยกเว้น การตรวจสอบสิทธิ์ทางโทรศัพท์ การตรวจสอบสิทธิ์แบบไม่ระบุตัวตน และ Apple Game Center

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

การใช้ผู้เช่าหลายราย

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

  1. ในคอนโซล GCP ให้เลือกผู้เช่าที่คุณต้องการใช้งาน

  2. ในรหัสของคุณ ตั้งค่าฟิลด์ tenantId บนอินสแตนซ์ Auth เป็น ID ของผู้เช่าของคุณ ตัวอย่างเช่น:

    Web version 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth(app);
    auth.tenantId = "myTenantId1";
    

    Web version 8

    firebase.auth().tenantId = 'myTenantId1';
    

การเปิดใช้งานการพิสูจน์ตัวตนแบบหลายปัจจัย

  1. เปิดหน้า การ ตรวจสอบสิทธิ์ > วิธีการลงชื่อเข้าใช้ ของคอนโซล Firebase

  2. ในส่วน ขั้นสูง ให้เปิดใช้ งาน SMS Multi-factor Authentication

    คุณควรป้อนหมายเลขโทรศัพท์ที่คุณจะใช้ทดสอบแอปด้วย แม้ว่าจะเป็นทางเลือก แต่ขอแนะนำให้ลงทะเบียนหมายเลขโทรศัพท์ทดสอบเพื่อหลีกเลี่ยงการควบคุมปริมาณระหว่างการพัฒนา

  3. หากคุณยังไม่ได้อนุญาตโดเมนของแอป ให้เพิ่มลงในรายการอนุญาตในหน้าการ ตรวจสอบสิทธิ์ > การตั้งค่า ของคอนโซล Firebase

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

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

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

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

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

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

การตั้งค่าตัวตรวจสอบ reCAPTCHA

ก่อนที่คุณจะส่งรหัส SMS ได้ คุณต้องกำหนดค่าตัวตรวจสอบ reCAPTCHA Firebase ใช้ reCAPTCHA เพื่อป้องกันการละเมิดโดยทำให้แน่ใจว่าคำขอยืนยันหมายเลขโทรศัพท์มาจากโดเมนที่อนุญาตของแอป

คุณไม่จำเป็นต้องตั้งค่าไคลเอ็นต์ reCAPTCHA ด้วยตนเอง วัตถุ RecaptchaVerifier ของ SDK ไคลเอ็นต์จะสร้างและเริ่มต้นคีย์และข้อมูลลับของไคลเอ็นต์ที่จำเป็นโดยอัตโนมัติ

ใช้ reCAPTCHA . ที่มองไม่เห็น

วัตถุ RecaptchaVerifier รองรับ reCAPTCHA ที่มองไม่เห็น ซึ่งมักจะตรวจสอบผู้ใช้ได้โดยไม่ต้องมีการโต้ตอบใดๆ ในการใช้ reCAPTCHA ที่มองไม่เห็น ให้สร้าง RecaptchaVerifier โดยตั้งค่าพารามิเตอร์ size เป็น invisible และระบุ ID ขององค์ประกอบ UI ที่เริ่มการลงทะเบียนแบบหลายปัจจัย:

Web version 9

import { RecaptchaVerifier } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier("sign-in-button", {
    "size": "invisible",
    "callback": function(response) {
        // reCAPTCHA solved, you can proceed with
        // phoneAuthProvider.verifyPhoneNumber(...).
        onSolvedRecaptcha();
    }
}, auth);

Web version 8

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
  // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
  onSolvedRecaptcha();
}
});

การใช้วิดเจ็ต reCAPTCHA

ในการใช้วิดเจ็ต reCAPTCHA ที่มองเห็นได้ ให้สร้างองค์ประกอบ HTML เพื่อให้มีวิดเจ็ต จากนั้นสร้างวัตถุ RecaptchaVerifier ด้วย ID ของคอนเทนเนอร์ UI คุณยังสามารถเลือกที่จะตั้งค่าการโทรกลับที่จะเรียกใช้เมื่อ reCAPTCHA ได้รับการแก้ไขหรือหมดอายุ:

Web version 9

import { RecaptchaVerifier } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha-container",

    // Optional reCAPTCHA parameters.
    {
      "size": "normal",
      "callback": function(response) {
        // reCAPTCHA solved, you can proceed with 
        // phoneAuthProvider.verifyPhoneNumber(...).
        onSolvedRecaptcha();
      },
      "expired-callback": function() {
        // Response expired. Ask user to solve reCAPTCHA again.
        // ...
      }
    }, auth
);

Web version 8

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
  'recaptcha-container',
  // Optional reCAPTCHA parameters.
  {
    'size': 'normal',
    'callback': function(response) {
      // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
      // ...
      onSolvedRecaptcha();
    },
    'expired-callback': function() {
      // Response expired. Ask user to solve reCAPTCHA again.
      // ...
    }
  });

การแสดงผลล่วงหน้า reCAPTCHA

คุณสามารถเลือกแสดง reCAPTCHA ล่วงหน้าก่อนเริ่มการลงทะเบียนแบบสองปัจจัย:

Web version 9

recaptchaVerifier.render()
    .then(function (widgetId) {
        window.recaptchaWidgetId = widgetId;
    });

Web version 8

recaptchaVerifier.render()
  .then(function(widgetId) {
    window.recaptchaWidgetId = widgetId;
  });

หลังจากที่ render() แก้ไขแล้ว คุณจะได้รับรหัสวิดเจ็ตของ reCAPTCHA ซึ่งคุณสามารถใช้เพื่อโทรไปยัง reCAPTCHA API ได้:

var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);

การลงทะเบียนปัจจัยที่สอง

ในการลงทะเบียนปัจจัยรองใหม่สำหรับผู้ใช้:

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

  2. ขอให้ผู้ใช้ป้อนหมายเลขโทรศัพท์

  3. เริ่มต้นตัวตรวจสอบ reCAPTCHA ตามที่แสดงในหัวข้อก่อนหน้า ข้ามขั้นตอนนี้หากมีการกำหนดค่าอินสแตนซ์ RecaptchaVerifier แล้ว:

    Web version 9

    import { RecaptchaVerifier } from "firebase/auth";
    
    const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
    

    Web version 8

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. รับเซสชันหลายปัจจัยสำหรับผู้ใช้:

    Web version 9

    import { multiFactor } from "firebase/auth";
    
    multiFactor(user).getSession().then(function (multiFactorSession) {
        // ...
    });
    

    Web version 8

    user.multiFactor.getSession().then(function(multiFactorSession) {
      // ...
    })
    
  5. เริ่มต้นวัตถุ PhoneInfoOptions ด้วยหมายเลขโทรศัพท์ของผู้ใช้และเซสชันแบบหลายปัจจัย:

    Web version 9

    // Specify the phone number and pass the MFA session.
    const phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    

    Web version 8

    // Specify the phone number and pass the MFA session.
    var phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    
  6. ส่งข้อความยืนยันไปยังโทรศัพท์ของผู้ใช้:

    Web version 9

    import { PhoneAuthProvider } from "firebase/auth";
    
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
        .then(function (verificationId) {
            // verificationId will be needed to complete enrollment.
        });
    

    Web version 8

    var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    // Send SMS verification code.
    return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
      .then(function(verificationId) {
        // verificationId will be needed for enrollment completion.
      })
    

    แม้ว่าจะไม่จำเป็น แต่ควรแจ้งให้ผู้ใช้ทราบล่วงหน้าว่าพวกเขาจะได้รับข้อความ SMS และใช้อัตรามาตรฐานดังกล่าว

  7. หากคำขอล้มเหลว ให้รีเซ็ต reCAPTCHA จากนั้นทำซ้ำขั้นตอนก่อนหน้าเพื่อให้ผู้ใช้ลองอีกครั้ง โปรดทราบว่า verifyPhoneNumber() จะรีเซ็ต reCAPTCHA โดยอัตโนมัติเมื่อมีข้อผิดพลาด เนื่องจากโทเค็น reCAPTCHA เป็นแบบใช้ครั้งเดียวเท่านั้น

    Web version 9

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    

    Web version 8

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    
  8. เมื่อส่งรหัส SMS แล้ว ให้ขอให้ผู้ใช้ตรวจสอบรหัส:

    Web version 9

    // Ask user for the verification code. Then:
    const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
    

    Web version 8

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  9. เริ่มต้นวัตถุ MultiFactorAssertion ด้วย PhoneAuthCredential :

    Web version 9

    import { PhoneMultiFactorGenerator } from "firebase/auth";
    
    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    Web version 8

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  10. เสร็จสิ้นการลงทะเบียน คุณสามารถเลือกระบุชื่อที่แสดงสำหรับปัจจัยที่สองได้ สิ่งนี้มีประโยชน์สำหรับผู้ใช้ที่มีปัจจัยหลายวินาที เนื่องจากหมายเลขโทรศัพท์ถูกปิดบังระหว่างขั้นตอนการตรวจสอบสิทธิ์ (เช่น +1******1234)

    Web version 9

    // Complete enrollment. This will update the underlying tokens
    // and trigger ID token change listener.
    multiFactor(user).enroll(multiFactorAssertion, "My personal phone number");
    

    Web version 8

    // Complete enrollment. This will update the underlying tokens
    // and trigger ID token change listener.
    user.multiFactor.enroll(multiFactorAssertion, 'My personal phone number');
    

รหัสด้านล่างแสดงตัวอย่างที่สมบูรณ์ของการลงทะเบียนปัจจัยที่สอง:

Web version 9

import {
    multiFactor, PhoneAuthProvider, PhoneMultiFactorGenerator,
    RecaptchaVerifier
} from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
multiFactor(user).getSession()
    .then(function (multiFactorSession) {
        // Specify the phone number and pass the MFA session.
        const phoneInfoOptions = {
            phoneNumber: phoneNumber,
            session: multiFactorSession
        };

        const phoneAuthProvider = new PhoneAuthProvider(auth);

        // Send SMS verification code.
        return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier);
    }).then(function (verificationId) {
        // Ask user for the verification code. Then:
        const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
        const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

        // Complete enrollment.
        return multiFactor(user).enroll(multiFactorAssertion, mfaDisplayName);
    });

Web version 8

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
user.multiFactor.getSession().then(function(multiFactorSession) {
  // Specify the phone number and pass the MFA session.
  var phoneInfoOptions = {
    phoneNumber: phoneNumber,
    session: multiFactorSession
  };
  var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
  // Send SMS verification code.
  return phoneAuthProvider.verifyPhoneNumber(
      phoneInfoOptions, recaptchaVerifier);
})
.then(function(verificationId) {
  // Ask user for the verification code.
  var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
  var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
  // Complete enrollment.
  return user.multiFactor.enroll(multiFactorAssertion, mfaDisplayName);
});

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

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

ในการลงชื่อเข้าใช้ผู้ใช้ด้วยการยืนยันทาง SMS แบบสองปัจจัย:

  1. ลงชื่อเข้าใช้ให้ผู้ใช้ด้วยปัจจัยแรก จากนั้นจับข้อผิดพลาด auth/multi-factor-auth-required ข้อผิดพลาดนี้มีตัวแก้ไข คำแนะนำเกี่ยวกับปัจจัยที่สองที่ลงทะเบียน และเซสชันพื้นฐานที่พิสูจน์ว่าผู้ใช้รับรองความถูกต้องด้วยปัจจัยแรกได้สำเร็จ

    ตัวอย่างเช่น หากปัจจัยแรกของผู้ใช้คืออีเมลและรหัสผ่าน:

    Web version 9

    import { getAuth, getMultiFactorResolver} from "firebase/auth";
    
    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
        .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') {
                // The user is a multi-factor user. Second factor challenge is required.
                resolver = getMultiFactorResolver(auth, error);
                // ...
            } else if (error.code == 'auth/wrong-password') {
                // Handle other errors such as wrong password.
            }
    });
    

    Web version 8

    firebase.auth().signInWithEmailAndPassword(email, password)
      .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') {
          // The user is a multi-factor user. Second factor challenge is required.
          resolver = error.resolver;
          // ...
        } else if (error.code == 'auth/wrong-password') {
          // Handle other errors such as wrong password.
        } ...
      });
    

    หากปัจจัยแรกของผู้ใช้เป็นผู้ให้บริการรวม เช่น OAuth, SAML หรือ OIDC ให้ตรวจจับข้อผิดพลาดหลังจากเรียก signInWithPopup() หรือ signInWithRedirect()

  2. หากผู้ใช้ลงทะเบียนปัจจัยรองไว้หลายปัจจัย ให้สอบถามว่าจะใช้ปัจจัยใด:

    Web version 9

    // Ask user which second factor to use.
    // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber
    // You can get the display name via resolver.hints[selectedIndex].displayName
    
    if (resolver.hints[selectedIndex].factorId === PhoneMultiFactorGenerator.FACTOR_ID) {
        // User selected a phone second factor.
        // ...
    } else {
        // Unsupported second factor.
        // Note that only phone second factors are currently supported.
    }
    

    Web version 8

    // Ask user which second factor to use.
    // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber
    // You can get the display name via resolver.hints[selectedIndex].displayName
    if (resolver.hints[selectedIndex].factorId === firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
      // User selected a phone second factor.
      // ...
    } else {
      // Unsupported second factor.
      // Note that only phone second factors are currently supported.
    }
    
  3. เริ่มต้นตัวตรวจสอบ reCAPTCHA ตามที่แสดงในหัวข้อก่อนหน้า ข้ามขั้นตอนนี้หากมีการกำหนดค่าอินสแตนซ์ RecaptchaVerifier แล้ว:

    Web version 9

    import { RecaptchaVerifier } from "firebase/auth";
    
    recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
    

    Web version 8

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. เริ่มต้นวัตถุ PhoneInfoOptions ด้วยหมายเลขโทรศัพท์ของผู้ใช้และเซสชันแบบหลายปัจจัย ค่าเหล่านี้มีอยู่ในวัตถุ resolver ที่ส่งไปยังข้อผิดพลาด auth/multi-factor-auth-required :

    Web version 9

    const phoneInfoOptions = {
        multiFactorHint: resolver.hints[selectedIndex],
        session: resolver.session
    };
    

    Web version 8

    var phoneInfoOptions = {
      multiFactorHint: resolver.hints[selectedIndex],
      session: resolver.session
    };
    
  5. ส่งข้อความยืนยันไปยังโทรศัพท์ของผู้ใช้:

    Web version 9

    // Send SMS verification code.
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
        .then(function (verificationId) {
            // verificationId will be needed for sign-in completion.
        });
    

    Web version 8

    var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    // Send SMS verification code.
    return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
      .then(function(verificationId) {
        // verificationId will be needed for sign-in completion.
      })
    
  6. หากคำขอล้มเหลว ให้รีเซ็ต reCAPTCHA จากนั้นทำซ้ำขั้นตอนก่อนหน้าเพื่อให้ผู้ใช้ลองอีกครั้ง:

    Web version 9

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    

    Web version 8

    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    recaptchaVerifier.render()
      .then(function(widgetId) {
        grecaptcha.reset(widgetId);
      });
    
  7. เมื่อส่งรหัส SMS แล้ว ให้ขอให้ผู้ใช้ตรวจสอบรหัส:

    Web version 9

    const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
    

    Web version 8

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  8. เริ่มต้นวัตถุ MultiFactorAssertion ด้วย PhoneAuthCredential :

    Web version 9

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    Web version 8

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  9. เรียกใช้โปรแกรมแก้ไข. resolver.resolveSignIn() เพื่อดำเนินการตรวจสอบสิทธิ์รองให้เสร็จสมบูรณ์ จากนั้น คุณจะเข้าถึงผลลัพธ์การลงชื่อเข้าใช้เดิมได้ ซึ่งรวมถึงข้อมูลเฉพาะผู้ให้บริการมาตรฐานและข้อมูลรับรองการตรวจสอบสิทธิ์:

    Web version 9

    // Complete sign-in. This will also trigger the Auth state listeners.
    resolver.resolveSignIn(multiFactorAssertion)
        .then(function (userCredential) {
            // userCredential will also contain the user, additionalUserInfo, optional
            // credential (null for email/password) associated with the first factor sign-in.
    
            // For example, if the user signed in with Google as a first factor,
            // userCredential.additionalUserInfo will contain data related to Google 
            // provider that the user signed in with.
            // - user.credential contains the Google OAuth credential.
            // - user.credential.accessToken contains the Google OAuth access token.
            // - user.credential.idToken contains the Google OAuth ID token.
        });
    

    Web version 8

    // Complete sign-in. This will also trigger the Auth state listeners.
    resolver.resolveSignIn(multiFactorAssertion)
      .then(function(userCredential) {
        // userCredential will also contain the user, additionalUserInfo, optional
        // credential (null for email/password) associated with the first factor sign-in.
        // For example, if the user signed in with Google as a first factor,
        // userCredential.additionalUserInfo will contain data related to Google provider that
        // the user signed in with.
        // user.credential contains the Google OAuth credential.
        // user.credential.accessToken contains the Google OAuth access token.
        // user.credential.idToken contains the Google OAuth ID token.
      });
    

รหัสด้านล่างแสดงตัวอย่างที่สมบูรณ์ของการลงชื่อเข้าใช้ผู้ใช้แบบหลายปัจจัย:

Web version 9

import {
    getAuth,
    getMultiFactorResolver,
    PhoneAuthProvider,
    PhoneMultiFactorGenerator,
    RecaptchaVerifier,
    signInWithEmailAndPassword
} from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
    .then(function (userCredential) {
        // User is not enrolled with a second factor and is successfully
        // signed in.
        // ...
    })
    .catch(function (error) {
        if (error.code == 'auth/multi-factor-auth-required') {
            const resolver = getMultiFactorResolver(auth, error);
            // Ask user which second factor to use.
            if (resolver.hints[selectedIndex].factorId ===
                PhoneMultiFactorGenerator.FACTOR_ID) {
                const phoneInfoOptions = {
                    multiFactorHint: resolver.hints[selectedIndex],
                    session: resolver.session
                };
                const phoneAuthProvider = new PhoneAuthProvider(auth);
                // Send SMS verification code
                return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
                    .then(function (verificationId) {
                        // Ask user for the SMS verification code. Then:
                        const cred = PhoneAuthProvider.credential(
                            verificationId, verificationCode);
                        const multiFactorAssertion =
                            PhoneMultiFactorGenerator.assertion(cred);
                        // Complete sign-in.
                        return resolver.resolveSignIn(multiFactorAssertion)
                    })
                    .then(function (userCredential) {
                        // User successfully signed in with the second factor phone number.
                    });
            } else {
                // Unsupported second factor.
            }
        } else if (error.code == 'auth/wrong-password') {
            // Handle other errors such as wrong password.
        }
    });

Web version 8

var resolver;
firebase.auth().signInWithEmailAndPassword(email, password)
  .then(function(userCredential) {
    // User is not enrolled with a second factor and is successfully signed in.
    // ...
  })
  .catch(function(error) {
    if (error.code == 'auth/multi-factor-auth-required') {
      resolver = error.resolver;
      // Ask user which second factor to use.
      if (resolver.hints[selectedIndex].factorId ===
          firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
        var phoneInfoOptions = {
          multiFactorHint: resolver.hints[selectedIndex],
          session: resolver.session
        };
        var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
        // Send SMS verification code
        return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
          .then(function(verificationId) {
            // Ask user for the SMS verification code.
            var cred = firebase.auth.PhoneAuthProvider.credential(
                verificationId, verificationCode);
            var multiFactorAssertion =
                firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
            // Complete sign-in.
            return resolver.resolveSignIn(multiFactorAssertion)
          })
          .then(function(userCredential) {
            // User successfully signed in with the second factor phone number.
          });
      } else {
        // Unsupported second factor.
      }
    } else if (error.code == 'auth/wrong-password') {
      // Handle other errors such as wrong password.
    } ...
  });

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

อะไรต่อไป