当用户自动登录时，如何自动导航到电子邮件中链接指定的页面？-js教程-PHP中文网

首页

web前端

js教程

当用户自动登录时，如何自动导航到电子邮件中链接指定的页面？

Sep 10, 2024 pm 08:30 PM

How can I automatically navigate to a page specified in a link within an email when the user logs in automatically?

以下是代码的详细说明及其工作原理：

邮件发送功能

async sendingEmail(email, ndfCollabName, message, numero, intitulé, Url) {
    const transporter = nodemailer.createTransport({
        host: 'smtp.office365.com',
        port: 587,
        secure: false,
        auth: {
            user: process.env.USER_EMAIL,
            pass: process.env.USER_PASS,
        },
    });
    const mailOptions = {
        from: 'fromEmail@gamil.com',
        to: email,
        subject: '',
        html: `
        &lt;!DOCTYPE html&gt;
        &lt;html lang="fr"&gt;
        &lt;head&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
            &lt;title&gt;test&lt;/title&gt;
            &lt;style&gt;
                body {
                    font-family: Arial, sans-serif;
                    line-height: 1.6;
                    color: #333;
                    max-width: 600px;
                    margin: 0 auto;
                    padding: 20px;
                }
                h1 {
                    color: #007bff;
                }
                h2 {
                    color: #555;
                }
                .links {
                    margin-top: 20px;
                }
                .links a {
                    display: block;
                    margin-bottom: 10px;
                    color: #007bff;
                } 
            &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;h1&gt;Cher/Chère ${ndfCollabName.toUpperCase()},&lt;/h1&gt;
            &lt;h2&gt;${message}, N° ${numero}, ${intitulé}.&lt;/h2&gt;
            &lt;div class="links"&gt;
                &lt;a href="http://localhost:4000/?redirect=${encodeURIComponent(Url)}"&gt;Lien local&lt;/a&gt;
            &lt;/div&gt;
            &lt;h2&gt;Vérifiez ici?&lt;/h2&gt;
        &lt;/body&gt;
        &lt;/html&gt;
        `,
    };
    transporter.sendMail(mailOptions, function (error, info) {
        if (error) {
            console.log(error);
        } else {
            console.log('Email sent:' + info.response);
        }
    });
}

登录后复制

说明：

设置传输器：

配置 Nodemailer 使用 Office365 SMTP 发送电子邮件。
邮件选项：

设置电子邮件的主题和 HTML 正文，包括带有重定向查询参数的链接。
编码网址：

使用encodeURIComponent 对 Url 进行安全编码，以便包含在电子邮件链接中。
发送邮件：

使用transporter.sendMail发送电子邮件。

@Post('login')
async login(
  @Body('id') id: string,
  @Body('password') password: string,
  @Body('company') company: Company,
  @Body('redirect') redirect: string,
  @Res({ passthrough: true }) response: Response,
) {
  const user = await this.collaborateursService.find({
    where: { nomtechnicien: id },
    relations: [
      'companies',
      'roles.role',
      'roles.company',
      'groups',
      'groupe',
    ],
  });
 
  if (!user) {
    throw new BadRequestException('Invalid credentials');
  }
  if (!(await bcrypt.compare(password, user.password))) {
    throw new BadRequestException('Invalid credentials');
  }
  if (!user.lastconnectedcompany) {
    await this.collaborateursService.lastConnectedCompany(user.id, user.companies[0]);
  }
 
  const jwt = await this.jwtService.signAsync({
    id: user.id,
    name: user.nomtechnicien,
    lastconnectedcompany: user.lastconnectedcompany || user.companies[0].name,
    rolesByCompanies: user.rolesByCompanies,
    groups: user.groups!,
    company: user.companies,
    companyId: user.companies.filter((company) =&gt;
      user.lastconnectedcompany
        ? company.name == user.lastconnectedcompany
        : company.name == user.companies[0].name,
    )[0].identifiantBc,
  });
  response.cookie('jwt', jwt, { httpOnly: true });
  delete user.password;
  return {
    message: 'success',
    user,
    redirect: redirect ? decodeURIComponent(redirect) : null,
  };
}

登录后复制

查找用户：

通过 ID 检索用户并检查凭据。
生成 JWT：

创建 JWT 令牌并将其设置为 cookie。
解码重定向 URL：

从请求正文中解码重定向参数。
返回响应：

返回成功消息和解码后的重定向 URL。
前端提交

const submit = async () =&gt; {
  setIsLoading(true);
  try {
    const res = await empLogin({ id: id, password: pass, redirect: redirectUrl });
    console.log(res);
    if (res.message === "success") {
      dispatch(login());
      // Navigate to the redirect URL provided in the response
      navigate(res.redirect);
    }
  } catch (error) {
    console.log(error);
    setError(true);
  } finally {
    setIsLoading(false);
  }
};