以下是一个简单的示例代码,仅供参考。前端代码实现了登录和验证码的获取,并在登录时将验证码和用户名密码一起发送到后端。后端代码实现了验证码和用户名密码的验证,如果验证通过则生成Token并返回给客户端。
前端代码(使用jQuery):
// 获取验证码
$('#btn-get-captcha').click(function() {
$.get('/captcha', function(data) {
$('#captcha-img').attr('src', data.img); // 显示验证码图片
$('#captcha-key').val(data.key); // 保存验证码key
});
});
// 登录
$('#btn-login').click(function() {
var data = {
username: $('#username').val(),
password: $('#password').val(),
captchaKey: $('#captcha-key').val(),
captchaCode: $('#captcha-code').val()
};
$.post('/login', data, function(data, textStatus, xhr) {
// 登录成功,保存Token并跳转到主页
var token = xhr.getResponseHeader('Authorization');
localStorage.setItem('token', token);
window.location.href = '/index.html';
}).fail(function() {
// 登录失败,刷新验证码
$('#captcha-img').attr('src', '/captcha?' + Math.random());
$('#captcha-code').val('');
});
});
后端代码(使用Spring Boot):
@RestController
public class AuthController {
@Autowired
private AuthenticationManager authenticationManager;
@Autowired
private TokenProvider tokenProvider;
// 获取验证码
@GetMapping("/captcha")
public CaptchaInfo getCaptcha() {
// 生成验证码图片和对应的key,保存到redis中
String key = UUID.randomUUID().toString();
String code = CaptchaUtil.generateCode();
BufferedImage image = CaptchaUtil.generateImage(code);
redisTemplate.opsForValue().set(key, code, 5, TimeUnit.MINUTES);
// 返回验证码图片和key
String img = "data:image/png;base64," + ImageUtil.toBase64(image);
return new CaptchaInfo(key, img);
}
// 登录
@PostMapping("/login")
public ResponseEntity<AuthInfo> login(@RequestBody LoginRequest loginRequest) {
// 验证用户输入的验证码是否正确
String key = loginRequest.getCaptchaKey();
String code = redisTemplate.opsForValue().get(key);
if (code == null || !code.equalsIgnoreCase(loginRequest.getCaptchaCode())) {
throw new BadCredentialsException("Invalid captcha code");
}
// 验证用户名密码是否正确
UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(
loginRequest.getUsername(), loginRequest.getPassword());
Authentication authentication = authenticationManager.authenticate(authenticationToken);
// 生成Token
String token = tokenProvider.createToken(authentication);
// 返回Token
HttpHeaders headers = new HttpHeaders();
headers.add(HttpHeaders.AUTHORIZATION, "Bearer " + token);
return new ResponseEntity<>(new AuthInfo(token), headers, HttpStatus.OK);
}
}