flask使用qq邮箱完成邮箱验证码的实现前后端
时间: 2023-06-10 18:09:08 浏览: 249
Flask项目中实现短信验证码和邮箱验证码功能
首先,我们需要使用 Flask 框架来搭建一个 Web 应用程序,并且需要使用 QQ 邮箱来发送邮件验证码。下面是一个简单的 Flask 应用程序示例:
```python
from flask import Flask, request, jsonify
import smtplib
from email.mime.text import MIMEText
import random
app = Flask(__name__)
@app.route('/send_code', methods=['POST'])
def send_code():
email = request.form.get('email')
if not email:
return jsonify({'success': False, 'message': 'Email is required'})
code = ''.join(str(random.randint(0,9)) for _ in range(6))
msg = MIMEText(f"Your verification code is {code}")
msg['Subject'] = 'Verification Code'
msg['From'] = 'your_qq_email@qq.com'
msg['To'] = email
try:
server = smtplib.SMTP_SSL('smtp.qq.com', 465)
server.login('your_qq_email@qq.com', 'your_qq_email_password')
server.sendmail('your_qq_email@qq.com', [email], msg.as_string())
server.quit()
return jsonify({'success': True, 'message': 'Verification code sent successfully'})
except Exception as e:
return jsonify({'success': False, 'message': str(e)})
```
在这个示例中,我们定义了一个 `/send_code` 路径,接受 POST 请求并从请求体中获取用户的邮箱地址。然后,我们生成一个 6 位数的随机验证码,并且将其放入邮件正文中。接着,我们使用 QQ 邮箱的 SMTP 服务器来发送邮件。
为了使上面的代码工作,你需要使用你自己的 QQ 邮箱和密码来登录 SMTP 服务器。你也可以将它们存储在环境变量中,以避免将其硬编码在代码中。你还需要使用 `flask-cors` 库来解决跨域问题。
下面是一个简单的前端页面,它向上面的 Flask 应用程序发送请求并显示响应消息:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send Verification Code</title>
</head>
<body>
<h1>Send Verification Code</h1>
<div id="message"></div>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Send Code</button>
</form>
<script>
const form = document.querySelector('form');
const message = document.querySelector('#message');
form.addEventListener('submit', async e => {
e.preventDefault();
const email = document.querySelector('#email').value;
const response = await fetch('http://localhost:5000/send_code', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `email=${email}`
});
const data = await response.json();
message.innerHTML = data.message;
});
</script>
</body>
</html>
```
在这个示例中,我们定义了一个表单,让用户输入他们的邮箱地址,并且使用 JavaScript 向 Flask 应用程序发送 POST 请求。在收到响应之后,我们将响应消息显示在页面上。
需要注意的是,你需要在 Flask 应用程序中启用 CORS,以便从不同的域名(例如前端页面)发送请求。你可以使用 `flask-cors` 库来解决这个问题。
阅读全文