Spring Boot 网页记录 Token 的实现

在现代互联网应用中,Token 的使用越来越普遍,尤其是在用户身份验证和授权中。本文将介绍如何在 Spring Boot 应用中生成、存储和记录 Token,以及如何在网页上调用这些 Token。以下是实现的具体步骤、代码示例和相关说明。

1. 什么是 Token?

Token 是一种一次性使用的有效凭证,通常用于用户身份验证。它通常包含用户的基本信息和有效期限等。用户在登录后可以使用 Token 进行后续请求,从而验证身份并获取相关权限。

2. 系统架构

在实现过程中,我们将创建一个简单的 Spring Boot 应用。系统架构包括用户登录、Token 生成与存储、API 调用等部分。

flowchart TD
    A[用户请求登录] --> B{验证用户信息}
    B -- 是 --> C[生成 Token]
    C --> D[存储 Token]
    D --> E[返回 Token]
    A --> F[使用 Token 访问资源]
    F --> G{验证 Token}
    G -- 是 --> H[返回资源]
    G -- 否 --> I[返回错误]

3. 环境准备

3.1 依赖项

首先,确保你的 Spring Boot 项目引入以下依赖:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.1</version>
</dependency>

3.2 创建 Token 生成与验证服务

创建一个 Token 服务类,用于生成和验证 Token。

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.springframework.stereotype.Service;

import java.util.Date;

@Service
public class TokenService {

    private final String SECRET_KEY = "your_secret_key"; // 请自定义密钥
    private final long EXPIRATION_TIME = 86400000; // 24小时的过期时间

    // 生成 Token
    public String generateToken(String username) {
        return Jwts.builder()
                .setSubject(username)
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
                .signWith(SignatureAlgorithm.HS256, SECRET_KEY)
                .compact();
    }

    // 验证 Token
    public Claims validateToken(String token) {
        return Jwts.parser()
                .setSigningKey(SECRET_KEY)
                .parseClaimsJws(token)
                .getBody();
    }
}

3.3 创建用户控制器

我们需要一个控制器来处理用户登录请求并返回 Token。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api")
public class UserController {

    @Autowired
    private TokenService tokenService;

    @PostMapping("/login")
    public String login(@RequestParam String username, @RequestParam String password) {
        // 这里是简化的示例,实际情况中需要验证用户名和密码
        if ("user".equals(username) && "password".equals(password)) {
            return tokenService.generateToken(username);
        } else {
            throw new UnauthorizedException("用户名或密码错误");
        }
    }
}

3.4 记录 Token 的使用

当用户请求某个资源时,我们需要验证 Token。

@GetMapping("/resource")
public String getResource(@RequestHeader("Authorization") String token) {
    try {
        Claims claims = tokenService.validateToken(token);
        return "Hello, " + claims.getSubject();
    } catch (Exception e) {
        throw new UnauthorizedException("Token 无效或过期");
    }
}

4. 前端页面设计

后端 API 完成后,我们可以在前端使用 JavaScript 调用这些 API。假设我们用 HTML 创建一个简单的登录页:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
    用户登录
    <form id="loginForm">
        <input type="text" id="username" placeholder="用户名" required />
        <input type="password" id="password" placeholder="密码" required />
        <button type="submit">登录</button>
    </form>
    <div id="tokenDisplay"></div>

    <script>
        document.getElementById('loginForm').onsubmit = async function (e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            const response = await fetch('/api/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            });

            if (response.ok) {
                const token = await response.text();
                document.getElementById('tokenDisplay').innerText = 'Token: ' + token;
            } else {
                alert('登录失败');
            }
        };
    </script>
</body>
</html>

5. 总结

本文介绍了如何在 Spring Boot 应用中实现 Token 的生成、存储与验证。通过以上代码示例和流程图,可以帮助你更好地理解 Token 在用户身份验证中的重要性。通过前端的简单实现,用户可以方便地获取 Token,以便在后续操作中使用。随着应用复杂度的增加,请务必关注 Token 的安全性和存储方法,以防止潜在的安全风险。希望通过本篇文章能够帮助你更深入地了解并成功实现 Token 功能!