Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann ich automatisch zu einer Seite navigieren, die in einem Link in einer E-Mail angegeben ist, wenn sich der Benutzer automatisch anmeldet?

WBOY
Freigeben: 2024-09-10 20:30:32
Original
626 Leute haben es durchsucht

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

Hier ist eine Aufschlüsselung des Codes und seiner Funktionsweise:

E-Mail-Versandfunktion

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: `
        <!DOCTYPE html>
        <html lang="fr">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>test</title>
            <style>
                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;
                } 
            </style>
        </head>
        <body>
            <h1>Cher/Chère ${ndfCollabName.toUpperCase()},</h1>
            <h2>${message}, N° ${numero}, ${intitulé}.</h2>
            <div class="links">
                <a href="http://localhost:4000/?redirect=${encodeURIComponent(Url)}">Lien local</a>
            </div>
            <h2>Vérifiez ici?</h2>
        </body>
        </html>
        `,
    };
    transporter.sendMail(mailOptions, function (error, info) {
        if (error) {
            console.log(error);
        } else {
            console.log('Email sent:' + info.response);
        }
    });
}

Nach dem Login kopieren

Erklärung:

Transporter einrichten:

Konfiguriert Nodemailer zum Senden von E-Mails über Office365 SMTP.
E-Mail-Optionen:

Richte die E-Mail mit Betreff und HTML-Text ein, einschließlich Links mit einem Weiterleitungsabfrageparameter.
URL kodieren:

Verwendet encodeURIComponent, um die URL für die Aufnahme in die E-Mail-Links sicher zu kodieren.
Mail senden:

Sendet die E-Mail mit 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) =>
      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,
  };
}

Nach dem Login kopieren

Benutzer suchen:

Ruft den Benutzer anhand der ID ab und überprüft die Anmeldeinformationen.
JWT generieren:

Erstellt ein JWT-Token und legt es als Cookie fest.
Weiterleitungs-URL dekodieren:

Dekodiert den Umleitungsparameter aus dem Anfragetext.
Antwort:

Gibt eine Erfolgsmeldung und die entschlüsselte Weiterleitungs-URL zurück.
Frontend-Einreichung

const submit = async () => {
  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);
  }
};

Nach dem Login kopieren

Anmeldung senden:

Sendet eine Anmeldeanfrage mit ID, Passwort und Weiterleitungs-URL.
Handle-Antwort:

Wenn die Anmeldung erfolgreich ist, wird zur URL navigiert, die im Weiterleitungsfeld der Antwort angegeben ist.
Fehlerbehandlung:

Fängt und protokolliert alle Fehler während des Prozesses.
Dieses Setup stellt sicher, dass ein Benutzer beim Anmelden automatisch zu der im E-Mail-Link angegebenen URL weitergeleitet wird.

Das obige ist der detaillierte Inhalt vonWie kann ich automatisch zu einer Seite navigieren, die in einem Link in einer E-Mail angegeben ist, wenn sich der Benutzer automatisch anmeldet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!