Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

Spring Boot + React.js ログイン(+ソーシャル)サービスを理解するとは、 JWTベース認証およびソーシャルログイン(Kakao/Google)を含む実践型ログインシステムを直接実装しながら、 フロントエンドとバックエンドの認証フローを深く理解できるように設計された講座です。 フロントエンドはReact.js、バックエンドはSpring Bootをベースに構成されており、実際のサービス環境で使われる Access Token + Refresh Token方式、HttpOnly Cookie、Reduxを活用したユーザー状態管理、 Roleベース権限処理、ソーシャルログイン連携まで一つずつ実践しながら習得できます。

  • neneee
실습 중심
백엔드이해하기
리액트감잡기
로그인
소셜로그인
React
Node.js
REST API
Spring Boot
login

こんなことが学べます

  • Spring Boot環境での Spring Securityの設定および JWTログインの実装

  • ReactでAxiosとReduxを活用した非同期ログイン/会員登録処理

  • アクセストークン + リフレッシュトークン 構造および自動再発行ロジック実装

  • ログイン維持(自動ログイン)およびReduxステート初期化問題の解決法

  • ユーザー権限(Role)に応じたページアクセス制御および保護処理

  • ソーシャルログイン (カカオ/Google) 連携および認可コード → JWT 処理フロー

  • JWTのPayloadからユーザー情報を取り出してReduxに保存し活用する方法

  • HttpOnly クッキーによる Refresh Token セキュリティ処理およびバックエンドログアウト処理

Spring Boot & React.jsで学ぶ本格的なログイン(+ソーシャル)サービスを実装する🔐

このレッスンでは、Spring BootとReact.jsを活用してJWTベースのログインシステムソーシャルログイン(Kakao、Google)を実装します。理論よりは実習中心で講義が行われます!
フロントエンドとバックエンドの認証/認可構造を直接取り上げ、トークンベースの認証システムの全体的な流れを実践中心に理解できるように構成しました。

HttpOnly CookieAccess/Refresh Tokenの管理、自動ログインの維持権限に基づくアクセス制御
ソーシャルログインリダイレクト処理まで - 本番サービスで必要な認証ロジックを一緒に実装
初心者開発者もフロント・バックエンド認証の核心構造を体得できます。

🎯この講義はこのようなことを学びます。

  • POSTMANを使用したJWTベースのログイン/メンバーシップAPIの設計と実装

  • Spring Securityを活用したAPI認証構造の構築

  • React.jsでReduxを利用したログインステータスの管理

  • Access Token + Refresh Tokenを活用した認証/認可フロー

  • トークン満了時の自動再発行(Refresh)処理ロジック

  • ログインを維持する(自動ログイン)とログアウト処理

  • ユーザー権限(Role)に基づく管理者/一般ユーザーページブランチ

  • カカオ/Googleソーシャルログイン連携とリダイレクト処理

  • HttpOnly Cookieを活用したセキュリティ強化戦略


こんな方におすすめです

  • 本物のJWTログイン/ソーシャルログイン構造を作りたい人

  • フロントとバックエンドを直接実装し、認証フローを理解したいWeb開発者

  • トークン認証、自動ログイン、権限分岐まで経験したい方

  • 自分のログイン機能を含むサービスを自分で作ってみたい方

  • ポートフォリオにセキュリティが考慮されたログインシステムを追加したい方

このような内容を学びます。

Spring Bootを使用したログインAPIの実装

  • Spring Securityの設定

  • JWT発行および検証ロジックの作成

  • ユーザー権限(Role)による分岐処理

  • Refresh TokenをHttpOnly Cookieとして管理

React.jsを活用したユーザーインターフェースの作成

  • ログイン/会員登録ページの作成

  • Reduxを使用したログインステータスの管理

  • Axiosでログイン/会員登録/自動ログイン処理

  • 管理者専用ページアクセス制御

  • ソーシャルログインボタンUIと認可コード処理ロジック

受講前の注意

実習環境

  • オペレーティングシステム:Windows / macOS

  • 開発ツール:IntelliJ、VS Code、MySQL Workbench、PostMan

  • バックエンド: Spring Boot 3.x

  • フロントエンド: React 18

学習資料

  • ノッションリンクでお届けします!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Spring Boot + React.jsを用いたフルスタック認証構造をゼロから実装してみたい方

  • JWT認証方式とトークン構造に関する実務感覚を習得したいWeb開発者

  • カカオ/グーグル ソーシャルログインをプロジェクトに直接適用してみたい方

  • トイプロジェクト以上の認証/認可構造を実戦プロジェクトに組み込みたい方

  • フロントとバックエンド認証フローを明確に理解したいWeb開発初心者〜中級者

前提知識、
必要でしょうか?

  • Java + Spring Boot 基本構造 理解

  • React.js 基礎コンポーネント構造と状態管理(useState, useEffectなど)

  • AxiosによるAPI呼び出しの基本

  • > ただし、講義は入門者もついてこられるように段階的に丁寧に進行され、必要な部分はコードと流れを合わせて説明します。

こんにちは
です。

382

受講生

35

受講レビュー

9

回答

4.6

講座評価

3

講座

웹 개발을 하다가 게임 개발에 빠져 살고 있는 개발자 입니다!

항상 배우는 마음가짐으로!

カリキュラム

全体

31件 ∙ (4時間 55分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

6件

4.8

6件の受講レビュー

  • 용우님의 프로필 이미지
    용우

    受講レビュー 5

    平均評価 5.0

    5

    32% 受講後に作成

    • 김종진님의 프로필 이미지
      김종진

      受講レビュー 4

      平均評価 5.0

      5

      32% 受講後に作成

      • 토니님의 프로필 이미지
        토니

        受講レビュー 1

        平均評価 4.0

        4

        74% 受講後に作成

        소셜 로그인 쪽 부분 설명은 부족한 거 같습니다

        • 이현우님의 프로필 이미지
          이현우

          受講レビュー 1

          平均評価 5.0

          5

          32% 受講後に作成

          • 송한빈 (참지못해)님의 프로필 이미지
            송한빈 (참지못해)

            受講レビュー 1

            平均評価 5.0

            5

            32% 受講後に作成

            ¥1,500

            neneeeの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!