4 步学会搭建双端登入流程，以增强用户体验与系统安全性

2023-09-09 12:26:21

前言

春招即将来临，准备完善全栈项目来吸引面试官目光。精心设计的数据库与完整登录流程，为项目亮点之一。在本文中，我们将打造一个安全可靠的双端登录流程，以提升用户体验，同时保证系统安全性。我们将会使用 SQL Copilot 简化代码编写过程，并使用 Spring Boot 和 React 构建应用。

第一步：构建登录表单

首先，创建登录表单，让用户输入用户名与密码。您可以使用 React 搭建登录界面，其代码简洁，易于理解。

import React, { useState } from "react";

const LoginForm = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    // 发送登录请求
    fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username, password }),
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.success) {
          // 登录成功，跳转到主页
          window.location.href = "/";
        } else {
          // 登录失败，显示错误信息
          alert("登录失败，请检查用户名或密码是否正确");
        }
      })
      .catch((err) => {
        console.error(err);
        alert("登录失败，请重试");
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">登录</button>
    </form>
  );
};

export default LoginForm;

第二步：设置后端登录逻辑

接下来，在 Spring Boot 中设置登录逻辑。首先，我们需要创建用户表，存储用户名、密码等信息，使用 SQL Copilot 快速生成代码：

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(255) UNIQUE NOT NULL,
  password VARCHAR(255) NOT NULL
);

然后，编写登录接口：

@PostMapping("/login")
public ResponseEntity<String> login(@RequestBody LoginRequest loginRequest) {
    User user = userRepository.findByUsername(loginRequest.getUsername());
    if (user == null || !user.getPassword().equals(loginRequest.getPassword())) {
        return ResponseEntity.badRequest().body("登录失败，请检查用户名或密码是否正确");
    }

    // 生成 JWT 令牌
    String token = jwtUtil.generateToken(user);

    return ResponseEntity.ok(token);
}

第三步：双端共享 JWT

双端登入的重点在于取得JWT授权码，并且能够透过JWT授权码，取得对应的使用者数据。利用 JWT 这个第三方库，我们可以很简单的达到这种效果。

import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTVerificationException;

public class JwtUtil {
    private static final Algorithm ALGORITHM = Algorithm.HMAC256("secret");
    private static final JWTVerifier VERIFIER = JWT.require(ALGORITHM).build();

    public static String generateToken(User user) {
        return JWT.create()
                .withClaim("id", user.getId())
                .withClaim("username", user.getUsername())
                .sign(ALGORITHM);
    }

    public static User verifyToken(String token) {
        try {
            var decodedJwt = VERIFIER.verify(token);
            return new User(
                    decodedJwt.getClaim("id").asInt(),
                    decodedJwt.getClaim("username").asString()
            );
        } catch (JWTVerificationException e) {
            return null;
        }
    }
}