Auth0自定义登录模式下重置密码完整流程实现方法咨询

完整实现流程 #

• 第一步：在自定义登录页添加「忘记密码」跳转入口，直接跳转至你自行开发的邮件发送页面即可
• 第二步：开发邮件发送页面，页面至少包含邮箱输入框（id设为email即可）和「发送重置邮件」按钮，同时页面中要引入Auth0 WebAuth SDK，且初始化的webAuth实例参数（domain、clientID、数据库连接名）和自定义登录页保持完全一致
• 第三步：登录Auth0后台，进入「品牌化-电子邮件模板」板块，找到「密码重置」模板，确认模板内的重置跳转链接默认指向Auth0官方修改密码页即可，无特殊需求不需要修改模板配置

函数放置与触发规则 #

你提到的changePassword相关逻辑必须放在邮件发送页，不要放在自定义登录页：

• 该函数需要读取邮件发送页内用户输入的邮箱字段，放在登录页无法获取对应值
• 触发时机就是用户点击「发送重置邮件」按钮的时候，你现有代码中绑定表单提交事件的逻辑是正确的

现有代码注意事项 #

你提供的代码逻辑本身没问题，只需要确认两个配置项即可：

1. 代码中的databaseConnection变量要替换为你Auth0后台配置的用户数据库连接的实际名称，拼写错误会导致请求失败
2. 确保邮件发送页已经提前完成了webAuth实例的初始化，否则调用webAuth.changePassword会抛出未定义错误

修正转义字符后的可直接使用代码版本：

function resetPassword (e) {
    e.preventDefault();
    var email = document.getElementById('email').value;
    if(!email) {
      alert("请输入你的邮箱地址");
      return;
    }
    webAuth.changePassword({
      connection: databaseConnection, // 此处替换为实际数据库连接名
      email: email
    }, function (err, resp) {
      if(err){
        console.log(err.message);
        alert(err.message);
      } else {
        console.log(resp);
        alert("密码重置邮件已发送，请前往邮箱查看");
      }
    });
}
// 页面加载完成后给提交按钮绑定事件即可
document.getElementById('resetBtn').addEventListener('click', resetPassword)

内容的提问来源于stack exchange，提问作者joekevinrayan96