コードの内訳とその仕組みを次に示します。
メール送信機能
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); } }); }
説明:
トランスポーターのセットアップ:
Office365 SMTP を使用して電子メールを送信するように Nodemailer を構成します。
メールオプション:
リダイレクト クエリ パラメーターを含むリンクを含む、件名と HTML 本文を含む電子メールを設定します。
URL をエンコード:
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) => 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 () => { 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); } };
ログインを送信:
ID、パスワード、リダイレクト URL を含むログイン要求を送信します。
ハンドル応答:
ログインに成功すると、応答のリダイレクト フィールドに指定された URL に移動します。
エラー処理:
プロセス中のエラーをキャッチしてログに記録します。
この設定により、ユーザーがログインすると、電子メール リンクで指定された URL に自動的にリダイレクトされます。
以上がユーザーが自動的にログインしたときに、電子メール内のリンクで指定されたページに自動的に移動するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。