应该如何使用 Node.js 和 Nodemailer 修复此 Angular 代码中的重置密码功能 [英] What should be done for fixing this reset password feature in this Angular code with Node.js and Nodemailer

问题描述

我们正在尝试使用 Node.js 在 Angular 6 中创建重置密码功能.关键是当您单击重置密码并填写电子邮件时，它会发送带有重置密码链接的电子邮件.但是电子邮件中的链接没有与 Angular 通信.我们在后端使用 Node.js 和 Node mailer.代码如下:

We are trying to create a reset password feature in Angular 6 with Node.js. The point is that when you click the reset password and fill your email it sends the email with the link of reset password. But the link inside the email is not communicating with Angular. We are using Node.js and Node mailer in the backend. Here is the code:

Node.js

 async ResetPassword(req, res) {
    if (!req.body.email) {
      return res
        .status(HttpStatus.INTERNAL_SERVER_ERROR)
        .json({ message: 'Email is required' });
    }

    const userEmail = await User.findOne({
      email: Helpers.lowerCase(req.body.email)
    });
    if (!userEmail) {
      return res
        .status(HttpStatus.CONFLICT)
        .json({ message: 'Email does not exist' });
    }

      const body = {
        email: Helpers.lowerCase(value.email),

      };
            var resettoken = new resetToken({ _userId: user._id, resettoken: crypto.randomBytes(16).toString('hex') });
            resettoken.save(function (err) {
                if (err) { return res.status(500).send({ msg: err.message }); }
                var transporter = nodemailer.createTransport({
                    service: '"SendGrid"',
                    auth:
                     {
                      user: 'login',
                      pass: 'password'
                     }
                });
                var mailOptions = {
                    from: 'email',
                    subject: 'Node.js Password Reset',
                    text: 'You are receiving this because you (or someone else) have requested the reset of the password for your account.\n\n' +
                      'Please click on the following link, or paste this into your browser to complete the process:\n\n' +
                      'http://' + req.headers.host + '/new-password/' + resettoken + '\n\n' +
                      'If you did not request this, please ignore this email and your password will remain unchanged.\n'
                }

                transporter.sendMail(mailOptions 
                )          
            })

        .catch(err => {
            res
                .status(HttpStatus.INTERNAL_SERVER_ERROR)
                .json({ message: 'Error occured' });
        });
    },

电子邮件模板中的链接无效.

The link inside email template is not working.

路线

router.post('/new-password', AuthCtrl.NewPassword);

角度

      route.queryParams.subscribe(params => {
        this.form.resetToken = params['token'];
      });
    }


  ngOnInit() {
    this.Init();
  }

  Init() {
    this.ResponseResetForm = this.fb.group(
      {
        email: ['', Validators.required, Validators.email],
        newPassword: ['', Validators.required],
        confirmPassword: ['', Validators.required]
      },
      {
        validator: this.Validate.bind(this)
      }
    );
  }

 ...
...

  ResetPassword() {

    this.authService.newPassword(this.ResponseResetForm.value).subscribe(
      data => {
        this.ResponseResetForm.reset();
        setTimeout(() => {
          this.router.navigate(['sign-in']);
        }, 3000);
      },
      err => {

        if (err.error.message) {
          this.errorMessage = err.error.message;
        }
      }
    );
  }
}

这部分是我从另一个代码中添加的:

This part I've added from another code:

 route.queryParams.subscribe(params => {
            this.form.resetToken = params['token'];
          });
        }

但我认为它不适合我们的代码.这里也是这个组件在 Angular 中的路由:

But I don't think it's suitable for our code. Also here is the route for this component in Angular:

  {
    path: 'response-reset-password',
    component: ResponseResetComponent
  },

我们如何使这个后端控制器与 Angular 前端一起按预期工作?

How can we make this backend controller work as expected with Angular front-end?

推荐答案

因此，当您在电子邮件中嵌入链接时，该链接需要路由到 Angular 前端，而不是后端:

So when you embed a link in your email, that link needs to route to the Angular frontend, not backend:

{
   path: 'new-password', // I would suggest changing this path to match your Component. This will also lead to changing the URL being embedded in the ResetPassword email
   component: ResponseResetComponent
}

现在，当用户点击电子邮件中的链接时，前端将被加载，然后您可以处理 ResponseResetComponent 中的 token 将请求实际发送到: router.post('/new-password') 在后端.

Now, when the user clicks the link in the email, the frontend will be loaded, then you can handle the token in the ResponseResetComponent to actually send the request to: router.post('/new-password') on the backend.

这篇关于应该如何使用 Node.js 和 Nodemailer 修复此 Angular 代码中的重置密码功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！