flask用邮箱验证码实现账号注册前后端代码
时间: 2023-06-11 08:10:31 浏览: 49
以下是 Flask 实现邮箱验证码注册的前后端代码示例:
### 后端代码
```python
import random
import string
from flask import Flask, jsonify, request
from flask_mail import Mail, Message
app = Flask(__name__)
app.config.update(
DEBUG=True,
MAIL_SERVER='smtp.qq.com',
MAIL_PORT=465,
MAIL_USE_SSL=True,
MAIL_USERNAME='your_email@qq.com',
MAIL_PASSWORD='your_email_password',
MAIL_DEFAULT_SENDER=('Your Name', 'your_email@qq.com')
)
mail = Mail(app)
# 生成6位随机验证码
def generate_code():
return ''.join(random.sample(string.digits, 6))
# 发送验证码邮件
def send_email(to, code):
msg = Message('Your App Name 验证码', recipients=[to])
msg.body = '欢迎使用 Your App Name,您的验证码是:' + code
mail.send(msg)
# 注册接口
@app.route('/register', methods=['POST'])
def register():
email = request.json.get('email')
code = generate_code()
send_email(email, code)
return jsonify({'msg': '验证码已发送,请注意查收!'})
# 验证验证码接口
@app.route('/verify', methods=['POST'])
def verify():
email = request.json.get('email')
code = request.json.get('code')
# 验证码验证成功,可以注册账号
if code == cache.get(email):
# 注册账号逻辑
return jsonify({'msg': '注册成功!'})
else:
return jsonify({'msg': '验证码错误!'})
if __name__ == '__main__':
app.run()
```
### 前端代码
```html
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
</head>
<body>
<h1>注册</h1>
<form id="register-form">
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<button type="button" id="send-code-btn">发送验证码</button>
</div>
<div>
<label for="code">验证码:</label>
<input type="text" id="code" name="code" required>
</div>
<div>
<button type="submit" id="register-btn">注册</button>
</div>
</form>
<script>
// 发送验证码
document.getElementById('send-code-btn').addEventListener('click', function() {
var email = document.getElementById('email').value;
fetch('/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email
})
}).then(function(response) {
return response.json();
}).then(function(data) {
alert(data.msg);
});
});
// 提交注册信息
document.getElementById('register-btn').addEventListener('click', function(event) {
event.preventDefault();
var email = document.getElementById('email').value;
var code = document.getElementById('code').value;
fetch('/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
code: code
})
}).then(function(response) {
return response.json();
}).then(function(data) {
alert(data.msg);
});
});
</script>
</body>
</html>
```
在前端代码中,当用户点击发送验证码按钮时,会向后端发送 `/register` POST 请求,后端会生成一个6位随机验证码并发送到用户邮箱中。当用户填写完邮箱和验证码后,点击注册按钮时,会向后端发送 `/verify` POST 请求,后端会验证验证码是否正确,如果正确,则可以进行账号注册。