snxraven/ravenscott-blog
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add captcha to contact

Browse Source
This commit is contained in:
Raven Scott 2024-09-19 08:30:19 -04:00
parent 18a427c7b0
commit 0066061a7b
3 changed files with 67 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app.js
View File

@ -6,6 +6,7 @@ const { marked } = require('marked');
const nodemailer = require('nodemailer'); const nodemailer = require('nodemailer');
const hljs = require('highlight.js'); const hljs = require('highlight.js');
const { format } = require('date-fns'); // To format dates in a proper XML format const { format } = require('date-fns'); // To format dates in a proper XML format
const axios = require('axios'); // Add axios for reCAPTCHA verification
const app = express(); const app = express();
@ -134,15 +135,26 @@ app.get('/contact', (req, res) => {
}); });
// Handle contact form submission // Handle contact form submission
app.post('/contact', (req, res) => { app.post('/contact', async (req, res) => {
const { name, email, subject, message } = req.body; const { name, email, subject, message, 'g-recaptcha-response': captchaToken } = req.body;
// Validate form inputs (basic example) // Validate form inputs (basic example)
if (!name || !email || !subject || !message) { if (!name || !email || !subject || !message) {
return res.render('contact', { title: 'Contact Raven Scott', msg: 'All fields are required.' }); return res.render('contact', { title: 'Contact Raven Scott', msg: 'All fields are required.' });
} }
// Create email content // Verify the reCAPTCHA token
const captchaSecret = process.env.CAPTCHA_SECRET_KEY; // Your reCAPTCHA secret key
const captchaVerifyUrl = `https://www.google.com/recaptcha/api/siteverify?secret=${captchaSecret}&response=${captchaToken}`;
try {
const captchaResponse = await axios.post(captchaVerifyUrl);
if (!captchaResponse.data.success) {
return res.render('contact', { title: 'Contact Raven Scott', msg: 'Captcha verification failed. Please try again.' });
}
// CAPTCHA passed, proceed with sending email
const output = ` const output = `
<p>You have a new contact request from <strong>${name}</strong>.</p> <p>You have a new contact request from <strong>${name}</strong>.</p>
<h3>Contact Details</h3> <h3>Contact Details</h3>
@ -187,6 +199,10 @@ app.post('/contact', (req, res) => {
return res.render('contact', { title: 'Contact Raven Scott', msg: 'Your message has been sent successfully!' }); return res.render('contact', { title: 'Contact Raven Scott', msg: 'Your message has been sent successfully!' });
} }
}); });
} catch (error) {
console.error('Error verifying CAPTCHA:', error);
return res.render('contact', { title: 'Contact Raven Scott', msg: 'An error occurred while verifying CAPTCHA. Please try again.' });
}
}); });
// Blog Post Route // Blog Post Route

1
package.json
View File

@ -10,6 +10,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"axios": "^1.7.7",
"body-parser": "^1.20.3", "body-parser": "^1.20.3",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"date-fns": "^4.0.0", "date-fns": "^4.0.0",

6
views/contact.ejs
View File

@ -12,6 +12,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom CSS --> <!-- Custom CSS -->
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<!-- reCAPTCHA API -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head> </head>
<body class="bg-dark text-white"> <body class="bg-dark text-white">
@ -70,6 +72,10 @@
<label for="message" class="form-label">Your Message<span class="text-danger">*</span></label> <label for="message" class="form-label">Your Message<span class="text-danger">*</span></label>
<textarea class="form-control bg-dark text-white border-secondary" id="message" name="message" rows="6" required></textarea> <textarea class="form-control bg-dark text-white border-secondary" id="message" name="message" rows="6" required></textarea>
</div> </div>
<!-- reCAPTCHA -->
<div class="g-recaptcha" data-sitekey="6LcLN0kqAAAAAJtseh3ESCUtOWPcEB0y7PsMuimR"></div>
<button type="submit" class="btn btn-primary">Send Message</button> <button type="submit" class="btn btn-primary">Send Message</button>
</form> </form>
</div> </div>