Firebase 重置密码模板 UI答案

【问题标题】：Firebase Reset Password Template UIFirebase 重置密码模板 UI
【发布时间】：2018-01-15 17:53:08
【问题描述】：

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

【问题讨论】：

目前无法在默认的电子邮件操作小部件中重置密码，但 Firebase 身份验证团队正在为此努力解决。
这还是不行吗？ @Sudheer 您是否找到了无需实现自定义 URL 的解决方案？我只想使用内置实现，但在更改密码后将用户重定向到登录或主页

标签： firebase web firebase-authentication

【解决方案1】：

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

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

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

希望对你有所帮助！

【讨论】：

在这种情况下我需要添加自定义重置密码按钮吗？我目前正在使用 FirebaseUIAuth，它显示登录链接问题，然后您可以在用户单击电子邮件并获取初始问题中的图像后重置，但永远不会重定向回主页。

【解决方案2】：

如果您想在电子邮件中指定自定义操作 URL，请参考 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;
    }
}

【讨论】：