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

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

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

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

דאגות ביטחוניות

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

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

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

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

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

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

הגדר את מאמת reCAPTCHA

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

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

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

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

import { getAuth } from "firebase/auth";

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

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

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

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

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

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

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

השתמש בווידג'ט reCAPTCHA

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

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

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

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

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

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

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

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

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

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

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

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

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
phone-auth.js

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

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
auth_get_recaptcha_response.js

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
phone-auth.js

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

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

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

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

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

   Web modular API

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

   Web namespaced API

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

   אם 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 ). לדוגמה:

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

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

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

בדיקה ידנית

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

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

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

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

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

בנוסף לבדיקות ידניות, Firebase Authentication מספק ממשקי 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 גלויים ובלתי נראים מתנהגים בצורה שונה כאשר אימות האפליקציה מושבת:

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

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

הצעדים הבאים

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

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

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

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

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

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

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

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