# 目次
1. はじめに
2. Firebase Authenticationのセットアップ
   2-1. Firebaseプロジェクトの作成
   2-2. Firebase Authenticationの有効化
3. Spring BootでFirebaseと統合
   3-1. Spring Bootプロジェクトのセットアップ
   3-2. Firebase Admin SDKの導入
   3-3. 認証フローの実装
4. ReactからFirebaseを利用
   4-1. Reactプロジェクトのセットアップ
   4-2. Firebase Authenticationの設定
   4-3. ログイン画面の実装
5. フロントエンドとバックエンドの連携
   5-1. トークンの取得と検証
   5-2. 認証されたリクエストの処理
6. まとめ

# 1. はじめに
Firebase Authenticationは、ユーザー認証機能を簡単に実装できるGoogleの提供するサービスです。本記事では、Spring Bootをバックエンド、Reactをフロントエンドとして使用し、Firebase Authenticationでの認証を行う方法を解説します。これにより、ユーザーがReactアプリケーションでログインし、認証情報がSpring Bootのバックエンドに安全に伝達され、検証されます。

# 2. Firebase Authenticationのセットアップ

## 2-1. Firebaseプロジェクトの作成
まず、Firebaseのコンソールにアクセスし、新しいプロジェクトを作成します。プロジェクト名を入力し、Google Analyticsの設定を選択して、進めます。

## 2-2. Firebase Authenticationの有効化
FirebaseコンソールのAuthenticationセクションに移動し、認証方法を選択します。今回は、メールとパスワードによる認証を有効化します。「サインイン方法」タブで、Email/Passwordを選択し、有効化してください。

# 3. Spring BootでFirebaseと統合

## 3-1. Spring Bootプロジェクトのセットアップ
Spring Initializrで新しいSpring Bootプロジェクトを作成します。必要な依存関係（Spring Web, Spring Securityなど）を追加します。

## 3-2. Firebase Admin SDKの導入
Firebaseと統合するために、Firebase Admin SDKをプロジェクトに追加します。MavenまたはGradleを使用して依存関係を追加します。

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

FirebaseコンソールからサービスアカウントキーをJSON形式でダウンロードし、プロジェクトに追加します。このキーは、Firebase Admin SDKがFirebaseプロジェクトと通信するために必要です。

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

## 3-3. 認証フローの実装
Spring Securityを使用し、認証トークンの検証を行います。`FirebaseTokenFilter`を作成し、ユーザーから送信されるFirebase IDトークンを検証します。

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

# 4. ReactからFirebaseを利用

## 4-1. Reactプロジェクトのセットアップ
Create React Appを使用して、新しいReactプロジェクトを作成します。

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

## 4-2. Firebase Authenticationの設定
Firebase SDKをプロジェクトにインストールし、Firebaseの設定を追加します。

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

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

## 4-3. ログイン画面の実装
Firebase Authenticationを使用して、ユーザーがメールとパスワードでログインできるフォームを作成します。

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

# 5. フロントエンドとバックエンドの連携

## 5-1. トークンの取得と検証
Reactでログインが成功すると、FirebaseからユーザーのIDトークンを取得し、バックエンドに送信します。

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

Spring Boot側でトークンを受け取り、`FirebaseTokenFilter`で検証します。

## 5-2. 認証されたリクエストの処理
検証されたトークンを使用して、認証されたユーザーのリクエストを処理します。このとき、Spring SecurityのコンテキストにAuthenticationオブジェクトを設定することで、認証されたユーザー情報を利用できます。

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

# 6. まとめ
以上が、Spring BootとReactでFirebase Authenticationを連携するための基本的な手順です。この連携により、ユーザーはReactアプリでログインし、バックエンドのSpring Bootアプリケーションによって認証され、保護されたリソースにアクセスすることができます。Firebaseの強力な認証機能を活用することで、セキュアでスケーラブルなアプリケーションを構築できます。 [cv:issue_marketplace_engineer]

# 目次
1. はじめに
2. Firebase Authenticationのセットアップ
   2-1. Firebaseプロジェクトの作成
   2-2. Firebase Authenticationの有効化
3. Spring BootでFirebaseと統合
   3-1. Spring Bootプロジェクトのセットアップ
   3-2. Firebase Admin SDKの導入
   3-3. 認証フローの実装
4. ReactからFirebaseを利用
   4-1. Reactプロジェクトのセットアップ
   4-2. Firebase Authenticationの設定
   4-3. ログイン画面の実装
5. フロントエンドとバックエンドの連携
   5-1. トークンの取得と検証
   5-2. 認証されたリクエストの処理
6. まとめ

# 1. はじめに
Firebase Authenticationは、ユーザー認証機能を簡単に実装できるGoogleの提供するサービスです。本記事では、Spring Bootをバックエンド、Reactをフロントエンドとして使用し、Firebase Authenticationでの認証を行う方法を解説します。これにより、ユーザーがReactアプリケーションでログインし、認証情報がSpring Bootのバックエンドに安全に伝達され、検証されます。

