Membuat penangan tindakan email kustom

Beberapa tindakan pengelolaan pengguna, seperti mengupdate alamat email dan menyetel ulang sandi pengguna, akan menyebabkan pengiriman email ke pengguna tersebut. Penerima dapat membuka link yang ada di dalam email tersebut untuk menyelesaikan atau membatalkan tindakan pengelolaan pengguna. Secara default, email pengelolaan pengguna terhubung dengan pengendali tindakan default, yaitu halaman web yang dihosting di URL di domain Firebase Hosting project Anda.

Anda dapat membuat dan menghosting pengendali tindakan email kustom untuk melakukan pemrosesan kustom dan mengintegrasikan pengendali tindakan email tersebut ke situs Anda.

Tindakan pengelolaan pengguna berikut ini mengharuskan pengguna untuk menyelesaikan tindakan menggunakan pengendali tindakan email:

  • Menyetel ulang sandi
  • Membatalkan perubahan alamat email—ketika pengguna mengubah alamat email primer akunnya, Firebase akan mengirim email ke alamat yang lama agar pengguna tersebut dapat membatalkan perubahan
  • Memverifikasi alamat email

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

Membuat halaman pengendali tindakan email

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

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

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

    Parameter
    mode

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

    • resetPassword
    • recoverEmail
    • verifyEmail
    oobCode Kode sekali pakai yang digunakan untuk mengidentifikasi dan memverifikasi permintaan
    apiKey Kunci API project Firebase Anda yang diberikan untuk meningkatkan kemudahan
    continueUrl Ini adalah URL opsional yang menyediakan cara untuk mengembalikan status ke aplikasi melalui URL. URL ini relevan dengan mode setel ulang sandi dan verifikasi email. Saat mengirim email penyetelan ulang sandi atau email verifikasi, objek ActionCodeSettings harus ditentukan dengan URL lanjutan agar dapat tersedia. Hal ini memungkinkan pengguna untuk melanjutkan dari tempat mereka keluar setelah tindakan email.
    lang

    Ini adalah tag bahasa BCP47 opsional yang mewakili bahasa lokal pengguna (misalnya fr). Anda dapat menggunakan nilai ini untuk memberikan halaman pengendali tindakan email yang dilokalkan ke 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 mendapatkan pengalaman pengguna yang konsisten, pastikan pelokalan pengendali tindakan email cocok dengan template email.

    Contoh berikut menunjukkan cara menangani parameter kueri di pengendali berbasis browser. (Anda juga dapat menerapkan pengendali sebagai aplikasi Node.js menggunakan logika serupa.)

    <script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 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': <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);
    </script>
    
  2. Tangani permintaan setel ulang sandi dengan memverifikasi kode tindakan terlebih dahulu menggunakan verifyPasswordResetCode; lalu dapatkan sandi baru dari pengguna dan teruskan ke confirmPasswordReset. Misalnya:

    function handleResetPassword(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      var accountEmail;
      // Verify the password reset code is valid.
      auth.verifyPasswordResetCode(actionCode).then(function(email) {
        var accountEmail = email;
    
        // TODO: Show the reset screen with the user's email and ask the user for
        // the new password.
    
        // Save the new password.
        auth.confirmPasswordReset(actionCode, newPassword).then(function(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(function(error) {
          // Error occurred during confirmation. The code might have expired or the
          // password is too weak.
        });
      }).catch(function(error) {
        // Invalid or expired action code. Ask user to try to reset the password
        // again.
      });
    }
    
  3. Tangani pembatalan perubahan alamat email dengan memverifikasi kode tindakan terlebih dahulu menggunakan checkActionCode; lalu pulihkan alamat email pengguna menggunakan applyActionCode. Misalnya:

    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(function(info) {
        // Get the restored email address.
        restoredEmail = info['data']['email'];
    
        // Revert to the old email.
        return auth.applyActionCode(actionCode);
      }).then(function() {
        // 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(function() {
          // Password reset confirmation sent. Ask user to check their email.
        }).catch(function(error) {
          // Error encountered while sending password reset code.
        });
      }).catch(function(error) {
        // Invalid code.
      });
    }
    
  4. Tangani verifikasi alamat email dengan memanggil applyActionCode. Misalnya:

    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(function(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(function(error) {
        // Code is invalid or expired. Ask the user to verify their email address
        // again.
      });
    }
    
  5. Hosting halaman di suatu tempat, misalnya menggunakan Firebase Hosting.

Berikutnya, Anda harus mengonfigurasi project Firebase untuk dihubungkan ke pengendali tindakan email kustom di email pengelolaan penggunanya.

Guna mengonfigurasi project Firebase untuk menggunakan pengendali tindakan email kustom Anda:

  1. Buka project Anda di Firebase console.
  2. Buka halaman Template Email di bagian Auth.
  3. Di entri Jenis Email, klik ikon pensil untuk mengedit template email.
  4. Klik sesuaikan URL tindakan dan masukkan URL untuk pengendali tindakan email kustom Anda.

Setelah Anda menyimpannya, URL tersebut akan digunakan oleh semua template email project Firebase Anda.

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.