Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

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

หากคุณได้อัปเกรดเป็นการตรวจสอบสิทธิ์ 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.
    } ...
  });

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

อะไรต่อไป