Firebase重置密码模板UI

Question

我在我的网络应用中使用firebase身份验证。 我想在默认重置密码成功消息后添加返回登录页面链接。

Answer 1

您可以通过继续URL传递状态来实现此目的。需要提供firebase.auth.ActionCodeSettings。

点击此链接了解详情：https://firebase.google.com/docs/auth/web/passing-state-in-email-actions#configuring_firebase_dynamic_links

以下是重置帐户密码的示例：

resetAccountPassword () {
    const actionCodeSettings = {
      url: 'http://example.com/dashboard/?email=' + email,
      handleCodeInApp: false
    }

    // Here you pass the actionCodeSettings Obj (containing the continueURL) as the second argument. 
    firebase.auth().sendPasswordResetEmail(email, actionCodeSettings)
      .then(() => {
      // Email sent.
      }).catch(e => {
      // An error happened.   
      })
  },

这将显示保存按钮，单击后，用户将重定向到actionCodeSettings Obj中提供的URL。检查下面的图片。

image

我希望这有帮助！

Answer 2

如果要在电子邮件中分配自定义操作网址，请参阅this。

在引用相同内容的同时，您可能需要更改以下代码和功能：

if (document.readyState === 'complete') {
    initCode();
} else {
    document.addEventListener('DOMContentLoaded', function() {
        initCode();
    }, false);
}

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

function initCode() {
    // 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 API key from the query parameter.
    var apiKey = getParameterByName('apiKey');
    // (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';

    var auth = firebase.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.
            break;
    }
}