Đây là phân tích chi tiết về cách thiết lập lại cho người dùng khi họ quên mật khẩu cũng như cách gửi email từ Node JS và xác thực việc gửi tin nhắn. Hầu hết chúng ta đều đã trải qua quá trình khôi phục tài khoản ít nhất một lần — khi quên mật khẩu, cần có các thủ tục để tạo mật khẩu mới và lấy lại quyền truy cập vào hệ thống. Bài viết này tập trung vào việc triển khai quy trình như vậy bằng cách sử dụng Node.js, Knex và một số công cụ chưa được tiết lộ, cùng với Express để xử lý các tuyến đường và thực hiện các hoạt động cần thiết. Chúng tôi sẽ đề cập đến việc triển khai bộ định tuyến, xử lý các tham số URL, xác định nội dung cần gửi cho người dùng khi chỉ có email hoặc số điện thoại làm bằng chứng, quản lý việc gửi email và giải quyết các mối lo ngại về bảo mật. Quên mật khẩu Trước khi đi sâu vào mã hóa, tôi muốn đảm bảo rằng chúng tôi đang làm việc với cùng một cơ sở mã mà bạn có thể truy cập từ công khai của tôi. . Chúng tôi sẽ nâng cấp từng bước để triển khai quy trình quên mật khẩu. Để truyền tải email, chúng tôi sẽ sử dụng dịch vụ email của Google. kho lưu trữ trên GitHub Bây giờ, hãy xem sơ đồ của quy trình quên mật khẩu. Máy chủ sẽ chịu trách nhiệm gửi email đến hộp thư người dùng chứa liên kết hợp lệ để đặt lại mật khẩu và cũng sẽ xác thực sự tồn tại của mã thông báo và người dùng. Gói và di chuyển Để bắt đầu sử dụng dịch vụ email và gửi email bằng Node.js, chúng tôi cần cài đặt các gói sau ngoài các gói phụ thuộc hiện có: npm i --save nodemailer handlebars : Mô-đun mạnh mẽ cho phép gửi email dễ dàng bằng cách sử dụng SMTP hoặc các cơ chế vận chuyển khác. Nodemailer : Tay cầm là một công cụ tạo khuôn mẫu phổ biến cho JavaScript. Nó sẽ cho phép chúng ta xác định các mẫu với các phần giữ chỗ có thể chứa đầy dữ liệu khi hiển thị. Tay cầm Bây giờ, chúng ta cần tạo di chuyển, vì vậy trong trường hợp của tôi, tôi phải thêm một cột mới vào bảng : forgot_password_token users knex migrate:make add_field_forgot_password_token -x ts và trong tệp được tạo, tôi đặt mã: import type { Knex } from 'knex'; export async function up(knex: Knex): Promise<void> { return knex.schema.alterTable('users', table => { table.string('forgot_password_token').unique(); }); } export async function down(knex: Knex): Promise<void> { return knex.schema.alterTable('users', table => { table.dropColumn('forgot_password_token'); }); } Di chuyển mã thông báo quên mật khẩu trong bảng Người dùng và sau đó di chuyển tệp mới nhất: knex migrate:knex Vì vậy, bây giờ chúng ta có thể đặt vào bảng users forgot_password_token Bộ định tuyến Để quản lý các bộ điều khiển chịu trách nhiệm xử lý logic quên và đặt lại mật khẩu, chúng ta phải thiết lập hai lộ trình. Tuyến đầu tiên bắt đầu quá trình quên mật khẩu, trong khi tuyến thứ hai xử lý quá trình đặt lại, mong đợi tham số mã thông báo trong URL để xác minh. Để thực hiện điều này, hãy tạo một tệp có tên là trong thư mục và chèn đoạn mã sau: forgotPasswordRouter.ts src/routes/ import { Router } from 'express'; import { forgotPasswordController } from 'src/controllers/forgotPasswordController'; import { resetPasswordController } from 'src/controllers/resetPasswordController'; export const forgotPasswordRouter = Router(); forgotPasswordRouter.post('/', forgotPasswordController); forgotPasswordRouter.post('/reset/:token', resetPasswordController); Quên mật khẩu Bộ định tuyến Hai bộ điều khiển sẽ quản lý logic gửi email và đặt lại mật khẩu. Quên mật khẩu điều khiển Khi khách hàng quên mật khẩu, họ không có phiên, điều đó có nghĩa là chúng tôi không thể lấy dữ liệu người dùng ngoại trừ email hoặc bất kỳ thông tin nhận dạng bảo mật nào khác. Trong trường hợp của chúng tôi, chúng tôi đang gửi email để xử lý việc đặt lại mật khẩu. Logic đó chúng ta sẽ đặt vào bộ điều khiển. forgotPasswordRouter.post('/', forgotPasswordController); Ghi nhớ 'quên mật khẩu?' liên kết bên dưới biểu mẫu đăng nhập thường có trong giao diện người dùng của bất kỳ khách hàng nào trong biểu mẫu đăng nhập? Nhấp vào nó sẽ đưa chúng tôi đến chế độ xem nơi chúng tôi có thể yêu cầu đặt lại mật khẩu. Chúng tôi chỉ cần nhập email của mình và bộ điều khiển sẽ xử lý tất cả các thủ tục cần thiết. Hãy kiểm tra đoạn mã sau: import { Request, Response } from 'express'; import { UserModel } from 'src/models/UserModel'; import type { User } from 'src/@types'; import { TokenService } from 'src/services/TokenService'; import { EmailService } from 'src/services/EmailService'; export const forgotPasswordController = async (req: Request, res: Response) => { try { const { email, }: { email: string; } = req.body; const user = await UserModel.findByEmail(email); if (user) { const token = await TokenService.sign( { id: user.id, }, { expiresIn: '1 day', } ); await user.context.update({ forgot_password_token: token }); await EmailService.sendPasswordResetEmail(email, token); } return res.sendStatus(200); } catch (error) { return res.sendStatus(500); } }; Quên mật khẩu điều khiển Từ phần nội dung, chúng tôi sẽ nhận được một email và sau đó chúng tôi sẽ tìm thấy người dùng bằng cách sử dụng . Nếu người dùng tồn tại, chúng tôi tạo mã thông báo JWT bằng cách sử dụng và lưu mã thông báo cho người dùng khi hết hạn 1 ngày. Sau đó, chúng tôi sẽ gửi tin nhắn đến email kèm theo một liên kết thích hợp cùng với mã thông báo nơi người dùng có thể thay đổi mật khẩu của mình. UserModel.findByEmail TokenService.sign forgot_password_token Thiết lập Google Để có thể gửi email, chúng tôi phải tạo địa chỉ email mới sẽ là người gửi. Hãy truy cập Google để tạo một tài khoản email mới và sau đó, khi tài khoản được tạo, hãy đi tới liên kết . Bạn có thể tìm thấy nó ở trên cùng bên phải bằng cách nhấp vào hình đại diện. Sau đó, ở menu bên trái, nhấp vào mục , rồi nhấn . Bên dưới bạn sẽ tìm thấy phần , nhấp vào mũi tên: Quản lý tài khoản Google của bạn Bảo mật Xác minh 2 bước Mật khẩu ứng dụng Nhập tên cần sử dụng. Trong trường hợp của tôi, tôi đặt và nhấn . Nodemailer Create Sao chép mật khẩu đã tạo và đặt nó vào tệp của bạn. Chúng ta cần thiết lập để gửi hai biến: .env MAIL_USER="mygoogleemail@gmail.com" MAIL_PASSWORD="vyew hzek avty iwst" Tất nhiên, để có một email phù hợp như , bạn phải thiết lập Google Workspace hoặc AWS Amazon WorkMail cùng với AWS SES hoặc bất kỳ dịch vụ nào khác. Nhưng trong trường hợp của chúng tôi, chúng tôi đang sử dụng một tài khoản Gmail đơn giản miễn phí. info@company_name.com Dịch vụ email Với tệp đã được chuẩn bị, chúng tôi đã sẵn sàng thiết lập dịch vụ gửi email của mình. Bộ điều khiển sẽ sử dụng dịch vụ với mã thông báo được tạo và địa chỉ email người nhận cho tin nhắn của chúng tôi. .env await EmailService.sendPasswordResetEmail(email, token); Hãy tạo và xác định lớp cho dịch vụ: src/services/EmailService.ts export class EmailService {} Và bây giờ là dữ liệu ban đầu, tôi phải lấy môi trường để sử dụng với : nodemailer import process from 'process'; import * as nodemailer from 'nodemailer'; import * as dotenv from 'dotenv'; dotenv.config(); export class EmailService { private static transporter: nodemailer.Transporter; private static env = { USER: process.env.MAIL_USER, PASS: process.env.MAIL_PASSWORD, }; } Dịch vụ email Chúng tôi phải quan tâm đến việc khởi tạo dịch vụ. Tôi đã viết về nó trước đây trong bài viết trước của tôi . Đây là một ví dụ: bài báo import { TokenService } from 'src/services/TokenService'; import { RedisService } from 'src/services/RedisService'; import { EmailService } from 'src/services/EmailService'; export const initialize = async () => { await RedisService.initialize(); TokenService.initialize(); EmailService.initialize(); }; Khởi tạo dịch vụ Bây giờ, hãy tiến hành tạo khởi tạo trong lớp của chúng tôi: EmailService import process from 'process'; import * as nodemailer from 'nodemailer'; import * as dotenv from 'dotenv'; dotenv.config(); export class EmailService { private static transporter: nodemailer.Transporter; private static env = { USER: process.env.MAIL_USER, PASS: process.env.MAIL_PASSWORD, }; public static initialize() { try { EmailService.transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: this.env.USER, pass: this.env.PASS, }, }); } catch (error) { console.error('Error initializing email service'); throw error; } } } Khởi tạo dịch vụ email Có khởi tạo , một phương thức được cung cấp bởi thư viện . Nó tạo ra một đối tượng vận chuyển sẽ được sử dụng để gửi email của chúng tôi. Phương thức này chấp nhận một đối tượng tùy chọn làm đối số trong đó bạn chỉ định chi tiết cấu hình cho bộ vận chuyển. nodemailer.createTransport() nodemailer Chúng tôi đang sử dụng Google: chỉ định nhà cung cấp dịch vụ email. Nodemailer cung cấp hỗ trợ tích hợp cho nhiều nhà cung cấp dịch vụ email khác nhau và cho biết rằng trình vận chuyển sẽ được định cấu hình để hoạt động với máy chủ SMTP của Gmail. service: 'gmail' gmail Để xác thực , cần đặt thông tin xác thực được yêu cầu để truy cập máy chủ SMTP của nhà cung cấp dịch vụ email. auth Đối với nên đặt thành địa chỉ email mà chúng tôi sẽ gửi email và mật khẩu đó đã được tạo trong tài khoản Google từ Mật khẩu ứng dụng. user Bây giờ, hãy thiết lập phần cuối cùng của dịch vụ của chúng tôi: import process from 'process'; import * as nodemailer from 'nodemailer'; import * as dotenv from 'dotenv'; import { generateAttachments } from 'src/helpers/generateAttachments'; import { generateTemplate } from 'src/helpers/generateTemplate'; import { getHost } from 'src/helpers/getHost'; dotenv.config(); export class EmailService { // ...rest code public static async sendPasswordResetEmail(email: string, token: string) { try { const host = getHost(); const template = generateTemplate<{ token: string; host: string; }>('passwordResetTemplate', { token, host }); const attachments = generateAttachments([{ name: 'email_logo' }]); const info = await EmailService.transporter.sendMail({ from: this.env.USER, to: email, subject: 'Password Reset', html: template, attachments, }); console.log('Message sent: %s', info.messageId); } catch (error) { console.error('Error sending email: ', error); } } } Gửi email đặt lại mật khẩu Trước khi tiếp tục, điều quan trọng là phải xác định máy chủ lưu trữ thích hợp khi khách hàng nhận được email. Việc thiết lập liên kết bằng mã thông báo trong nội dung email là điều cần thiết. import * as dotenv from 'dotenv'; import process from 'process'; dotenv.config(); export const getHost = (): string => { const isProduction = process.env.NODE_ENV === 'production'; const protocol = isProduction ? 'https' : 'http'; const port = isProduction ? '' : `:${process.env.CLIENT_PORT}`; return `${protocol}://${process.env.WEB_HOST}${port}`; }; Nhận máy chủ Đối với các mẫu, tôi đang sử dụng và để làm được điều đó, chúng ta cần tạo trong mẫu HTML đầu tiên của mình: handlebars src/temlates/passwordResetTemplate.hbs  <html lang='en'> <head> <style> a { color: #372aff; } .token { font-weight: bold; } </style> <title>Forgot Password</title> </head> <body> <p>You requested a password reset. Please use the following link to reset your password:</p> <a class='token' href="{{ host }}/reset-password/{{ token }}">Reset Password</a> <p>If you did not request a password reset, please ignore this email.</p> <img src="cid:email_logo" alt="Email Logo"/> </body> </html> Mẫu đặt lại mật khẩu và bây giờ chúng ta có thể sử dụng lại mẫu này với trình trợ giúp: import path from 'path'; import fs from 'fs'; import handlebars from 'handlebars'; export const generateTemplate = <T>(name: string, props: T): string => { const templatePath = path.join(__dirname, '..', 'src/templates', `${name}.hbs`); const templateSource = fs.readFileSync(templatePath, 'utf8'); const template = handlebars.compile(templateSource); return template(props); }; Tạo trình trợ giúp mẫu Để nâng cao chất lượng email của chúng tôi, chúng tôi thậm chí có thể bao gồm các tệp đính kèm. Để làm như vậy, hãy thêm tệp vào thư mục . Sau đó, chúng tôi có thể hiển thị hình ảnh này trong email bằng chức năng trợ giúp sau: email_logo.png src/assets import path from 'path'; import { Extension } from 'src/@types/enums'; type AttachmentFile = { name: string; ext?: Extension; cid?: string; }; export const generateAttachments = (files: AttachmentFile[] = []) => files.map(file => { const ext = file.ext || Extension.png; const filename = `${file.name}.${ext}`; const imagePath = path.join(__dirname, '..', 'src/assets', filename); return { filename, path: imagePath, cid: file.cid || file.name, }; }); Trình trợ giúp tạo tệp đính kèm Sau khi thu thập tất cả những người trợ giúp đó, chúng tôi phải có thể gửi email bằng cách sử dụng: const info = await EmailService.transporter.sendMail({ from: this.env.USER, to: email, subject: 'Password Reset', html: template, attachments, }); Cách tiếp cận này mang lại khả năng mở rộng tốt, cho phép dịch vụ sử dụng nhiều phương pháp khác nhau để gửi email có nội dung đa dạng. Bây giờ, hãy thử kích hoạt bộ điều khiển bằng bộ định tuyến của chúng tôi và gửi email. Đối với điều đó, tôi đang sử dụng : Người phát thơ Bảng điều khiển sẽ cho bạn biết rằng tin nhắn đã được gửi: Message sent: <1k96ah55-c09t-p9k2–8bv2-j25r9h77f763@gmail.com> Kiểm tra tin nhắn mới trong hộp thư đến: Liên kết tới phải chứa mã thông báo và máy chủ: Đặt lại mật khẩu http://localhost:3000/reset-password/<token> Cổng được chỉ định ở đây vì thông báo này liên quan đến quá trình phát triển. Điều này cho thấy rằng ứng dụng khách chịu trách nhiệm xử lý các biểu mẫu đặt lại mật khẩu cũng sẽ hoạt động trong môi trường phát triển. 3000 Đặt lại mật khẩu Mã thông báo phải được xác thực ở phía bộ điều khiển bằng TokenService từ đó chúng tôi có thể nhận được người dùng đã gửi email đó. Hãy khôi phục bộ định tuyến sử dụng mã thông báo: forgotPasswordRouter.post('/reset/:token', resetPasswordController); Bộ điều khiển sẽ chỉ cập nhật mật khẩu nếu mã thông báo hợp lệ và chưa hết hạn, theo thời gian hết hạn được đặt thành một giờ. Để triển khai chức năng này, hãy điều hướng đến thư mục và tạo một tệp có tên chứa mã sau: src/controllers/ resetPasswordController.ts import bcrypt from 'bcrypt'; import { Request, Response } from 'express'; import { TokenService } from 'src/services/TokenService'; import { UserModel } from 'src/models/UserModel'; import type { User } from 'src/@types'; export const resetPasswordController = async (req: Request, res: Response) => { try { const token = req.params.token; if (!token) { return res.sendStatus(400); } const userData = await TokenService.verify<{ id: number }>(token); const user = await UserModel.findOneById<User>(userData.id); if (!user) { return res.sendStatus(400); } const newPassword = req.body.password; if (!newPassword) { return res.sendStatus(400); } const hashedPassword = await bcrypt.hash(newPassword, 10); await UserModel.updateById(user.id, { password: hashedPassword, passwordResetToken: null }); return res.sendStatus(200); } catch (error) { const errors = ['jwt malformed', 'TokenExpiredError', 'invalid token']; if (errors.includes(error.message)) { return res.sendStatus(400); } return res.sendStatus(500); } }; Đặt lại bộ điều khiển mật khẩu Bộ điều khiển này sẽ nhận mã thông báo, xác minh nó, trích xuất ID người dùng từ dữ liệu được giải mã, truy xuất người dùng tương ứng, lấy mật khẩu mới do khách hàng gửi trong nội dung yêu cầu và tiến hành cập nhật mật khẩu trong cơ sở dữ liệu. Cuối cùng, điều này cho phép khách hàng đăng nhập bằng mật khẩu mới. Phần kết luận Khả năng mở rộng của dịch vụ email được thể hiện thông qua nhiều cách tiếp cận khác nhau, chẳng hạn như gửi xác nhận hoặc thông báo thành công, như những cách chỉ báo cập nhật mật khẩu và cho phép đăng nhập tiếp theo. Tuy nhiên, việc quản lý mật khẩu là một thách thức lớn, đặc biệt khi việc tăng cường bảo mật ứng dụng là điều cấp thiết. Có nhiều tùy chọn có sẵn để tăng cường bảo mật, bao gồm kiểm tra bổ sung trước khi cho phép thay đổi mật khẩu, chẳng hạn như so sánh mã thông báo, email và xác thực mật khẩu. Một tùy chọn khác là triển khai hệ thống mã PIN, trong đó mã được gửi đến email của người dùng để xác thực ở phía máy chủ. Mỗi biện pháp này đều yêu cầu sử dụng khả năng gửi email. Tất cả mã được triển khai bạn có thể tìm thấy trong . Kho lưu trữ GitHub tại đây Vui lòng tiến hành bất kỳ thử nghiệm nào với bản dựng này và chia sẻ phản hồi của bạn về những khía cạnh mà bạn đánh giá cao về chủ đề này. Cảm ơn bạn rất nhiều. Người giới thiệu Tại đây, bạn có thể tìm thấy một số tài liệu tham khảo mà tôi đã sử dụng trong bài viết này: Kho Dịch vụ khởi tạo với Node JS Trình gửi thư điện tử Tay lái Knex Thể hiện Người phát thơ Cũng được xuất bản ở đây

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Making security fun one episode at a time

Hướng dẫn quy trình khôi phục tài khoản bằng NodeJS với Knex và Express

dài quá đọc không nổi

Anton Kalik

STORY’S CREDIBILITY

Guide

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

Hướng dẫn quy trình khôi phục tài khoản bằng NodeJS với Knex và Express

dài quá đọc không nổi

Anton Kalik

STORY’S CREDIBILITY

Guide

About Author

chuyên mục

Languages

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI...

NHỮNG BÀI VIẾT LIÊN QUAN