使用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邮件程序.这是代码:

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屋！