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

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

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

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

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

חששות אבטחה

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

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

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

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

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

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

הגדר את מאמת reCAPTCHA

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

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

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

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

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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

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

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

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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

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

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

גרסת אינטרנט 9

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

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

גרסת אינטרנט 8

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

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

ניתן להגדיר פונקציות התקשרות אופציונלי על RecaptchaVerifier האובייקט נקראים כאשר פותר למשתמש את reCAPTCHA או reCAPTCHA פג לפני נכנע המשתמשים במבנה:

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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

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

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

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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

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

גרסת אינטרנט 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

גרסת אינטרנט 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

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

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

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

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

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

    גרסת אינטרנט 9

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

    גרסת אינטרנט 8

    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
          // ...
        });
    אם 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 בלוק). לדוגמה:

גרסת אינטרנט 9

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

גרסת אינטרנט 8

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 ממשית.
  • בצע בדיקות רצופות עם אותו מספר טלפון מבלי להיחנק. זה ממזער את הסיכון לדחייה במהלך תהליך הבדיקה של חנות האפליקציות אם הסוקר משתמש במקרה באותו מספר טלפון לבדיקה.
  • בדוק בקלות בסביבות פיתוח ללא כל מאמץ נוסף, כגון היכולת להתפתח בסימולטור 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 ספרות עבור מספר מסוים, למשל: 654,321.
  6. מוסיפים את המספר. אם יש צורך, תוכל למחוק את מספר הטלפון והקוד שלו על ידי ריחוף מעל השורה המתאימה ולחיצה על סמל האשפה.

בדיקה ידנית

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

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

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

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

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

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

על אינטרנט, סט 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() השיחה או כאשר העוגן הכפתור של reCAPTCHA לוחץ שוב.

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

הצעדים הבאים

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

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

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

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

כדי לצאת מהחשבון משתמש, קוראים signOut :

גרסת אינטרנט 9

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

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

גרסת אינטרנט 8

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