# 目次

1. はじめに
2. Spring Security と React の統合
   1. バックエンド: Spring Boot の設定
   2. フロントエンド: React の設定
3. JWT の生成と検証
4. エンドポイントの保護
   1. エンドポイントの設定
   2. ロールと権限の設定
5. React でのログイン機能の実装
   1. ログインフォームの作成
   2. トークンの保存と管理
6. セッション管理とログアウト機能
7. まとめ

## 1. はじめに

この記事では、Spring Security を使用してセキュアなバックエンドを構築し、React でフロントエンドを作成する手順について詳しく説明します。この組み合わせにより、安全で効率的なウェブアプリケーションを作成することが可能です。

## 2. Spring Security と React の統合

### 2.1 バックエンド: Spring Boot の設定

Spring Boot でアプリケーションを構築し、Spring Security を設定します。以下に基本的な設定の例を示します。

#### pom.xml に依存関係を追加

![img](/mosaic-code.jpg)

#### セキュリティ設定ファイル

![img](/mosaic-code.jpg)

### 2.2 フロントエンド: React の設定

React では、ログインフォームを作成し、ユーザーの入力を Spring に送信します。

#### パッケージのインストール

![img](/mosaic-code.jpg)

#### ログインフォームの作成

![img](/mosaic-code.jpg)

## 3. JWT の生成と検証

JWT (JSON Web Tokens) を使用して、フロントエンドとバックエンド間の認証を行います。

#### JWT の生成

![img](/mosaic-code.jpg)

#### JWT の検証

![img](/mosaic-code.jpg)

## 4. エンドポイントの保護

### 4.1 エンドポイントの設定

![img](/mosaic-code.jpg)

### 4.2 ロールと権限の設定

![img](/mosaic-code.jpg)

## 5. React でのログイン機能の実装

### 5.1 ログインフォームの作成

React 側でログインフォームを作成し、そのデータをバックエンドに送信して認証を行います。

### 5.2 トークンの保存と管理

認証が成功した場合は、トークンを localStorage や sessionStorage に保存し、認証が必要なリクエスト時にはこのトークンを使用してヘッダーに追加します。

![img](/mosaic-code.jpg)

## 6. セッション管理とログアウト機能

セッション管理は JWT トークンの有効期限を利用して行います。ログアウト時には、保存したトークンを削除します。

![img](/mosaic-code.jpg)

## 7. まとめ

Spring Security と React を組み合わせることで、強力で柔軟な認証機能を実装することができます。本記事を参考にして、自分のアプリケーションに最適なセキュリティ設定を行いましょう。 [cv:issue_marketplace_engineer]

# 目次

1. はじめに
2. Spring Security と React の統合
   1. バックエンド: Spring Boot の設定
   2. フロントエンド: React の設定
3. JWT の生成と検証
4. エンドポイントの保護
   1. エンドポイントの設定
   2. ロールと権限の設定
5. React でのログイン機能の実装
   1. ログインフォームの作成
   2. トークンの保存と管理
6. セッション管理とログアウト機能
7. まとめ

## 1. はじめに

この記事では、Spring Security を使用してセキュアなバックエンドを構築し、React でフロントエンドを作成する手順について詳しく説明します。この組み合わせにより、安全で効率的なウェブアプリケーションを作成することが可能です。

## 2. Spring Security と React の統合

### 2.1 バックエンド: Spring Boot の設定

Spring Boot でアプリケーションを構築し、Spring Security を設定します。以下に基本的な設定の例を示します。

#### pom.xml に依存関係を追加

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

#### セキュリティ設定ファイル

```java
import org.springframework.context.annotation.Bean;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .authorizeRequests()
                .antMatchers("/login").permitAll()
                .anyRequest().authenticated()
            .and()
            .formLogin()
                .and()
            .httpBasic();
    }
}
```

### 2.2 フロントエンド: React の設定

React では、ログインフォームを作成し、ユーザーの入力を Spring に送信します。

#### パッケージのインストール

```sh
npm install axios react-router-dom
```

#### ログインフォームの作成

```jsx
import React, { useState } from "react";
import axios from "axios";

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

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post("/login", { username, password })
            .then(response => {
                // トークンを保存
                localStorage.setItem("token", response.data.token);
            })
            .catch(error => {
                console.error("There was an error!", error);
            });
    };

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

export default LoginForm;
```

## 3. JWT の生成と検証

JWT (JSON Web Tokens) を使用して、フロントエンドとバックエンド間の認証を行います。

#### JWT の生成

```java
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

String jwt = Jwts.builder()
    .setSubject(authentication.getName())
    .signWith(SignatureAlgorithm.HS256, "secret")
    .compact();
```

#### JWT の検証

```java
Jwts.parser()
    .setSigningKey("secret")
    .parseClaimsJws(token)
    .getBody();
```

## 4. エンドポイントの保護

### 4.1 エンドポイントの設定

```java
@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
            .antMatchers("/api/public").permitAll()
            .antMatchers("/api/private").authenticated()
        .and()
        .addFilter(new JWTAuthenticationFilter(authenticationManager()))
        .addFilter(new JWTAuthorizationFilter(authenticationManager()));
}
```

### 4.2 ロールと権限の設定

```java
@Override
public void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth.inMemoryAuthentication()
        .withUser("user").password("{noop}password").roles("USER");
}
```

## 5. React でのログイン機能の実装

### 5.1 ログインフォームの作成

React 側でログインフォームを作成し、そのデータをバックエンドに送信して認証を行います。

### 5.2 トークンの保存と管理

認証が成功した場合は、トークンを localStorage や sessionStorage に保存し、認証が必要なリクエスト時にはこのトークンを使用してヘッダーに追加します。

```javascript
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
```

## 6. セッション管理とログアウト機能

セッション管理は JWT トークンの有効期限を利用して行います。ログアウト時には、保存したトークンを削除します。

```javascript
function logout() {
    localStorage.removeItem('token');
}
```

## 7. まとめ

Spring Security と React を組み合わせることで、強力で柔軟な認証機能を実装することができます。本記事を参考にして、自分のアプリケーションに最適なセキュリティ設定を行いましょう。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

目次

続きを読むには単価診断を受けてください（30秒）