אימות באמצעות Firebase באמצעות קישור לאימייל ב-JavaScript

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

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

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

לפני שמתחילים

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

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

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

1. במסוף Firebase, פותחים את הקטע Auth.
2. בכרטיסייה Sign in method (שיטת כניסה), מפעילים את הספק Email/Password (אימייל/סיסמה). חשוב לזכור: כדי להשתמש בכניסה באמצעות קישור לאימייל, צריך להפעיל את הכניסה באמצעות כתובת אימייל/סיסמה.
3. באותו קטע, מפעילים את שיטת הכניסה קישור לאימייל (כניסה ללא סיסמה).
4. לוחצים על שמירה.

שליחת קישור אימות לכתובת האימייל של המשתמש

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

1. יוצרים את האובייקט ActionCodeSettings, שמספק ל-Firebase הוראות ליצירת הקישור לאימייל. מגדירים את השדות הבאים:

   • url: קישור העומק להטמעה וכל מצב נוסף שרוצים להעביר. צריך להוסיף את הדומיין של הקישור לרשימת הדומיינים המורשים במסוף Firebase. אפשר למצוא את הרשימה הזו בכרטיסייה 'שיטת כניסה' (Authentication -> Settings).
   • android ו-ios: עוזרים ל-Firebase Authentication לקבוע אם ליצור קישור לאינטרנט בלבד או קישור לנייד שייפתח במכשיר Android או Apple.
   • handleCodeInApp: מוגדר כ-true. תמיד צריך להשלים את פעולת הכניסה באפליקציה, בניגוד לפעולות אחרות באימייל מחוץ לצ'אט (איפוס סיסמה ואימותים באימייל). הסיבה לכך היא שבסוף התהליך, המשתמש אמור להיכנס לחשבון ומצב האימות שלו נשמר באפליקציה.
   • linkDomain: כשמגדירים דומיינים מותאמים אישית של קישורים מסוג Hosting לפרויקט, צריך לציין באיזה מהם להשתמש כשהקישור ייפתח על ידי אפליקציה ניידת ספציפית. אחרת, הדומיין שמוגדר כברירת מחדל ייבחר באופן אוטומטי (לדוגמה, PROJECT_ID.firebaseapp.com).

   • dynamicLinkDomain: הוצא משימוש. אין לציין את הפרמטר הזה.

     Web

     מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API במרחב שמות

     const actionCodeSettings = {
       // URL you want to redirect back to. The domain (www.example.com) for this
       // URL must be in the authorized domains list in the Firebase Console.
       url: 'https://www.example.com/finishSignUp?cartId=1234',
       // This must be true.
       handleCodeInApp: true,
       iOS: {
         bundleId: 'com.example.ios'
       },
       android: {
         packageName: 'com.example.android',
         installApp: true,
         minimumVersion: '12'
       },
       dynamicLinkDomain: 'example.page.link'
     };
     auth_email_link_actioncode_settings.js

     Web

     var actionCodeSettings = {
       // URL you want to redirect back to. The domain (www.example.com) for this
       // URL must be in the authorized domains list in the Firebase Console.
       url: 'https://www.example.com/finishSignUp?cartId=1234',
       // This must be true.
       handleCodeInApp: true,
       iOS: {
         bundleId: 'com.example.ios'
       },
       android: {
         packageName: 'com.example.android',
         installApp: true,
         minimumVersion: '12'
       },
       dynamicLinkDomain: 'example.page.link'
     };
     email-link-auth.js

   מידע נוסף על ActionCodeSettings זמין בקטע העברת מצב בפעולות אימייל.

2. מבקשים מהמשתמש את כתובת האימייל שלו.

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

   Web

   מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API במרחב שמות

   import { getAuth, sendSignInLinkToEmail } from "firebase/auth";
   
   const auth = getAuth();
   sendSignInLinkToEmail(auth, email, actionCodeSettings)
     .then(() => {
       // The link was successfully sent. Inform the user.
       // Save the email locally so you don't need to ask the user for it again
       // if they open the link on the same device.
       window.localStorage.setItem('emailForSignIn', email);
       // ...
     })
     .catch((error) => {
       const errorCode = error.code;
       const errorMessage = error.message;
       // ...
     });
   auth_email_link_send.js

   Web

   firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
     .then(() => {
       // The link was successfully sent. Inform the user.
       // Save the email locally so you don't need to ask the user for it again
       // if they open the link on the same device.
       window.localStorage.setItem('emailForSignIn', email);
       // ...
     })
     .catch((error) => {
       var errorCode = error.code;
       var errorMessage = error.message;
       // ...
     });
   email-link-auth.js

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

