Google is committed to advancing racial equity for Black communities. See how.
דף זה תורגם על ידי Cloud Translation API.
Switch to English

אמת עם Firebase עם מספר טלפון באמצעות JavaScript

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

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

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

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

חששות ביטחוניים

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

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

אפשר כניסה למספר טלפון עבור פרויקט Firebase שלך

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

  1. במסוף Firebase , פתח את קטע האימות .
  2. בדף שיטת הכניסה , הפעל את שיטת הכניסה למספר טלפון .
  3. באותו דף, אם הדומיין שמארח את האפליקציה שלך אינו מופיע בקטע דומיינים להפניה מחדש של OAuth , הוסף את הדומיין שלך.

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

הגדר את מאמת reCAPTCHA

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

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

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

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

אינטרנט v8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

אינטרנט v9

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

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

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

אינטרנט v8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

אינטרנט v9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
}, auth);

השתמש ביישומון reCAPTCHA

כדי להשתמש ביישומון reCAPTCHA הגלוי, צור אלמנט בעמוד שלך כדי להכיל את הווידג'ט, ואז צור אובייקט RecaptchaVerifier , וציין את מזהה המכולה RecaptchaVerifier זאת. לדוגמה:

אינטרנט v8

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

אינטרנט v9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);

אופציונלי: ציין פרמטרים של reCAPTCHA

באפשרותך להגדיר פונקציות להתקשרות חוזרות באובייקט RecaptchaVerifier הנקראות כאשר המשתמש פותר את reCAPTCHA או שפג תוקף reCAPTCHA לפני שהמשתמש מגיש את הטופס:

אינטרנט v8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

אינטרנט v9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

אופציונלי: עיבוד מראש של reCAPTCHA

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

אינטרנט v8

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

אינטרנט v9

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

לאחר פתרונות render , אתה מקבל את מזהה היישומון של reCAPTCHA, שבו אתה יכול להשתמש כדי לבצע שיחות ל- API של reCAPTCHA :

אינטרנט v8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

אינטרנט v9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

שלח קוד אימות לטלפון המשתמש

כדי להיכנס לכניסה למספר טלפון, signInWithPhoneNumber למשתמש ממשק שמבקש ממנו למסור את מספר הטלפון שלו, ואז signInWithPhoneNumber ל- signInWithPhoneNumber כדי לבקש מ- Firebase לשלוח קוד אימות לטלפון המשתמש באמצעות SMS:

  1. קבל את מספר הטלפון של המשתמש.

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

  2. התקשר ל- signInWithPhoneNumber והעביר אליו את מספר הטלפון של המשתמש ואת ה- RecaptchaVerifier שיצרת קודם.

    אינטרנט v8

    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });

    אינטרנט v9

    import { getAuth, signInWithPhoneNumber } from "firebase/auth";
    
    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    
    const auth = getAuth();
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });
    אם signInWithPhoneNumber גורם לשגיאה, אפס את ה- reCAPTCHA כדי שהמשתמש יוכל לנסות שוב:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    }
    

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

היכנס למשתמש באמצעות קוד האימות

לאחר שהשיחה ל- signInWithPhoneNumber מצליחה, בקש מהמשתמש להקליד את קוד האימות שקיבלו ב- SMS. ואז, שלט המשתמש על ידי העברת את הקוד confirm השיטה של ConfirmationResult האובייקט שהועבר signInWithPhoneNumber המטפל הגשמה של (כלומר, שלה then בלוק). לדוגמה:

אינטרנט v8

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

אינטרנט v9

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

אם השיחה confirm הצליחה, המשתמש נכנס בהצלחה.

קבל את האובייקט AuthCredential הביניים

אם אתה צריך להשיג אובייקט AuthCredential עבור חשבון המשתמש, העביר את קוד האימות מתוצאת האישור וקוד האימות ל- PhoneAuthProvider.credential במקום להתקשר confirm :

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

לאחר מכן תוכל להיכנס למשתמש באמצעות האישור:

firebase.auth().signInWithCredential(credential);

בדקו עם מספרי טלפון בדיוניים

ניתן להגדיר מספרי טלפון בדיוניים לפיתוח באמצעות קונסולת Firebase. בדיקה עם מספרי טלפון בדיוניים מספקת את היתרונות הבאים:

  • בדוק אימות מספר טלפון מבלי לצרוך את מכסת השימוש שלך.
  • בדוק אימות מספר טלפון מבלי לשלוח הודעת SMS בפועל.
  • ערכו בדיקות רצופות עם אותו מספר טלפון מבלי להיסגר. זה ממזער את הסיכון לדחייה בתהליך הבדיקה של App Store אם במקרה הסוקר משתמש באותו מספר טלפון לבדיקה.
  • בדוק בקלות בסביבות פיתוח ללא כל מאמץ נוסף, כגון היכולת להתפתח בסימולטור iOS או באמולטור אנדרואיד ללא שירותי Google Play.
  • כתוב בדיקות שילוב מבלי להיחסם על ידי בדיקות אבטחה המופעלות בדרך כלל על מספרי טלפון אמיתיים בסביבת ייצור.

