강의

N
챌린지

멘토링

N
클립

커뮤니티

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ベース権限処理、ソーシャルログイン連携まで一つずつ実践しながら習得できます。

（4.6）受講レビュー 13件

受講生 156名

難易度 初級

受講期間 無制限

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

学習した受講者のレビュー

学習した受講者のレビュー

4.6

5.0

오일중

100% 受講後に作成

こんにちは。返信もほとんどすぐにいただけますし、講義も長すぎず適度で、とても良かったです。ありがとうございました！

5.0

east0321

61% 受講後に作成

ログインについて簡単にアプローチできました。ログイン処理について気になる方は、この講義を見ると良いと思います。コード自体だけ提供されて、どのようなメカニズムかだけ分かっても、この程度の価格は悪くないと思います。

5.0

이탁곤

61% 受講後に作成

初めてReactをやるのですが、親切に一歩一歩教えてくれて良かったです。間違える部分は編集してほしいという惜しさがあります。時は金なりですから...

受講後に得られること

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

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

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

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

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

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

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

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

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

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

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


こんな方におすすめです

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

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

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

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

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

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

スクリーンキャプチャ 2025-07-08 220532

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

  • Spring Securityの設定

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

  • ユーザー権限（Role）による分岐処理

  • Refresh TokenをHttpOnly Cookieとして管理

スクリーンキャプチャ 2025-07-08 220619

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

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

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

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

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

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

受講前の注意

✅実習環境

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

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

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

  • フロントエンド: React 18

学習資料

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

スクリーンキャプチャ 2025-07-08 220707

こんな方に
おすすめです

学習対象は
誰でしょう？

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

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

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

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

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

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

  • Java + Spring Boot 基本構造 理解

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

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

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

こんにちは
です。

520

受講生

59

受講レビュー

13

回答

4.5

講座評価

3

講座

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

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

カリキュラム

全体

31件 ∙ (4時間 55分)

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

受講レビュー

全体

13件

4.6