חששות אבטחה

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

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

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

בנוסף, חשוב להשתמש בכתובת URL מסוג HTTPS בסביבת הייצור כדי למנוע משרתי ביניים ליירט את הקישור.

השלמת הכניסה בדף אינטרנט

הפורמט של הקישור לעומק של כתובת האימייל זהה לפורמט שמשמש לפעולות אימייל מחוץ לתקשורת (אימות אימייל, איפוס סיסמה וביטול שינוי של כתובת אימייל). כדי לפשט את הבדיקה הזו, Firebase Auth מספק את ה-API ‏isSignInWithEmailLink כדי לבדוק אם קישור הוא קישור לכניסה באמצעות כתובת אימייל.

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

Web

מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API במרחב שמות

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user by importing getAdditionalUserInfo
      // and calling it with result:
      // getAdditionalUserInfo(result)
      // You can access the user's profile via:
      // getAdditionalUserInfo(result)?.profile
      // You can check if the user is new or existing:
      // getAdditionalUserInfo(result)?.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email_link_complete.js

Web

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email-link-auth.js

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

אזהרה: שלוש התכונות הבאות של Firebase Authentication מושפעות מההשבתה של Firebase Dynamic Links ב-25 באוגוסט 2025: אימות קישור באימייל לאפליקציות לנייד, תהליכי OAuth לאפליקציות ל-Android שמשתמשות בגרסאות ישנות יותר של ה-SDK של Authentication ותמיכה ב-Cordova OAuth לאפליקציות אינטרנט. כדי להשתמש בתכונות האלה אחרי סגירת Dynamic Links, צריך לעבור לשימוש בגרסה חדשה יותר של ה-SDK ולבצע כמה שלבים נוספים.

למידע ספציפי ולהנחיות להעברה, אפשר לעיין בDynamic Linksשאלות נפוצות בנושא הוצאה משימוש.

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

מידע נוסף על התחברות באמצעות קישור לאימייל באפליקציה ל-Android זמין במדריך ל-Android.

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

קישור או אימות מחדש באמצעות קישור באימייל

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

ההבדל יהיה במחצית השנייה של הפעולה:

Web

מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API במרחב שמות

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_link.js

Web

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

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

Web

מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API במרחב שמות

import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_reauth.js

Web

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

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

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

אם יצרתם את הפרויקט ב-15 בספטמבר 2023 או לאחר מכן, ההגנה מפני ספירת כתובות אימייל מופעלת כברירת מחדל. התכונה הזו משפרת את האבטחה של חשבונות המשתמשים בפרויקט, אבל היא משביתה את השיטה fetchSignInMethodsForEmail(), שבעבר המלצנו להשתמש בה כדי להטמיע תהליכים שמתחילים במזהה.

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

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

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

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

התבנית הזו רלוונטית לשפות הבאות:

קוד	שפה
ar	ערבית
zh-CN	סינית (פשוטה)
zh-TW	סינית (מסורתית)
nl	הולנדית
en	אנגלית
en-GB	אנגלית (בריטניה)
fr	צרפתי
de	גרמנית
id [מזהה]	אינדונזית
it	איטלקי
ja	יפנית
ko	קוריאנית
pl	פולנית
pt-BR	פורטוגזית (ברזיל)
pt-PT	פורטוגזית (פורטוגל)
ru	רוסית
es	ספרדי
es-419	ספרדית (אמריקה הלטינית)
th	תאית

השלבים הבאים

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

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

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

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

כדי להוציא משתמש, קוראים לפונקציה signOut:

Web

מידע נוסף על Web API מודולרי שניתן לניפוי עצים ושדרוג מ-API במרחב שמות

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

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

Web

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