หากคุณอัปเกรดเป็น Firebase Authentication ด้วย Identity Platform คุณจะเพิ่ม SMS multi-factor authentication ให้กับเว็บแอปได้
การรับรองความถูกต้องด้วยหลายปัจจัยช่วยเพิ่มความปลอดภัยของแอปของคุณ แม้ว่าผู้โจมตีมักจะเจาะรหัสผ่านและบัญชีโซเชียล แต่การสกัดกั้นข้อความนั้นยากกว่า
ก่อนที่คุณจะเริ่มต้น
เปิดใช้งานผู้ให้บริการอย่างน้อยหนึ่งรายที่รองรับการรับรองความถูกต้องด้วยหลายปัจจัย ผู้ให้บริการทุกรายรองรับ MFA ยกเว้น การตรวจสอบสิทธิ์ทางโทรศัพท์ การตรวจสอบสิทธิ์แบบไม่ระบุตัวตน และ Apple Game Center
ตรวจสอบให้แน่ใจว่าแอปของคุณยืนยันอีเมลของผู้ใช้ MFA ต้องการการยืนยันอีเมล วิธีนี้จะป้องกันไม่ให้ผู้ไม่หวังดีลงทะเบียนใช้บริการด้วยอีเมลที่พวกเขาไม่ได้เป็นเจ้าของ จากนั้นจึงล็อกเอาต์เจ้าของที่แท้จริงโดยเพิ่มปัจจัยที่สอง
การใช้ผู้เช่าหลายราย
หากคุณเปิดใช้งานการรับรองความถูกต้องด้วยหลายปัจจัยสำหรับใช้ในสภาพแวดล้อม แบบหลายผู้เช่า ตรวจสอบให้แน่ใจว่าได้ทำตามขั้นตอนต่อไปนี้ (นอกเหนือจากคำแนะนำที่เหลือในเอกสารนี้):
ในคอนโซล GCP ให้เลือกผู้เช่าที่คุณต้องการทำงานด้วย
ในโค้ดของคุณ ให้ตั้งค่าฟิลด์
tenantId
บนอินสแตนซ์Auth
เป็น ID ของผู้เช่าของคุณ ตัวอย่างเช่น:เว็บโมดูลาร์ API
import { getAuth } from "firebase/auth"; const auth = getAuth(app); auth.tenantId = "myTenantId1";
API เนมสเปซของเว็บ
firebase.auth().tenantId = 'myTenantId1';
เปิดใช้งานการรับรองความถูกต้องด้วยหลายปัจจัย
เปิดหน้า การตรวจสอบสิทธิ์ > วิธีลงชื่อเข้าใช้ ของคอนโซล Firebase
ในส่วน ขั้นสูง เปิดใช้งาน การยืนยันตัวตนด้วยหลายปัจจัยทาง SMS
คุณควรป้อนหมายเลขโทรศัพท์ที่คุณจะทดสอบแอปด้วย แม้ว่าจะเป็นทางเลือก แต่ขอแนะนำให้ลงทะเบียนหมายเลขโทรศัพท์ทดสอบเพื่อหลีกเลี่ยงการควบคุมปริมาณระหว่างการพัฒนา
หากคุณยังไม่ได้อนุญาตโดเมนของแอป ให้เพิ่มลงในรายการอนุญาตในหน้า การตรวจสอบสิทธิ์ > การตั้งค่า ของคอนโซล Firebase
การเลือกรูปแบบการลงทะเบียน
คุณสามารถเลือกได้ว่าแอปของคุณต้องการการยืนยันตัวตนแบบหลายปัจจัยหรือไม่ และจะลงทะเบียนผู้ใช้อย่างไรและเมื่อใด รูปแบบทั่วไปบางอย่าง ได้แก่ :
ลงทะเบียนปัจจัยที่สองของผู้ใช้เป็นส่วนหนึ่งของการลงทะเบียน ใช้วิธีนี้หากแอปของคุณต้องการการรับรองความถูกต้องด้วยหลายปัจจัยสำหรับผู้ใช้ทั้งหมด
เสนอตัวเลือกที่ข้ามได้เพื่อลงทะเบียนปัจจัยที่สองระหว่างการลงทะเบียน แอปที่ต้องการส่งเสริมแต่ไม่ต้องการการรับรองความถูกต้องด้วยหลายปัจจัยอาจชอบวิธีนี้
ให้ความสามารถในการเพิ่มปัจจัยที่สองจากบัญชีผู้ใช้หรือหน้าการจัดการโปรไฟล์ แทนที่จะเป็นหน้าจอลงชื่อสมัครใช้ สิ่งนี้ช่วยลดความขัดแย้งระหว่างขั้นตอนการลงทะเบียน ในขณะที่ยังคงทำให้การรับรองความถูกต้องด้วยหลายปัจจัยพร้อมใช้งานสำหรับผู้ใช้ที่มีความสำคัญต่อความปลอดภัย
ต้องเพิ่มปัจจัยที่สองทีละน้อยเมื่อผู้ใช้ต้องการเข้าถึงคุณสมบัติที่มีข้อกำหนดด้านความปลอดภัยเพิ่มขึ้น
การตั้งค่าตัวตรวจสอบ reCAPTCHA
ก่อนที่คุณจะส่งรหัส SMS ได้ คุณต้องกำหนดค่าตัวยืนยัน reCAPTCHA Firebase ใช้ reCAPTCHA เพื่อป้องกันการละเมิดโดยตรวจสอบว่าคำขอยืนยันหมายเลขโทรศัพท์มาจากหนึ่งในโดเมนที่อนุญาตของแอป
คุณไม่จำเป็นต้องตั้งค่าไคลเอนต์ reCAPTCHA ด้วยตนเอง วัตถุ RecaptchaVerifier
ของไคลเอนต์ SDK จะสร้างและเริ่มต้นคีย์ไคลเอ็นต์และข้อมูลลับที่จำเป็นโดยอัตโนมัติ
ใช้ reCAPTCHA ที่มองไม่เห็น
อ็อบเจ็กต์ RecaptchaVerifier
รองรับ reCAPTCHA ที่มองไม่เห็น ซึ่งมักจะสามารถตรวจสอบผู้ใช้ได้โดยไม่ต้องมีการโต้ตอบใดๆ หากต้องการใช้ reCAPTCHA ที่มองไม่เห็น ให้สร้าง RecaptchaVerifier
โดยตั้งค่าพารามิเตอร์ size
เป็น invisible
และระบุ ID ขององค์ประกอบ UI ที่เริ่มการลงทะเบียนแบบหลายปัจจัย:
เว็บโมดูลาร์ API
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);
API เนมสเปซของเว็บ
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 ได้รับการแก้ไขหรือหมดอายุ:
เว็บโมดูลาร์ API
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
);
API เนมสเปซของเว็บ
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 ล่วงหน้าก่อนที่จะเริ่มการลงทะเบียนแบบสองปัจจัย:
เว็บโมดูลาร์ API
recaptchaVerifier.render()
.then(function (widgetId) {
window.recaptchaWidgetId = widgetId;
});
API เนมสเปซของเว็บ
recaptchaVerifier.render()
.then(function(widgetId) {
window.recaptchaWidgetId = widgetId;
});
หลังจากแก้ไข render()
คุณจะได้รับ ID วิดเจ็ตของ reCAPTCHA ซึ่งคุณสามารถใช้เพื่อเรียก reCAPTCHA API :
var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);
RecaptchaVerifier แยกตรรกะนี้ออกไปด้วยวิธี การตรวจสอบ ดังนั้นคุณไม่จำเป็นต้องจัดการกับตัวแปร grecaptcha
โดยตรง
การลงทะเบียนปัจจัยที่สอง
ในการลงทะเบียนปัจจัยรองใหม่สำหรับผู้ใช้:
ตรวจสอบผู้ใช้อีกครั้ง
ขอให้ผู้ใช้ป้อนหมายเลขโทรศัพท์
เริ่มต้นตัวตรวจสอบ reCAPTCHA ตามที่แสดงในส่วนก่อนหน้า ข้ามขั้นตอนนี้หากกำหนดค่าอินสแตนซ์ RecaptchaVerifier แล้ว:
เว็บโมดูลาร์ API
import { RecaptchaVerifier } from "firebase/auth"; const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
API เนมสเปซของเว็บ
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
รับเซสชันหลายปัจจัยสำหรับผู้ใช้:
เว็บโมดูลาร์ API
import { multiFactor } from "firebase/auth"; multiFactor(user).getSession().then(function (multiFactorSession) { // ... });
API เนมสเปซของเว็บ
user.multiFactor.getSession().then(function(multiFactorSession) { // ... })
เริ่มต้นวัตถุ
PhoneInfoOptions
ด้วยหมายเลขโทรศัพท์ของผู้ใช้และเซสชันหลายปัจจัย:เว็บโมดูลาร์ API
// Specify the phone number and pass the MFA session. const phoneInfoOptions = { phoneNumber: phoneNumber, session: multiFactorSession };
API เนมสเปซของเว็บ
// Specify the phone number and pass the MFA session. var phoneInfoOptions = { phoneNumber: phoneNumber, session: multiFactorSession };
ส่งข้อความยืนยันไปยังโทรศัพท์ของผู้ใช้:
เว็บโมดูลาร์ API
import { PhoneAuthProvider } from "firebase/auth"; const phoneAuthProvider = new PhoneAuthProvider(auth); phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier) .then(function (verificationId) { // verificationId will be needed to complete enrollment. });
API เนมสเปซของเว็บ
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 และเป็นไปตามอัตรามาตรฐาน
หากคำขอล้มเหลว ให้รีเซ็ต reCAPTCHA จากนั้นทำซ้ำขั้นตอนก่อนหน้าเพื่อให้ผู้ใช้สามารถลองอีกครั้ง โปรดทราบว่า
verifyPhoneNumber()
จะรีเซ็ต reCAPTCHA โดยอัตโนมัติเมื่อแสดงข้อผิดพลาด เนื่องจากโทเค็น reCAPTCHA ใช้งานได้เพียงครั้งเดียวเท่านั้นเว็บโมดูลาร์ API
recaptchaVerifier.clear();
API เนมสเปซของเว็บ
recaptchaVerifier.clear();
เมื่อส่งรหัส SMS แล้ว ขอให้ผู้ใช้ยืนยันรหัส:
เว็บโมดูลาร์ API
// Ask user for the verification code. Then: const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
API เนมสเปซของเว็บ
// Ask user for the verification code. Then: var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
เริ่มต้นวัตถุ
MultiFactorAssertion
ด้วยPhoneAuthCredential
:เว็บโมดูลาร์ API
import { PhoneMultiFactorGenerator } from "firebase/auth"; const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
API เนมสเปซของเว็บ
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
กรอกใบสมัคร คุณสามารถระบุชื่อที่ใช้แสดงสำหรับปัจจัยที่สอง สิ่งนี้มีประโยชน์สำหรับผู้ใช้ที่มีปัจจัยวินาทีหลายตัว เนื่องจากหมายเลขโทรศัพท์ถูกปกปิดระหว่างขั้นตอนการตรวจสอบสิทธิ์ (เช่น +1******1234)
เว็บโมดูลาร์ API
// Complete enrollment. This will update the underlying tokens // and trigger ID token change listener. multiFactor(user).enroll(multiFactorAssertion, "My personal phone number");
API เนมสเปซของเว็บ
// Complete enrollment. This will update the underlying tokens // and trigger ID token change listener. user.multiFactor.enroll(multiFactorAssertion, 'My personal phone number');
รหัสด้านล่างแสดงตัวอย่างที่สมบูรณ์ของการลงทะเบียนปัจจัยที่สอง:
เว็บโมดูลาร์ API
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);
});
API เนมสเปซของเว็บ
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 แบบสองปัจจัย:
ลงชื่อเข้าใช้ผู้ใช้ด้วยปัจจัยแรก จากนั้นตรวจหาข้อผิดพลาด
auth/multi-factor-auth-required
ข้อผิดพลาดนี้ประกอบด้วยตัวแก้ไข คำใบ้เกี่ยวกับปัจจัยที่สองที่ลงทะเบียน และเซสชันพื้นฐานที่พิสูจน์ว่าผู้ใช้ได้รับการรับรองความถูกต้องด้วยปัจจัยแรกสำเร็จตัวอย่างเช่น หากปัจจัยแรกของผู้ใช้คืออีเมลและรหัสผ่าน:
เว็บโมดูลาร์ API
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. } });
API เนมสเปซของเว็บ
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()
หากผู้ใช้มีปัจจัยรองหลายตัวที่ลงทะเบียนไว้ ให้ถามพวกเขาว่าจะใช้ตัวใด:
เว็บโมดูลาร์ API
// 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. }
API เนมสเปซของเว็บ
// 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. }
เริ่มต้นตัวตรวจสอบ reCAPTCHA ตามที่แสดงในส่วนก่อนหน้า ข้ามขั้นตอนนี้หากกำหนดค่าอินสแตนซ์ RecaptchaVerifier แล้ว:
เว็บโมดูลาร์ API
import { RecaptchaVerifier } from "firebase/auth"; recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
API เนมสเปซของเว็บ
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
เริ่มต้นวัตถุ
PhoneInfoOptions
ด้วยหมายเลขโทรศัพท์ของผู้ใช้และเซสชันหลายปัจจัย ค่าเหล่านี้มีอยู่ในวัตถุresolver
ที่ส่งผ่านไปยังข้อผิดพลาดauth/multi-factor-auth-required
:เว็บโมดูลาร์ API
const phoneInfoOptions = { multiFactorHint: resolver.hints[selectedIndex], session: resolver.session };
API เนมสเปซของเว็บ
var phoneInfoOptions = { multiFactorHint: resolver.hints[selectedIndex], session: resolver.session };
ส่งข้อความยืนยันไปยังโทรศัพท์ของผู้ใช้:
เว็บโมดูลาร์ API
// Send SMS verification code. const phoneAuthProvider = new PhoneAuthProvider(auth); phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier) .then(function (verificationId) { // verificationId will be needed for sign-in completion. });
API เนมสเปซของเว็บ
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. })
หากคำขอล้มเหลว ให้รีเซ็ต reCAPTCHA จากนั้นทำซ้ำขั้นตอนก่อนหน้าเพื่อให้ผู้ใช้สามารถลองอีกครั้ง:
เว็บโมดูลาร์ API
recaptchaVerifier.clear();
API เนมสเปซของเว็บ
recaptchaVerifier.clear();
เมื่อส่งรหัส SMS แล้ว ขอให้ผู้ใช้ยืนยันรหัส:
เว็บโมดูลาร์ API
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
API เนมสเปซของเว็บ
// Ask user for the verification code. Then: var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
เริ่มต้นวัตถุ
MultiFactorAssertion
ด้วยPhoneAuthCredential
:เว็บโมดูลาร์ API
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
API เนมสเปซของเว็บ
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
เรียก
resolver.resolveSignIn()
เพื่อทำการรับรองความถูกต้องรอง จากนั้นคุณสามารถเข้าถึงผลลัพธ์การลงชื่อเข้าใช้ดั้งเดิม ซึ่งรวมถึงข้อมูลเฉพาะของผู้ให้บริการมาตรฐานและข้อมูลรับรองการตรวจสอบสิทธิ์:เว็บโมดูลาร์ API
// 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. });
API เนมสเปซของเว็บ
// 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. });
รหัสด้านล่างแสดงตัวอย่างที่สมบูรณ์ของการลงชื่อเข้าใช้ผู้ใช้แบบหลายปัจจัย:
เว็บโมดูลาร์ API
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.
}
});
API เนมสเปซของเว็บ
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.
} ...
});
ยินดีด้วย! คุณลงชื่อเข้าใช้ผู้ใช้โดยใช้การรับรองความถูกต้องด้วยหลายปัจจัยสำเร็จแล้ว
อะไรต่อไป
- จัดการผู้ใช้หลายปัจจัย ทางโปรแกรมด้วย Admin SDK