Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Buat penangan tindakan email khusus

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Beberapa tindakan pengelolaan pengguna, seperti memperbarui alamat email pengguna dan menyetel ulang sandi pengguna, mengakibatkan email terkirim ke pengguna. Email ini berisi tautan yang dapat dibuka oleh penerima untuk menyelesaikan atau membatalkan tindakan pengelolaan pengguna. Secara default, email manajemen pengguna tertaut ke pengendali tindakan default, yang merupakan halaman web yang dihosting di URL di domain Firebase Hosting proyek Anda.

Anda dapat membuat dan menghosting penangan tindakan email khusus untuk melakukan pemrosesan khusus dan untuk mengintegrasikan penangan tindakan email dengan situs web Anda.

Tindakan pengelolaan pengguna berikut mengharuskan pengguna untuk menyelesaikan tindakan menggunakan penangan tindakan email:

  • Menyetel ulang kata sandi
  • Mencabut perubahan alamat email—saat pengguna mengubah alamat email utama akun mereka, Firebase mengirim email ke alamat lama mereka yang memungkinkan mereka untuk mengurungkan perubahan
  • Memverifikasi alamat email

Untuk menyesuaikan pengendali tindakan email proyek Firebase, Anda harus membuat dan menghosting halaman web yang menggunakan Firebase JavaScript SDK untuk memverifikasi validitas permintaan dan menyelesaikan permintaan. Kemudian, Anda harus menyesuaikan template email proyek Firebase untuk ditautkan ke pengendali tindakan kustom Anda.

Buat halaman penangan tindakan email

  1. Firebase menambahkan beberapa parameter kueri ke URL pengendali tindakan Anda saat membuat email pengelolaan pengguna. Misalnya:

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

    Parameter ini menentukan tugas manajemen pengguna yang diselesaikan pengguna. Halaman pengendali tindakan email Anda harus menangani parameter kueri berikut:

    Parameter
    mode

    Tindakan pengelolaan pengguna yang akan diselesaikan. Dapat berupa salah satu dari nilai berikut:

    • resetPassword
    • recoverEmail
    • verifyEmail
    kode oob Kode satu kali, digunakan untuk mengidentifikasi dan memverifikasi permintaan
    kunci API Kunci API proyek Firebase Anda, disediakan untuk kenyamanan
    lanjutkanUrl Ini adalah URL opsional yang menyediakan cara untuk meneruskan status kembali ke aplikasi melalui URL. Ini relevan dengan pengaturan ulang kata sandi dan mode verifikasi email. Saat mengirim email pengaturan ulang kata sandi atau email verifikasi, objek ActionCodeSettings perlu ditentukan dengan URL lanjutan agar ini tersedia. Ini memungkinkan pengguna untuk melanjutkan tepat di tempat mereka tinggalkan setelah tindakan email.
    lang

    Ini adalah tag bahasa BCP47 opsional yang mewakili lokal pengguna (misalnya, fr ). Anda dapat menggunakan nilai ini untuk menyediakan halaman penangan tindakan email yang dilokalkan kepada pengguna Anda.

    Pelokalan dapat disetel melalui Firebase Console atau secara dinamis dengan memanggil API klien yang sesuai sebelum memicu tindakan email. Misalnya, menggunakan JavaScript: firebase.auth().languageCode = 'fr'; .

    Untuk pengalaman pengguna yang konsisten, pastikan pelokalan penangan tindakan email cocok dengan template email.

    Contoh berikut menunjukkan bagaimana Anda dapat menangani parameter kueri di penangan berbasis browser. (Anda juga dapat mengimplementasikan handler sebagai aplikasi Node.js menggunakan logika serupa.)

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

    Web version 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. Tangani permintaan pengaturan ulang kata sandi dengan terlebih dahulu memverifikasi kode tindakan dengan verifyPasswordResetCode ; kemudian dapatkan kata sandi baru dari pengguna dan berikan ke confirmPasswordReset . Sebagai contoh:

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

    Web version 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. Tangani pembatalan perubahan alamat email dengan terlebih dahulu memverifikasi kode tindakan dengan checkActionCode ; lalu pulihkan alamat email pengguna dengan applyActionCode . Sebagai contoh:

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

    Web version 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. Tangani verifikasi alamat email dengan memanggil applyActionCode . Sebagai contoh:

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

    Web version 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. Host halaman di suatu tempat, misalnya gunakan Firebase Hosting .

Selanjutnya, Anda harus mengonfigurasi proyek Firebase untuk menautkan ke pengendali tindakan email khusus Anda di email pengelolaan penggunanya.

Untuk mengonfigurasi proyek Firebase agar menggunakan pengendali tindakan email khusus Anda:

  1. Buka proyek Anda di konsol Firebase .
  2. Buka halaman Template Email di bagian Auth .
  3. Di salah satu entri Jenis Email , klik ikon pensil untuk mengedit template email.
  4. Klik sesuaikan URL tindakan , dan tentukan URL ke pengendali tindakan email khusus Anda.

Setelah Anda menyimpan URL, itu akan digunakan oleh semua template email proyek Firebase Anda.