写一个需要图形验证码的登录页面
时间: 2024-04-26 15:22:25 浏览: 3
好的,下面是一个需要图形验证码的登录页面的示例代码:
HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
.captcha {
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.captcha img {
display: block;
margin-bottom: 10px;
}
.captcha input {
width: 200px;
}
.captcha .refresh {
position: absolute;
right: -70px;
top: 0;
cursor: pointer;
}
</style>
</head>
<body>
<h1>登录</h1>
<form method="POST" action="/login">
<div>
<label>用户名:</label>
<input type="text" name="username">
</div>
<div>
<label>密码:</label>
<input type="password" name="password">
</div>
<div class="captcha">
<img src="/captcha" alt="验证码">
<input type="text" name="captcha">
<span class="refresh" onclick="refreshCaptcha()">刷新</span>
</div>
<button type="submit">登录</button>
</form>
<script>
function refreshCaptcha() {
var img = document.querySelector('.captcha img');
img.src = "/captcha?" + Math.random();
}
</script>
</body>
</html>
```
在这个页面中,我们使用了一个`.captcha`类来包含验证码图片和输入框,并且添加了一个刷新按钮,当用户点击刷新按钮时,会重新加载验证码图片。
在后端,我们可以使用Python的Flask框架来实现验证码的生成和验证逻辑。在这个示例中,我们在`/captcha`路由中生成一个随机字符串作为验证码,并将其存储在session中。然后,我们使用Pillow库来将字符串渲染成图片,并使用base64编码将其输出到浏览器中。在`/login`路由中,我们通过比较输入框中的验证码和session中存储的验证码来验证验证码是否正确。
Python:
```python
from flask import Flask, render_template, session, request
app = Flask(__name__)
app.secret_key = 'mysecretkey'
@app.route('/')
def index():
return render_template('login.html')
@app.route('/captcha')
def captcha():
import random
import string
from io import BytesIO
from PIL import Image, ImageDraw, ImageFont
captcha = ''.join(random.choices(string.ascii_letters + string.digits, k=6))
session['captcha'] = captcha
image = Image.new('RGB', (200, 100), (255, 255, 255))
draw = ImageDraw.Draw(image)
font = ImageFont.truetype('arial.ttf', 60)
draw.text((20, 20), captcha, font=font, fill=(0, 0, 0))
buffer = BytesIO()
image.save(buffer, format='JPEG')
buffer.seek(0)
encoded_image = base64.b64encode(buffer.read()).decode('utf-8')
return f"data:image/jpeg;base64,{encoded_image}"
@app.route('/login', methods=['POST'])
def login():
username = request.form['username']
password = request.form['password']
captcha = request.form['captcha']
if captcha != session['captcha']:
return '验证码错误'
if username == 'admin' and password == 'admin':
return '登录成功'
else:
return '用户名或密码错误'
if __name__ == '__main__':
app.run()
```
这样就可以实现一个需要图形验证码的登录页面了。