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

Name: Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する
Price: 9900 KRW
Rating: 4.5 (11 reviews)

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

（4.5）受講レビュー 11件

受講生 140名

neneee

실습 중심

백엔드이해하기

리액트감잡기

로그인

소셜로그인

React

Node.js

REST API

Spring Boot

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

受講後に得られること

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を活用したセキュリティ強化戦略

こんな方に
おすすめです

学習対象は
誰でしょう？

Spring Boot + React.jsを用いたフルスタック認証構造をゼロから実装してみたい方
JWT認証方式とトークン構造に関する実務感覚を習得したいWeb開発者
カカオ/グーグルソーシャルログインをプロジェクトに直接適用してみたい方
トイプロジェクト以上の認証/認可構造を実戦プロジェクトに組み込みたい方
フロントとバックエンド認証フローを明確に理解したいWeb開発初心者〜中級者

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

Java + Spring Boot 基本構造理解
React.js 基礎コンポーネント構造と状態管理(useState, useEffectなど)
AxiosによるAPI呼び出しの基本
> ただし、講義は入門者もついてこられるように段階的に丁寧に進行され、必要な部分はコードと流れを合わせて説明します。

こんにちは
です。

477

受講生

受講レビュー

回答

4.6

講座評価

講座

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

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

カリキュラム

全体

31件 ∙ (4時間 55分)

セクション 1．講義紹介及び開発環境構成

8件 ∙ (28分)

セクション 2．講義アンケート調査

1件

9. アンケート調査リンク

セクション 3．バックエンド - Spring Boot設定およびJWTログイン実装

9件 ∙ (2時間 2分)

10. Spring Boot プロジェクト作成 (Gradle)
07:23
11. 基本セキュリティ設定 (Spring Security)
12:00
12. 会員登録
23:25
13. ログイン単一トークン
14:40
14. ログイン AccessToken、RefreshToken
21:54
15. JWT認証フィルタークラスの作成
10:26
16. 権限ベース認可処理
16:44
17. HTTP Only クッキーの設定
13:23
18. corsの解決
02:37

セクション 4．フロントエンド - React設定およびJWTログイン実装

7件 ∙ (1時間 24分)

セクション 5．ソーシャルログイン実装（Google、Kakao）

6件 ∙ (1時間 0分)

講座掲載日:

最終更新日:

受講レビュー

全体

11件

4.5

11件の受講レビュー

jovision003071
受講レビュー 5
∙
平均評価 5.0
5
32% 受講後に作成
jj33115
受講レビュー 4
∙
平均評価 5.0
5
32% 受講後に作成
mightytony
受講レビュー 1
∙
平均評価 4.0
4
74% 受講後に作成
ソーシャルログイン部分の説明が不足しているようです
hwlee0214
受講レビュー 1
∙
平均評価 5.0
5
32% 受講後に作成
kjhpro1587719
受講レビュー 1
∙
平均評価 5.0
5
32% 受講後に作成

期間限定セール、あと06:06:24日で終了

￥1,412

11%

￥1,588

neneeeの他の講座

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

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

neneee

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

입문

Spring Boot, react.js, JPA

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

neneee

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戦績検索サイト作成

neneee

似ている講座

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

[改訂版2023-11-27] Spring Boot 3.xを利用したRESTful Web Servicesの開発

Dowon Lee

このレッスンは、Spring Bootを使用してRESTful Web Servicesアプリケーションを開発するプロセスについて学ぶことで、REST APIの設計に必要な基本的な知識を学ぶことができます。

초급

Spring Boot, REST API

[改訂版2023-11-27] Spring Boot 3.xを利用したRESTful Web Servicesの開発

Dowon Lee

Spring Bootを使用したRESTFUL APIの作成（AWS、EKS）

parkmyounghoi

初心者向けのバックエンドプログラミングWeb開発講義です。

초급

Spring Boot, REST API, restful

Spring Bootを使用したRESTFUL APIの作成（AWS、EKS）

parkmyounghoi

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

pyhub

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

초급

Python, Django, React

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

pyhub

これ一つで完結 - 32時間高品質Spring フルスタックウェブ開発

greencoding1234

聴いてみてください。講義力、引き込み力、講義の質が違います。

입문

HTML/CSS, JavaScript, JSP

これ一つで完結 - 32時間高品質Spring フルスタックウェブ開発

greencoding1234

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

ReactベースのシンプルなSNSサービスを作成しながら、REST APIとGraphQLを練習します。フロントエンド開発のためのバックエンド環境を簡単かつ簡単にする方法を紹介します。

초급

REST API, GraphQL, React

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

[コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

codecamp

1年間で300人以上の開発者を輩出した「本物の」ブートキャンプの濃縮カリキュラムです。この講義1つで、実務のジュニア開発者レベルまで成長し、フロントエンド技術スタックの活用能力と知識を得ることができます。[InflearnXコードキャンプ]は、社会、経済、教育の背景に関係なく、誰もがキャリアを積めるように準備しました :)

입문

React, Next.js, GraphQL

[コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

codecamp

チキン + ビール代でSpringAIを使ってAIサーバーを作ってみる (With ChatGPT)

Neo

SpringAIを使用してChatGPT APIを簡単に連携し、プロンプトエンジニアリングを通じてAIサーバーを開発する方法を学びます！

입문

Kotlin, Spring Boot, ChatGPT

チキン + ビール代でSpringAIを使ってAIサーバーを作ってみる (With ChatGPT)

Neo

Spring BootとReactで実装するセキュアなJWTログイン

oncoding

この講義は、最新のWebサービス環境で必須となるJWTベースのトークン認証とセキュリティ強化技法を実務中心で学習するコースです。Spring Boot 3とSpring Security 6、Reactを活用して安全なログインシステムを実装し、XSS・CSRF対応、HTTPS適用、トークン再発行及び廃棄戦略、秘密鍵安全管理などセキュリティ実務全般を扱います。また、AWSを通じたビルド・デプロイ、Redisを利用したパフォーマンス最適化など実際のサービスレベルの環境構成を実習し、講義で提供される完成プロジェクトソースコードはすぐに実務に適用できます。

중급이상

React, Java, AWS

Spring BootとReactで実装するセキュアなJWTログイン

oncoding

手につくNext.js - 移行

hajoeun

ReactからNext.js 14に移行し、ReactとNext.jsの違いを学びます。 Next.jsをより深く理解することができます！

초급

Next.js, React, vitejs

手につくNext.js - 移行

hajoeun

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

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

초급

React, Electron, GUI

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123