## Spring BootとReactでGoogle OAuthログインを実装する方法

### 目次
1. はじめに
2. 必要なツールやライブラリ
3. Google Developers Consoleでの設定
   1. Google APIクレデンシャルの取得
   2. OAuth 2.0 クライアントIDの作成
4. Spring Bootサーバーの設定
   1. Spring Securityの依存関係の追加
   2. SecurityConfigの設定
5. Reactアプリケーションの設定
   1. Reactでのライブラリ追加
   2. Googleログインコンポーネントの作成
6. アプリケーションの動作確認
7. まとめ

### 1. はじめに
Google OAuth 2.0を利用したログインは、ユーザー認証プロセスを簡素化し、第三者のアプリケーションにおいても安全なログインを提供します。このガイドでは、Spring BootとReactを使用してGoogle OAuthでのログインを実装する方法を説明します。

### 2. 必要なツールやライブラリ
- Java 17（またはそれ以降）
- Spring Boot 2.7+
- Node.js 18+とnpm
- React 18+
- mavenまたはgradle（プロジェクト管理ツール）
- Google APIクライアントライブラリ

### 3. Google Developers Consoleでの設定

#### 3.1 Google APIクレデンシャルの取得
1. [Google Cloud Platform Console](https://console.cloud.google.com/)にログインし、プロジェクトを作成。
2. 左のメニューから`APIとサービス`を選択し、`OAuth 2.0 同意画面`を設定。
3. `スコープの追加`タブで適切なスコープを設定。
  
#### 3.2 OAuth 2.0 クライアントIDの作成
1. `認証情報`から`認証情報を作成`をクリックし、`OAuthクライアントID`を選択。
2. `アプリケーションの種類`を`Webアプリケーション`として選択し、承認済みのリダイレクトURIに`http://localhost:8080/login/oauth2/code/google`を追加。
3. クライアントIDとクライアントシークレットをメモ。

### 4. Spring Bootサーバーの設定

#### 4.1 Spring Securityの依存関係の追加
**Mavenの場合：**
![img](/mosaic-code.jpg)

#### 4.2 SecurityConfigの設定
SecurityConfig.java：
![img](/mosaic-code.jpg)

### 5. Reactアプリケーションの設定

#### 5.1 Reactでのライブラリ追加
![img](/mosaic-code.jpg)

#### 5.2 Googleログインコンポーネントの作成
**LoginComponent.js：**
![img](/mosaic-code.jpg)

### 6. アプリケーションの動作確認
1. Spring Bootアプリケーションを起動し`http://localhost:8080`でアクセス。
2. Reactアプリケーションを起動し、Googleログインボタンを押して、プロセスが正しく完了することを確認。

### 7. まとめ
Google OAuthを利用してSpring BootとReactでの認証を実現することができます。これにより、ユーザーはGoogleアカウントで安全にログインでき、アプリケーションのユーザー管理が効率化されます。次回は、リフレッシュトークンの取り扱いや、ユーザデータの保存について深掘りしていきます。

**追加情報:**
リファレンス:
- [Spring Security Documentation](https://spring.io/projects/spring-security)
- [React Google Login Documentation](https://www.npmjs.com/package/@react-oauth/google)

最適な結果を得るために、セキュリティ設定を慎重に扱い、適切な権限管理を行うようにしましょう。 [cv:issue_marketplace_engineer]

## Spring BootとReactでGoogle OAuthログインを実装する方法

### 目次
1. はじめに
2. 必要なツールやライブラリ
3. Google Developers Consoleでの設定
   1. Google APIクレデンシャルの取得
   2. OAuth 2.0 クライアントIDの作成
4. Spring Bootサーバーの設定
   1. Spring Securityの依存関係の追加
   2. SecurityConfigの設定
5. Reactアプリケーションの設定
   1. Reactでのライブラリ追加
   2. Googleログインコンポーネントの作成
6. アプリケーションの動作確認
7. まとめ

### 1. はじめに
Google OAuth 2.0を利用したログインは、ユーザー認証プロセスを簡素化し、第三者のアプリケーションにおいても安全なログインを提供します。このガイドでは、Spring BootとReactを使用してGoogle OAuthでのログインを実装する方法を説明します。

### 2. 必要なツールやライブラリ
- Java 17（またはそれ以降）
- Spring Boot 2.7+
- Node.js 18+とnpm
- React 18+
- mavenまたはgradle（プロジェクト管理ツール）
- Google APIクライアントライブラリ

### 3. Google Developers Consoleでの設定

#### 3.1 Google APIクレデンシャルの取得
1. [Google Cloud Platform Console](https://console.cloud.google.com/)にログインし、プロジェクトを作成。
2. 左のメニューから`APIとサービス`を選択し、`OAuth 2.0 同意画面`を設定。
3. `スコープの追加`タブで適切なスコープを設定。
  
#### 3.2 OAuth 2.0 クライアントIDの作成
1. `認証情報`から`認証情報を作成`をクリックし、`OAuthクライアントID`を選択。
2. `アプリケーションの種類`を`Webアプリケーション`として選択し、承認済みのリダイレクトURIに`http://localhost:8080/login/oauth2/code/google`を追加。
3. クライアントIDとクライアントシークレットをメモ。

### 4. Spring Bootサーバーの設定

#### 4.1 Spring Securityの依存関係の追加
**Mavenの場合：**
```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
```

#### 4.2 SecurityConfigの設定
SecurityConfig.java：
```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;
import org.springframework.security.oauth2.client.registration.ClientRegistrationRepository;
import org.springframework.security.oauth2.client.registration.InMemoryClientRegistrationRepository;
import org.springframework.security.oauth2.client.registration.ClientRegistration;
import org.springframework.security.oauth2.client.registration.ClientRegistrations;

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests(a -> a
                .antMatchers("/", "/login/**").permitAll()
                .anyRequest().authenticated()
            )
            .oauth2Login();
    }

    @Bean
    public ClientRegistrationRepository clientRegistrationRepository() {
        return new InMemoryClientRegistrationRepository(this.googleClientRegistration());
    }

    private ClientRegistration googleClientRegistration() {
        return ClientRegistrations.fromIssuerLocation("https://accounts.google.com")
            .registrationId("google")
            .clientId("YOUR_GOOGLE_CLIENT_ID")
            .clientSecret("YOUR_GOOGLE_CLIENT_SECRET")
            .redirectUriTemplate("{baseUrl}/login/oauth2/code/{registrationId}")
            .scope("email", "profile")
            .build();
    }
}
```

### 5. Reactアプリケーションの設定

#### 5.1 Reactでのライブラリ追加
```bash
npm install @react-oauth/google
```

#### 5.2 Googleログインコンポーネントの作成
**LoginComponent.js：**
```jsx
import React from 'react';
import { GoogleLogin } from '@react-oauth/google';

function LoginComponent() {
  const onSuccess = (res) => {
    console.log("Login success:", res);
    // トークンをSpring Bootバックエンドに送信
  };

  const onFailure = (res) => {
    console.log("Login failed:", res);
  };

  return (
    <div>
      <GoogleLogin
        onSuccess={onSuccess}
        onFailure={onFailure}
      />
    </div>
  );
}

export default LoginComponent;
```

### 6. アプリケーションの動作確認
1. Spring Bootアプリケーションを起動し`http://localhost:8080`でアクセス。
2. Reactアプリケーションを起動し、Googleログインボタンを押して、プロセスが正しく完了することを確認。

### 7. まとめ
Google OAuthを利用してSpring BootとReactでの認証を実現することができます。これにより、ユーザーはGoogleアカウントで安全にログインでき、アプリケーションのユーザー管理が効率化されます。次回は、リフレッシュトークンの取り扱いや、ユーザデータの保存について深掘りしていきます。

**追加情報:**
リファレンス:
- [Spring Security Documentation](https://spring.io/projects/spring-security)
- [React Google Login Documentation](https://www.npmjs.com/package/@react-oauth/google)

最適な結果を得るために、セキュリティ設定を慎重に扱い、適切な権限管理を行うようにしましょう。 

Spring BootとReactでGoogle OAuthログインを実装する方法

目次

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