Catch up on highlights from Firebase at Google I/O 2023. Learn more

הוסף אימות רב-גורמי לאפליקציית האינטרנט שלך

אם שדרגת ל-Firebase Authentication with Identity Platform, תוכל להוסיף אימות רב-גורמי SMS לאפליקציית האינטרנט שלך.

אימות רב-גורמי מגביר את האבטחה של האפליקציה שלך. בעוד שתוקפים מתפשרים לעתים קרובות על סיסמאות וחשבונות חברתיים, יירוט הודעת טקסט קשה יותר.

לפני שאתה מתחיל

  1. אפשר לפחות ספק אחד שתומך באימות רב-גורמי. כל ספק תומך ב-MFA, למעט אישור טלפוני, אישור אנונימי ומרכז המשחקים של Apple.

  2. ודא שהאפליקציה שלך מאמתת אימיילים של משתמשים. MFA דורש אימות דוא"ל. זה מונע משחקנים זדוניים להירשם לשירות עם אימייל שאינם בבעלותם, ולאחר מכן לנעול את הבעלים האמיתי על ידי הוספת גורם שני.

שימוש בריבוי דירות

אם אתה מפעיל אימות רב-גורמי לשימוש בסביבת ריבוי דיירים , הקפד לבצע את השלבים הבאים (בנוסף לשאר ההוראות במסמך זה):

  1. ב-GCP Console, בחר את הדייר שאיתו תרצה לעבוד.

  2. בקוד שלך, הגדר את השדה tenantId במופע Auth למזהה הדייר שלך. לדוגמה:

    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 .

    עליך להזין גם את מספרי הטלפון שאיתם תבדוק את האפליקציה שלך. אמנם אופציונלי, אך מומלץ מאוד לרשום מספרי טלפון לבדיקה כדי למנוע מצערת במהלך הפיתוח.

  3. אם עדיין לא אישרת את הדומיין של האפליקציה שלך, הוסף אותו לרשימת ההיתרים בדף אימות > הגדרות של מסוף Firebase.

בחירת דפוס הרשמה

אתה יכול לבחור אם האפליקציה שלך דורשת אימות רב-גורמי, וכיצד ומתי לרשום את המשתמשים שלך. כמה דפוסים נפוצים כוללים:

  • רשום את הגורם השני של המשתמש כחלק מההרשמה. השתמש בשיטה זו אם האפליקציה שלך דורשת אימות רב-גורמי עבור כל המשתמשים.

  • הצע אפשרות ניתנת לדילוג כדי לרשום גורם שני במהלך ההרשמה. אפליקציות שרוצות לעודד, אך לא דורשות, אימות רב-גורמי עשויות להעדיף גישה זו.

  • ספק את היכולת להוסיף גורם שני מדף ניהול החשבון או הפרופיל של המשתמש, במקום מסך ההרשמה. זה ממזער את החיכוך במהלך תהליך הרישום, תוך מתן אימות רב-גורמי לזמין עבור משתמשים רגישים לאבטחה.

  • דרוש הוספת גורם שני בהדרגה כאשר המשתמש רוצה לגשת לתכונות עם דרישות אבטחה מוגברות.

הגדרת מאמת reCAPTCHA

לפני שתוכל לשלוח קודי SMS, עליך להגדיר מאמת reCAPTCHA. Firebase משתמש ב-reCAPTCHA כדי למנוע שימוש לרעה על ידי הבטחה שבקשות לאימות מספר טלפון מגיעות מאחד מהדומיינים המותרים של האפליקציה שלך.

אינך צריך להגדיר ידנית לקוח reCAPTCHA; האובייקט RecaptchaVerifier של ה-SDK של הלקוח יוצר RecaptchaVerifier באופן אוטומטי את כל המפתחות והסודות הדרושים של הלקוח.

שימוש ב-reCAPTCHA בלתי נראה

האובייקט RecaptchaVerifier תומך ב- reCAPTCHA בלתי נראה , אשר יכול לעתים קרובות לאמת את המשתמש מבלי לדרוש אינטראקציה כלשהי. כדי להשתמש ב-reCAPTCHA בלתי נראה, צור RecaptchaVerifier עם פרמטר size מוגדר ל- invisible , וציין את המזהה של רכיב ממשק המשתמש שמתחיל רישום רב-גורמי:

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 עם המזהה של מיכל ה-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);

RecaptchaVerifier מפשט את ההיגיון הזה עם שיטת ה- verify , כך שאינך צריך לטפל ישירות במשתנה grecaptcha .

רישום גורם שני

כדי לרשום גורם משני חדש עבור משתמש:

  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

    recaptchaVerifier.clear();

    Web version 8

    recaptchaVerifier.clear();

  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

    recaptchaVerifier.clear();

    Web version 8

    recaptchaVerifier.clear();

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

מזל טוב! נכנסת בהצלחה למשתמש באמצעות אימות רב-גורמי.

מה הלאה