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

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

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

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

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

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

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

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

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

1. ในคอนโซล Google Cloud ให้เลือกกลุ่มผู้ใช้ที่ต้องการทำงานด้วย

2. ในโค้ด ให้ตั้งค่าช่อง tenantId บนอินสแตนซ์ Auth เป็น รหัสกลุ่มผู้ใช้ เช่น

   Web

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

   Web

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

การเปิดใช้การตรวจสอบสิทธิ์แบบหลายปัจจัย

1. เปิด Authentication > วิธีการลงชื่อเข้าใช้ ของคอนโซล Firebase

2. ในส่วนขั้นสูง ให้เปิดใช้การตรวจสอบสิทธิ์แบบหลายปัจจัยทาง SMS

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

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

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

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

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

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

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

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

การตั้งค่าเครื่องมือยืนยัน reCAPTCHA

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

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

การใช้ reCAPTCHA ที่ไม่แสดง

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

Web

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

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 ด้วยรหัสของ UI คอนเทนเนอร์ นอกจากนี้ คุณยังสามารถตั้งค่า Callback ที่เรียกใช้เมื่อ reCAPTCHA ได้รับการแก้ไขหรือหมดอายุ:

Web

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

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 ล่วงหน้าก่อนเริ่มแบบ 2 ปัจจัยก็ได้ การลงทะเบียน:

Web

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

Web

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

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

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

RecaptchaVerifier ย่อตรรกะนี้ออกไปโดยใช้เมธอดยืนยัน คุณจึงไม่ต้องจัดการตัวแปร grecaptcha โดยตรง

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

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

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

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

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

3. เริ่มต้นเครื่องมือยืนยัน reCAPTCHA ตามที่แสดงไว้ในส่วนก่อนหน้า โปรดข้ามขั้นตอนนี้หากมีการกำหนดค่าอินสแตนซ์ reCAPTCHAtchaVerifier แล้ว

   Web

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

   Web

   var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
   

4. รับเซสชันแบบหลายปัจจัยสำหรับผู้ใช้

   Web

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

   Web

   user.multiFactor.getSession().then(function(multiFactorSession) {
     // ...
   })
   

5. เริ่มต้นออบเจ็กต์ PhoneInfoOptions ด้วยหมายเลขโทรศัพท์ของผู้ใช้และ เซสชันแบบหลายปัจจัย

   Web

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

   Web

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

6. ส่งข้อความยืนยันไปยังโทรศัพท์ของผู้ใช้:

   Web

   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

   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

   recaptchaVerifier.clear();
   

   Web

   recaptchaVerifier.clear();
   

8. เมื่อส่งรหัส SMS แล้ว ให้ผู้ใช้ยืนยันรหัสโดยทำดังนี้

   Web

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

   Web

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

9. เริ่มต้นออบเจ็กต์ MultiFactorAssertion ด้วย PhoneAuthCredential ดังนี้

   Web

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

   Web

   var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
   

10. ลงทะเบียนให้เสร็จสิ้น หรือจะระบุชื่อที่แสดงสำหรับ ปัจจัยที่ 2 ซึ่งมีประโยชน์สำหรับผู้ใช้ที่มีปัจจัยที่สองหลายอย่าง เนื่องจาก ระบบจะปกปิดหมายเลขโทรศัพท์ในระหว่างขั้นตอนการตรวจสอบสิทธิ์ (สำหรับ เช่น +1******1234)

    Web

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

    Web

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

โค้ดด้านล่างแสดงตัวอย่างทั้งหมดของการลงทะเบียนปัจจัยที่ 2

Web

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

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

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

สำคัญ: คุณควรแจ้งให้ผู้ใช้ลงทะเบียนมากกว่า 1 ราย ปัจจัยที่ 2 ในการกู้คืนบัญชี หากผู้ใช้ลงทะเบียนเพียงรายเดียว สำหรับปัจจัยที่ 2 และจะเข้าถึงไม่ได้อีกในภายหลัง และจะเข้าใช้งานไม่ได้

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

วิธีลงชื่อเข้าใช้ให้ผู้ใช้ด้วยการยืนยันทาง SMS แบบ 2 ปัจจัย

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

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

   Web

   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

   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

   // 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 if (resolver.hints[selectedIndex].factorId ===
              TotpMultiFactorGenerator.FACTOR_ID) {
       // User selected a TOTP second factor.
       // ...
   } else {
       // Unsupported second factor.
   }
   

   Web

   // 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 if (resolver.hints[selectedIndex].factorId === firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
     // User selected a TOTP second factor.
     // ...
   } else {
     // Unsupported second factor.
   }
   

3. เริ่มต้นเครื่องมือยืนยัน reCAPTCHA ตามที่แสดงไว้ในส่วนก่อนหน้า โปรดข้ามขั้นตอนนี้หากมีการกำหนดค่าอินสแตนซ์ reCAPTCHAtchaVerifier แล้ว

   Web

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

   Web

   var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
   

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

   Web

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

   Web

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

5. ส่งข้อความยืนยันไปยังโทรศัพท์ของผู้ใช้:

   Web

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

   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

   recaptchaVerifier.clear();
   

   Web

   recaptchaVerifier.clear();
   

7. เมื่อส่งรหัส SMS แล้ว ให้ผู้ใช้ยืนยันรหัสโดยทำดังนี้

   Web

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

   Web

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

8. เริ่มต้นออบเจ็กต์ MultiFactorAssertion ด้วย PhoneAuthCredential ดังนี้

   Web

   const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
   

   Web

   var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
   

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

   Web

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

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

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 if (resolver.hints[selectedIndex].factorId ===
                       TotpMultiFactorGenerator.FACTOR_ID) {
                // Handle TOTP MFA.
                // ...
            } else {
                // Unsupported second factor.
            }
        } else if (error.code == 'auth/wrong-password') {
            // Handle other errors such as wrong password.
        }
    });

Web

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 if (resolver.hints[selectedIndex].factorId ===
        firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
        // Handle TOTP MFA.
        // ...
      } else {
        // Unsupported second factor.
      }
    } else if (error.code == 'auth/wrong-password') {
      // Handle other errors such as wrong password.
    } ...
  });

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

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

• จัดการผู้ใช้แบบหลายปัจจัย แบบเป็นโปรแกรมกับ Admin SDK