Bước 1: Sử dụng Mật Khẩu Ứng Dụng (App Password)
Nếu bạn đang sử dụng Gmail, hãy đảm bảo rằng bạn đang sử dụng mật khẩu ứng dụng thay vì mật khẩu tài khoản Google thông thường. Bạn có thể tạo mật khẩu ứng dụng trong phần cài đặt bảo mật của tài khoản Google.
Sau đó, nhập lên ô tìm kiếm App Password và tạo cho mình một App Windows để xác nhận việc cấp quyền gửi mail, chú ý mật khẩu tự động giữ lại để thao tác gửi mail trong ứng dụng.
Bước 2: Tạo Backend Project với Node.js/Express
2.1 Cài đặt Node.js
Nếu bạn chưa cài đặt Node.js, hãy tải và cài đặt từ trang chủ Node.js.
2.2 Khởi tạo Project Backend
- Mở terminal và tạo thư mục cho backend.
- Khởi tạo một project Node.js:
npm init -y
- Cài đặt các gói cần thiết:
npm install express nodemailer cors
- Tạo file app.js trong thư mục backend:
2.3 Viết mã cho Backend (app.js)
Mở app.js và dán đoạn mã sau vào:
const express = require('express');
const nodemailer = require('nodemailer');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 4500;
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cors()); //enable cors for all routes
const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: 'Email dùng để gửi',
pass: 'Mật khẩu của ứng dụng'
}
});
app.post('/send-email', (req, res) => {
const userInfo = req.body;
const mailOptions = {
from: 'dotnet.edu.vn@gmail.com',
to: userInfo.email,
subject: 'Welcome to Dotnet Edu',
text: `Hello ${userInfo.name}, welcome to Dotnet Edu.`
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
res.status(500).send('An error occurred while sending email');
} else {
res.status(200).send('Email sent successfully');
}
});
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Bước 3: Tạo Frontend Project với React
3.1 Khởi tạo Project React
- Quay lại thư mục chính và tạo một thư mục mới cho frontend:
npx create-react-app frontend
- Chuyển vào thư mục frontend:
cd frontend
3.2 Viết mã cho Frontend
- Mở src/App.js và thay đổi nội dung với form như sau:
import React, { useState } from 'react';
function App() {
const [data, setData] = useState(
{
name: '',
email: ''
}
);
const handleChange = (e) => {
setData({ ...data, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
fetch('http://localhost:4500/send-email', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(response => {
if (response.status === 200) {
alert('Email sent successfully');
} else {
alert('An error occurred while sending email');
}
});
}
return (
<>
<h1>Submit your infomation</h1>
<form onSubmit={handleSubmit}>
<input type="text" name="name" placeholder="Enter your name" value={data.name} onChange={handleChange} />
<input type="email" name="email" placeholder="Enter your email" value={data.email} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
</>
);
}
export default App;
Bước 4: Chạy Backend và Frontend
4.1 Chạy Backend Server
- Chuyển về thư mục backend và chạy server:
node app.js
- Server sẽ chạy ở địa chỉ http://localhost:4500.
4.2 Chạy Frontend
- Mở một terminal khác, chuyển đến thư mục frontend và chạy ứng dụng React:
npm start
- Ứng dụng React sẽ chạy ở địa chỉ http://localhost:3000.
Bước 5: Kết nối và Kiểm tra
- Mở trình duyệt và truy cập http://localhost:3000.
- Điền thông tin vào form và nhấn submit.
Nếu mọi thứ hoạt động đúng, email sẽ được gửi từ backend sử dụng Nodemailer, và bạn sẽ nhận được thông báo thành công trên giao diện React.