מספרי טלפון בדיוניים חייבים לעמוד בדרישות הבאות:

  1. הקפד להשתמש במספרי טלפון שהם אכן בדיוניים, ואינם קיימים כבר. אימות Firebase אינו מאפשר לך להגדיר מספרי טלפון קיימים המשמשים משתמשים אמיתיים כמספרי בדיקה. אפשרות אחת היא להשתמש ב 555 קידומות כמספרי טלפון לבדיקה בארה"ב, למשל: +1 650-555-3434
  2. מספרי טלפון חייבים להיות מעוצבים כראוי לאורכים ולמגבלות אחרות. הם עדיין יעברו את אותו אימות כמו מספר הטלפון של המשתמש האמיתי.
  3. אתה יכול להוסיף עד 10 מספרי טלפון לפיתוח.
  4. השתמש במספרי טלפון / קודי בדיקה שקשה לנחש ושנה אותם לעתים קרובות.

צור מספרי טלפון בדיוני וקודי אימות

  1. במסוף Firebase , פתח את קטע האימות .
  2. בכרטיסיה שיטת כניסה , הפעל את ספק הטלפון אם עדיין לא עשית זאת.
  3. פתח את מספרי הטלפון לבדיקת תפריט האקורדיון.
  4. ספק את מספר הטלפון שתרצה לבדוק, לדוגמא: +1 650-555-3434 .
  5. ספק את קוד האימות בן 6 הספרות עבור המספר הספציפי הזה, לדוגמה: 654321 .
  6. הוסף את המספר. אם יש צורך, אתה יכול למחוק את מספר הטלפון ואת הקוד שלו על ידי ריחוף מעל השורה המתאימה ולחץ על סמל האשפה.

בדיקה ידנית

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

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

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

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

בדיקת אינטגרציה

בנוסף לבדיקות ידניות, אימות Firebase מספק ממשקי API המסייעים בכתיבת בדיקות שילוב לבדיקת אימות טלפוני. ממשקי API אלה משביתים את אימות האפליקציה על ידי השבתת דרישת reCAPTCHA בהתראות אינטרנט ודחיפה שקטה ב- iOS. זה מאפשר בדיקות אוטומציה בזרימות אלה וקל יותר ליישום. בנוסף, הם עוזרים לספק את היכולת לבדוק זרימות אימות מיידיות באנדרואיד.

באינטרנט, הגדר את appVerificationDisabledForTesting true לפני שהופך את firebase.auth.RecaptchaVerifier . זה פותר את reCAPTCHA באופן אוטומטי, ומאפשר לך להעביר את מספר הטלפון מבלי לפתור אותו ידנית. שים לב שלמרות ש- reCAPTCHA מושבת, השימוש במספר טלפון לא בדיוני עדיין לא יצליח להשלים את הכניסה. ניתן להשתמש רק במספרי טלפון בדיוניים באמצעות ממשק API זה.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

מאמתים של אפליקציות reCAPTCHA גלויות ובלתי נראות נוהגות באופן שונה כאשר אימות האפליקציה מושבת.

  • ReCAPTCHA גלוי : כאשר reCAPTCHA הגלוי מוצג באמצעות appVerifier.render() , הוא פותר את עצמו באופן אוטומטי לאחר שבריר של עיכוב שני. זה שווה ערך למשתמש שלחץ על reCAPTCHA מיד עם העיבוד. תגובת reCAPTCHA תפוג לאחר זמן מה ואז תיפתר אוטומטית שוב.
  • ReCAPTCHA בלתי נראה : reCAPTCHA הבלתי נראה אינו נפתר אוטומטית בעיבוד ובמקום זאת appVerifier.verify() או כאשר לוחצים על עוגן הכפתור של reCAPTCHA לאחר שבריר של עיכוב שני. באופן דומה, התגובה תפוג לאחר זמן מה appVerifier.verify() אוטומטית רק לאחר appVerifier.verify() או כאשר לוחצים שוב על עוגן הכפתור של reCAPTCHA.

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

הצעדים הבאים

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

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

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

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

כדי לצאת ממשתמש, התקשר ל- signOut :

אינטרנט v8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

אינטרנט v9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});