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

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

WBOYOriginal: 2024-09-10 20:30:32749Durchsuche

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);
        }
    });
}

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,
  };
}

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);
  }
};

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!

html if for Cookie mail Error Token using function this

Stellungnahme：

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

Vorheriger Artikel：Erstellen einer RAG-App mit LlamaIndex.ts und Azure OpenAI: Erste Schritte!Nächster Artikel：Erstellen einer RAG-App mit LlamaIndex.ts und Azure OpenAI: Erste Schritte!

In Verbindung stehende Artikel

Mehr sehen