13件の受講レビュー

  • jovision003071님의 프로필 이미지
    jovision003071

    受講レビュー 5

    ∙

    平均評価 5.0

    5

    32% 受講後に作成

    • jj33115님의 프로필 이미지
      jj33115

      受講レビュー 4

      ∙

      平均評価 5.0

      5

      32% 受講後に作成

      • mightytony님의 프로필 이미지
        mightytony

        受講レビュー 1

        ∙

        平均評価 4.0

        4

        74% 受講後に作成

        ソーシャルログイン部分の説明が不足しているようです

        • hwlee0214님의 프로필 이미지
          hwlee0214

          受講レビュー 1

          ∙

          平均評価 5.0

          5

          32% 受講後に作成

          • kjhpro1587719님의 프로필 이미지
            kjhpro1587719

            受講レビュー 1

            ∙

            平均評価 5.0

            5

            32% 受講後に作成

            ￥1,561

            neneeeの他の講座

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

            Spring BootとReactで学ぶ超簡単REST API掲示板作り강의 썸네일

            Spring BootとReactで学ぶ超簡単REST API掲示板作り

            neneee

            Spring BootとReact.jsで超簡単掲示板を手軽に構築する実践講義！この講義は、理論は少なめに、実習に集中して素早く完成させるウェブアプリケーション開発過程を盛り込んでいます。

            입문

            입문

            Spring Boot, react.js, JPA

            Spring BootとReactで学ぶ超簡単REST API掲示板作り강의 썸네일

            Spring BootとReactで学ぶ超簡単REST API掲示板作り

            neneee

            React.js + Node.js LoL戦績検索サイト作成강의 썸네일

            React.js + Node.js LoL戦績検索サイト作成

            neneee

            この講義はRiot Games APIを活用し、React.jsとNode.jsを用いた「リーグ・オブ・レジェンド戦績検索サイト」を実際に作ってみる実践中心の講義です。 受講生は基本的なAPIの使い方から、フロントエンド(React.js)とバックエンド(Node.js, Express.js)の連携、戦績データの視覚化、そしてop.ggスタイルのUI実装まで、プロジェクトを段階的に追うことで実習を通じて自然に学ぶことができます。 複雑な理論よりも、コードを中心に「実際に真似して作る」ことを通じて、迅速に成果物を体験できます。

            입문

            입문

            React, Node.js, api

            React.js + Node.js LoL戦績検索サイト作成강의 썸네일

            React.js + Node.js LoL戦績検索サイト作成

            neneee

            似ている講座

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

            ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API강의 썸네일

            ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API

            sir24is

            Webでメディア（ビデオ、オーディオ）を扱う方法！！ もう難しくありません。 一つ一つ 따라しながら 배우는 MediaStream API と WebRTC

            초급

            초급

            React, Java, Web API

            ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API강의 썸네일

            ウェブで扱うメディア - ビデオ通話を作りながら学ぶMediaStream API

            sir24is

            SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)강의 썸네일

            SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

            dodocoding

            FirebaseのSQL版！Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます！

            초급

            초급

            Next.js, supabase, React

            SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)강의 썸네일

            SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

            dodocoding

            ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

            ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

            aftercamp

            Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

            중급이상

            중급이상

            React, react-usememo, Tech Interview

            ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

            ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

            aftercamp

            フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）강의 썸네일

            フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

            John Ahn

            このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

            초급

            초급

            Clone Coding, Node.js, React

            フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）강의 썸네일

            フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

            John Ahn

            Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)강의 썸네일

            Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)

            pyhub

            Python/Djangoを使ったウェブサービス開発の基礎をしっかりと固めましょう。Djangoの学習には時間がかかりますが、繰り返しの開発の中で皆さんの生産性を最大化できます。皆さんの想像を現実のものにしてください。

            초급

            초급

            Python, Django, React

            Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)강의 썸네일

            Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)

            pyhub

            Spring BootとAWSでバックエンドサービスを一通り完成させる강의 썸네일

            Spring BootとAWSでバックエンドサービスを一通り完成させる

            apiece

            Spring Boot、MySQL、Docker、AWS EC2、RDSでバックエンドサービスの一連のサイクルを完成させます。 アプリケーションのデプロイを通じて達成感を得て、API開発時に現場でサーバー開発者が直面する問題とその解決法を扱います。

            초급

            초급

            AWS, MySQL, Docker

            Spring BootとAWSでバックエンドサービスを一通り完成させる강의 썸네일

            Spring BootとAWSでバックエンドサービスを一通り完成させる

            apiece

            カカオ、Google SNSログイン（springboot3, vue3）강의 썸네일

            カカオ、Google SNSログイン（springboot3, vue3）

            bradkim

            SpringBootを活用して、カカオ、Googleログインを実装します。JWTトークンベースのログインが実装されます。Vue3を通じて簡単な画面を構成します。

            초급

            초급

            OAuth, oauth2, JWT

            カカオ、Google SNSログイン（springboot3, vue3）강의 썸네일

            カカオ、Google SNSログイン（springboot3, vue3）

            bradkim

            フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2강의 썸네일

            フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2

            hackurity01

            React で作成された Web サービスのパフォーマンスを測定し、より高速で効率的に最適化する方法を学びます。

            중급이상

            중급이상

            React, Chrome DevTools

            フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2강의 썸네일

            フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2

            hackurity01

            Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで강의 썸네일

            Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで

            sir24is

            様々な通信技法について学び、その違いを理解することで、最も適切な通信方法を選択し実装する能力を身につけることができます。

            입문

            입문

            JavaScript, React, Java

            Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで강의 썸네일

            Webで扱うネットワーク通信 - 基礎からHTTP、SSE、WebSocketそしてWebRTC P2P通信まで

            sir24is

            クローンコーディングで知らないこと（セキュリティ、DDD、マイクロサービス）강의 썸네일

            クローンコーディングで知らないこと（セキュリティ、DDD、マイクロサービス）

            aftercamp

            ドメイン主導開発（DDD）方式で体系的なバックエンド設計とこれをマイクロサービスに適用しましょう！

            중급이상

            중급이상

            DDD, Node.js

            クローンコーディングで知らないこと（セキュリティ、DDD、マイクロサービス）강의 썸네일

            クローンコーディングで知らないこと（セキュリティ、DDD、マイクロサービス）

            aftercamp

            React + GPT APIでAI回顧録サービス開発（ワンデイクラス）강의 썸네일

            React + GPT APIでAI回顧録サービス開発（ワンデイクラス）

            dodocoding

            1時間で終えるReactベースのGPT AIサービス 講義受講後、自分だけのAI GPT SASSソリューションを構築してみましょう。

            초급

            초급

            React, ChatGPT, JavaScript

            React + GPT APIでAI回顧録サービス開発（ワンデイクラス）강의 썸네일

            React + GPT APIでAI回顧録サービス開発（ワンデイクラス）

            dodocoding

            SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

            SpringAI + Reactで作る自分だけの感情日記サービス

            Neo

            SpringAI + Reactで作る私だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です!

            초급

            초급

            React, Kotlin, Spring Boot

            SpringAI + Reactで作る自分だけの感情日記サービス강의 썸네일

            SpringAI + Reactで作る自分だけの感情日記サービス

            Neo

            インフラ工房 - もっともらしいサービス作り강의 썸네일

            インフラ工房 - もっともらしいサービス作り

            brainbackdoor

            このプロセスは、現業と同様に、インフラストラクチャを構成し、必要な知識を学習して適用する段階に進みます。

            초급

            초급

            Network, Linux, Spring Boot

            インフラ工房 - もっともらしいサービス作り강의 썸네일

            インフラ工房 - もっともらしいサービス作り

            brainbackdoor

            レディスのすべて (feat. Node.js)강의 썸네일

            レディスのすべて (feat. Node.js)

            yongsoocho

            レディスA to Zでレディス初のスタートをしっかり！ 高校生が見ても完璧に理解できる簡単で面白いレディスのすべて

            입문

            입문

            Redis, Node.js

            レディスのすべて (feat. Node.js)강의 썸네일

            レディスのすべて (feat. Node.js)

            yongsoocho

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）강의 썸네일

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

            dakgangjung123

            React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

            초급

            초급

            React, Electron, GUI

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）강의 썸네일

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

            dakgangjung123

            [Season 2] Spring AI実戦：Multi AIエージェントシステム開発강의 썸네일

            [Season 2] Spring AI実戦：Multi AIエージェントシステム開発

            bitcocom

            Spring AI Router Pattern + RAG + MCPを活用した「インテリジェント協業」専門家エージェントチーム構築 単一エージェントを超えてアーキテクチャへ：Routerパターンとエージェント分離(Isolation)設計の定石

            초급

            초급

            Spring Boot, RAG, AI Agent

            [Season 2] Spring AI実戦：Multi AIエージェントシステム開発강의 썸네일

            [Season 2] Spring AI実戦：Multi AIエージェントシステム開発

            bitcocom

            [Season 1] Spring AI 実戦：プレミアム予約AIエージェント開発강의 썸네일

            [Season 1] Spring AI 実戦：プレミアム予約AIエージェント開発

            bitcocom

            Spring AI + JPA + MySQLを活用した「自律行動型」プレミアム予約エージェントバックエンド開発 チャットボットを超えてエージェントへ：Tool Callingとプロンプトエンジニアリングの定石

            초급

            초급

            Java, Spring Boot, backend

            [Season 1] Spring AI 実戦：プレミアム予約AIエージェント開発강의 썸네일

            [Season 1] Spring AI 実戦：プレミアム予約AIエージェント開発

            bitcocom

            誰よりも早く学習する Springboot + iOS RestAPI 掲示板作成강의 썸네일

            誰よりも早く学習する Springboot + iOS RestAPI 掲示板作成

            Neo

            誰よりも早く学ぶSpringboot + iOS RestAPI掲示板作り Springbootでサーバーを開発し、iOSで自分だけの掲示板を作ってみましょう!!

            입문

            입문

            iOS, Kotlin, REST API

            誰よりも早く学習する Springboot + iOS RestAPI 掲示板作成강의 썸네일

            誰よりも早く学習する Springboot + iOS RestAPI 掲示板作成

            Neo

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

            codecamp

            10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

            중급이상

            중급이상

            React, Next.js, cursor

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

            codecamp

            実戦ですぐに使えるElasticsearch入門（検索最適化編）강의 썸네일

            実戦ですぐに使えるElasticsearch入門（検索最適化編）

            jscode

            非専門家の立場からでも簡単に理解でき、実践ですぐに応用可能な「Elasticsearch入門」の講義を作ってみました！

            초급

            초급

            Spring Boot, Elasticsearch, devops

            実戦ですぐに使えるElasticsearch入門（検索最適化編）강의 썸네일

            実戦ですぐに使えるElasticsearch入門（検索最適化編）

            jscode