Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

צור מטפלים בהתאמה אישית של פעולות דוא"ל

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

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

הפעולות הבאות לניהול משתמשים דורשות מהמשתמש להשלים את הפעולה באמצעות מטפל בפעולות דוא"ל:

  • איפוס סיסמאות
  • ביטול שינויים בכתובות הדוא"ל - כאשר משתמשים משנים את כתובות הדוא"ל העיקריות של חשבונותיהם, Firebase שולח הודעת דוא"ל לכתובות הישנות שלהם המאפשר להם לבטל את השינוי
  • אימות כתובות דוא"ל

כדי להתאים אישית את מטפל הפעולות בדוא"ל של פרויקט Firebase שלך, עליך ליצור ולארח דף אינטרנט המשתמש ב- SDB JavaScript SDK של Firebase כדי לאמת את תוקפו של הבקשה ולהשלים את הבקשה. לאחר מכן, עליך להתאים אישית את תבניות הדוא"ל של פרוייקט Firebase שלך ​​כך שיוכל לקשר למטפל הפעולות המותאם אישית שלך.

צור את דף מטפל הפעולות בדוא"ל

  1. Firebase מוסיף מספר פרמטרים של שאילתות לכתובת ה- URL של מטפל הפעולות שלך כאשר הוא יוצר הודעות דוא"ל לניהול משתמשים. לדוגמה:

    https://example.com/usermgmt?mode=resetPassword&oobCode=ABC123&apiKey=AIzaSy...&lang=fr

    פרמטרים אלה מציינים את משימת ניהול המשתמשים שהמשתמש משלים. דף מטפל הפעולות בדוא"ל שלך חייב להתמודד עם פרמטרי השאילתה הבאים:

    פרמטרים
    מצב

    יש להשלים את פעולת ניהול המשתמשים. יכול להיות אחד מהערכים הבאים:

    • resetPassword
    • recoverEmail
    • verifyEmail
    oobCode קוד חד פעמי, המשמש לזיהוי ואימות בקשה
    apiKey מפתח ה- API של פרויקט Firebase שלך, מסופק לנוחות
    continueUrl זוהי כתובת אתר אופציונלית המספקת דרך להחזיר את המצב לאפליקציה באמצעות כתובת אתר. זה רלוונטי לאיפוס סיסמה ומצבי אימות דוא"ל. בעת שליחת דוא"ל איפוס סיסמה או אימות אימייל, ActionCodeSettings אובייקט צריך להיות מוגדר עם ממשיך URL עבור זה יהיה זמין. זה מאפשר למשתמש להמשיך בדיוק היכן שהפסיק לאחר פעולה בדוא"ל.
    lang

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

    ניתן להגדיר את הלוקליזציה באמצעות מסוף Firebase או באופן דינמי על ידי התקשרות ל- API של הלקוח המתאים לפני הפעלת פעולת הדוא"ל. לדוגמה, באמצעות JavaScript: firebase.auth().languageCode = 'fr'; .

    לקבלת חווית משתמש עקבית, ודא שהלוקליזציה של מטפל הפעולות בדוא"ל תואמת את תבנית הדוא"ל.

    הדוגמה הבאה מראה כיצד תוכל להתמודד עם פרמטרי השאילתה במטפל מבוסס דפדפן. (תוכל גם ליישם את המטפל כיישום Node.js באמצעות היגיון דומה.)

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

    import { initializeApp } from "firebase/app";
    import { getAuth } from "firebase/auth";
    
    document.addEventListener('DOMContentLoaded', () => {
      // TODO: Implement getParameterByName()
    
      // Get the action to complete.
      const mode = getParameterByName('mode');
      // Get the one-time code from the query parameter.
      const actionCode = getParameterByName('oobCode');
      // (Optional) Get the continue URL from the query parameter if available.
      const continueUrl = getParameterByName('continueUrl');
      // (Optional) Get the language code if available.
      const lang = getParameterByName('lang') || 'en';
    
      // Configure the Firebase SDK.
      // This is the minimum configuration required for the API to be used.
      const config = {
        'apiKey': "YOU_API_KEY" // Copy this key from the web initialization
                                // snippet found in the Firebase console.
      };
      const app = initializeApp(config);
      const auth = getAuth(app);
    
      // Handle the user management action.
      switch (mode) {
        case 'resetPassword':
          // Display reset password handler and UI.
          handleResetPassword(auth, actionCode, continueUrl, lang);
          break;
        case 'recoverEmail':
          // Display email recovery handler and UI.
          handleRecoverEmail(auth, actionCode, lang);
          break;
        case 'verifyEmail':
          // Display email verification handler and UI.
          handleVerifyEmail(auth, actionCode, continueUrl, lang);
          break;
        default:
          // Error: invalid mode.
      }
    }, false);

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

    document.addEventListener('DOMContentLoaded', () => {
      // TODO: Implement getParameterByName()
    
      // Get the action to complete.
      var mode = getParameterByName('mode');
      // Get the one-time code from the query parameter.
      var actionCode = getParameterByName('oobCode');
      // (Optional) Get the continue URL from the query parameter if available.
      var continueUrl = getParameterByName('continueUrl');
      // (Optional) Get the language code if available.
      var lang = getParameterByName('lang') || 'en';
    
      // Configure the Firebase SDK.
      // This is the minimum configuration required for the API to be used.
      var config = {
        'apiKey': "YOU_API_KEY" // Copy this key from the web initialization
                                // snippet found in the Firebase console.
      };
      var app = firebase.initializeApp(config);
      var auth = app.auth();
    
      // Handle the user management action.
      switch (mode) {
        case 'resetPassword':
          // Display reset password handler and UI.
          handleResetPassword(auth, actionCode, continueUrl, lang);
          break;
        case 'recoverEmail':
          // Display email recovery handler and UI.
          handleRecoverEmail(auth, actionCode, lang);
          break;
        case 'verifyEmail':
          // Display email verification handler and UI.
          handleVerifyEmail(auth, actionCode, continueUrl, lang);
          break;
        default:
          // Error: invalid mode.
      }
    }, false);
  2. סיסמא לטפל בבקשות איפוס בעזרת בדיקת קוד הפעולה הראשונה עם verifyPasswordResetCode ; ואז לקבל סיסמא חדשה מהמשתמש ולהעביר אותו confirmPasswordReset . לדוגמה:

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

    import { verifyPasswordResetCode, confirmPasswordReset } from "firebase/auth";
    
    function handleResetPassword(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
    
      // Verify the password reset code is valid.
      verifyPasswordResetCode(auth, actionCode).then((email) => {
        const accountEmail = email;
    
        // TODO: Show the reset screen with the user's email and ask the user for
        // the new password.
        const newPassword = "...";
    
        // Save the new password.
        confirmPasswordReset(auth, actionCode, newPassword).then((resp) => {
          // Password reset has been confirmed and new password updated.
    
          // TODO: Display a link back to the app, or sign-in the user directly
          // if the page belongs to the same domain as the app:
          // auth.signInWithEmailAndPassword(accountEmail, newPassword);
    
          // TODO: If a continue URL is available, display a button which on
          // click redirects the user back to the app via continueUrl with
          // additional state determined from that URL's parameters.
        }).catch((error) => {
          // Error occurred during confirmation. The code might have expired or the
          // password is too weak.
        });
      }).catch((error) => {
        // Invalid or expired action code. Ask user to try to reset the password
        // again.
      });
    }

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

    function handleResetPassword(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
    
      // Verify the password reset code is valid.
      auth.verifyPasswordResetCode(actionCode).then((email) => {
        var accountEmail = email;
    
        // TODO: Show the reset screen with the user's email and ask the user for
        // the new password.
        var newPassword = "...";
    
        // Save the new password.
        auth.confirmPasswordReset(actionCode, newPassword).then((resp) => {
          // Password reset has been confirmed and new password updated.
    
          // TODO: Display a link back to the app, or sign-in the user directly
          // if the page belongs to the same domain as the app:
          // auth.signInWithEmailAndPassword(accountEmail, newPassword);
    
          // TODO: If a continue URL is available, display a button which on
          // click redirects the user back to the app via continueUrl with
          // additional state determined from that URL's parameters.
        }).catch((error) => {
          // Error occurred during confirmation. The code might have expired or the
          // password is too weak.
        });
      }).catch((error) => {
        // Invalid or expired action code. Ask user to try to reset the password
        // again.
      });
    }
  3. שלילות שינוי ידית כתובת הדוא"ל על ידי אימות קוד הפעולה הראשונה עם checkActionCode ; ואז לשחזר את כתובת הדוא"ל של המשתמש עם applyActionCode . לדוגמה:

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

    import { checkActionCode, applyActionCode, sendPasswordResetEmail } from "firebase/auth";
    
    function handleRecoverEmail(auth, actionCode, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      let restoredEmail = null;
      // Confirm the action code is valid.
      checkActionCode(auth, actionCode).then((info) => {
        // Get the restored email address.
        restoredEmail = info['data']['email'];
    
        // Revert to the old email.
        return applyActionCode(auth, actionCode);
      }).then(() => {
        // Account email reverted to restoredEmail
    
        // TODO: Display a confirmation message to the user.
    
        // You might also want to give the user the option to reset their password
        // in case the account was compromised:
        sendPasswordResetEmail(auth, restoredEmail).then(() => {
          // Password reset confirmation sent. Ask user to check their email.
        }).catch((error) => {
          // Error encountered while sending password reset code.
        });
      }).catch((error) => {
        // Invalid code.
      });
    }

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

    function handleRecoverEmail(auth, actionCode, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      var restoredEmail = null;
      // Confirm the action code is valid.
      auth.checkActionCode(actionCode).then((info) => {
        // Get the restored email address.
        restoredEmail = info['data']['email'];
    
        // Revert to the old email.
        return auth.applyActionCode(actionCode);
      }).then(() => {
        // Account email reverted to restoredEmail
    
        // TODO: Display a confirmation message to the user.
    
        // You might also want to give the user the option to reset their password
        // in case the account was compromised:
        auth.sendPasswordResetEmail(restoredEmail).then(() => {
          // Password reset confirmation sent. Ask user to check their email.
        }).catch((error) => {
          // Error encountered while sending password reset code.
        });
      }).catch((error) => {
        // Invalid code.
      });
    }
  4. טפל אימות כתובת הדוא"ל על ידי התקשרות applyActionCode . לדוגמה:

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

    function handleVerifyEmail(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      // Try to apply the email verification code.
      applyActionCode(auth, actionCode).then((resp) => {
        // Email address has been verified.
    
        // TODO: Display a confirmation message to the user.
        // You could also provide the user with a link back to the app.
    
        // TODO: If a continue URL is available, display a button which on
        // click redirects the user back to the app via continueUrl with
        // additional state determined from that URL's parameters.
      }).catch((error) => {
        // Code is invalid or expired. Ask the user to verify their email address
        // again.
      });
    }

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

    function handleVerifyEmail(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      // Try to apply the email verification code.
      auth.applyActionCode(actionCode).then((resp) => {
        // Email address has been verified.
    
        // TODO: Display a confirmation message to the user.
        // You could also provide the user with a link back to the app.
    
        // TODO: If a continue URL is available, display a button which on
        // click redirects the user back to the app via continueUrl with
        // additional state determined from that URL's parameters.
      }).catch((error) => {
        // Code is invalid or expired. Ask the user to verify their email address
        // again.
      });
    }
  5. תארח את איפשהו בדף, לשימוש למשל Firebase אירוח .

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

כדי להגדיר את פרויקט Firebase שלך ​​לשימוש במטפל הפעולות האימייל המותאם אישית שלך:

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

לאחר שמירת כתובת האתר, היא תשמש את כל תבניות הדוא"ל של פרויקט Firebase שלך.