# 2. Firebase Authenticationのセットアップ

## 2-1. Firebaseプロジェクトの作成
まず、Firebaseのコンソールにアクセスし、新しいプロジェクトを作成します。プロジェクト名を入力し、Google Analyticsの設定を選択して、進めます。

## 2-2. Firebase Authenticationの有効化
FirebaseコンソールのAuthenticationセクションに移動し、認証方法を選択します。今回は、メールとパスワードによる認証を有効化します。「サインイン方法」タブで、Email/Passwordを選択し、有効化してください。

# 3. Spring BootでFirebaseと統合

## 3-1. Spring Bootプロジェクトのセットアップ
Spring Initializrで新しいSpring Bootプロジェクトを作成します。必要な依存関係（Spring Web, Spring Securityなど）を追加します。

## 3-2. Firebase Admin SDKの導入
Firebaseと統合するために、Firebase Admin SDKをプロジェクトに追加します。MavenまたはGradleを使用して依存関係を追加します。

```xml
<dependency>
    <groupId>com.google.firebase</groupId>
    <artifactId>firebase-admin</artifactId>
    <version>8.1.0</version>
</dependency>
```

FirebaseコンソールからサービスアカウントキーをJSON形式でダウンロードし、プロジェクトに追加します。このキーは、Firebase Admin SDKがFirebaseプロジェクトと通信するために必要です。

```java
public class FirebaseInitializer {
    @PostConstruct
    public void initialize() {
        try {
            FileInputStream serviceAccount = 
                new FileInputStream("path/to/serviceAccountKey.json");
            FirebaseOptions options = new FirebaseOptions.Builder()
                .setCredentials(GoogleCredentials.fromStream(serviceAccount))
                .build();
            FirebaseApp.initializeApp(options);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
```

## 3-3. 認証フローの実装
Spring Securityを使用し、認証トークンの検証を行います。`FirebaseTokenFilter`を作成し、ユーザーから送信されるFirebase IDトークンを検証します。

```java
public class FirebaseTokenFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request,
                                    HttpServletResponse response, 
                                    FilterChain filterChain) throws ServletException, IOException {
        String authHeader = request.getHeader("Authorization");

        if (authHeader != null && authHeader.startsWith("Bearer ")) {
            String idToken = authHeader.substring(7);
            try {
                FirebaseToken decodedToken = FirebaseAuth.getInstance().verifyIdToken(idToken);
                // トークンの内容を使用して、認証コンテキストの設定
            } catch (FirebaseAuthException e) {
                e.printStackTrace();
            }
        }

        filterChain.doFilter(request, response);
    }
}
```

# 4. ReactからFirebaseを利用

## 4-1. Reactプロジェクトのセットアップ
Create React Appを使用して、新しいReactプロジェクトを作成します。

```bash
npx create-react-app firebase-auth-app
```

## 4-2. Firebase Authenticationの設定
Firebase SDKをプロジェクトにインストールし、Firebaseの設定を追加します。

```bash
npm install firebase
```

```javascript
import firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    ... // その他の設定
};

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();
```

## 4-3. ログイン画面の実装
Firebase Authenticationを使用して、ユーザーがメールとパスワードでログインできるフォームを作成します。

```javascript
import React, { useState } from 'react';
import { auth } from './firebaseConfig';

const Login = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async (event) => {
        event.preventDefault();
        try {
            await auth.signInWithEmailAndPassword(email, password);
            console.log("User logged in");
        } catch (error) {
            console.error(error.message);
        }
    };

    return (
        <form onSubmit={handleLogin}>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
            <button type="submit">Login</button>
        </form>
    );
};

export default Login;
```

# 5. フロントエンドとバックエンドの連携

## 5-1. トークンの取得と検証
Reactでログインが成功すると、FirebaseからユーザーのIDトークンを取得し、バックエンドに送信します。

```javascript
auth.currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
  // Send token to your backend via HTTPS
  // ...
}).catch(function(error) {
  // Handle error
});
```

Spring Boot側でトークンを受け取り、`FirebaseTokenFilter`で検証します。

## 5-2. 認証されたリクエストの処理
検証されたトークンを使用して、認証されたユーザーのリクエストを処理します。このとき、Spring SecurityのコンテキストにAuthenticationオブジェクトを設定することで、認証されたユーザー情報を利用できます。

```java
FirebaseToken decodedToken = // Firebaseでトークンを検証
User user = new User(decodedToken.getUid(), ...);
UsernamePasswordAuthenticationToken authentication =
        new UsernamePasswordAuthenticationToken(user, null, new ArrayList<>());
SecurityContextHolder.getContext().setAuthentication(authentication);
```

# 6. まとめ
以上が、Spring BootとReactでFirebase Authenticationを連携するための基本的な手順です。この連携により、ユーザーはReactアプリでログインし、バックエンドのSpring Bootアプリケーションによって認証され、保護されたリソースにアクセスすることができます。Firebaseの強力な認証機能を活用することで、セキュアでスケーラブルなアプリケーションを構築できます。 [![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秒）