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

/

Web Development

Spring BootとReactで実装するソーシャルログイン

スプリングブートとReactを活用し、通常ログインとソーシャルログインを統合実装する方法を学びます。 MPAとSPA環境の両方でログインシステムを構築し、JWTとOAuth2認証を実習します。 実務にすぐに適用可能なサンプルプロジェクトを通じて、全体のログインフローを理解し実装することができます。

  • oncoding
소셜로그인
spa
jwt
스프링부트
react
Java
Spring Boot
JPA
React
Spring Security

こんなことが学べます

  • 完成度の高いログインシステムを自分で実装できます

  • 実務ですぐに使えるWebプロジェクトを完成できます。

  • 一般ログインとソーシャルログインが統合されたWeb認証システムを直接実装し運用できます。

  • Google、Naver、Kakao、GitHubなどのソーシャルログインサービスと直接接続、連携コード作成が可能です。

  • MPAとSPAの違いを理解し、それぞれに適した認証処理方式を自由に実装できます。

  • ReactでJWTを活用してユーザー認証フローを設計・開発することができます。

  • Spring Security を 実践プロジェクトレベルで 正確に 設定し 応用できます。

  • 多様な技術を統合した実践プロジェクト経験を通じて、ポートフォリオや実務にすぐに適用可能なソースコードを確保できます。

📢講義の紹介

急速に変化するウェブ技術環境の中で、
実務にすぐに適用できるログインシステムを学ぶために、このレッスンを作成しました。
Spring BootとReactを活用して、通常のログインとソーシャルログインの統合を実装する方法を学ぶことが目標です。
OAuth2、JWT、Spring Securityなどを直接適用し、MPAとSPA環境の両方で認証システムを構築します。
受講後は、本番プロジェクトにすぐに利用可能なログイン機能を自分で実装できるようになります。

🎯受講対象

  • スプリングブートとリアクトベータを身につけたWeb開発者のうち、ログイン機能を本番で実装してみたい方

  • ソーシャルログイン(OAuth2)とJWTベースの認証をプロジェクトに直接適用したい中級レベルの開発者

  • ログイン機能を含むサイドプロジェクトまたはポートフォリオを準備しているジュニア開発者

  • フロントエンド・バックエンドを連携した認証フローの全体構造を理解したいフルスタック指向開発者

  • 実務に活用できる最新技術(Spring Boot 3、Spring Security 6、Reactなど)を学びたい方

※この講義は完全な入門者よりは、基本的なJava、スプリング、リアクト使用経験のある方に適しています。

フレームワークに慣れていない場合は、事前学習をお勧めします。

講義の魅力ポイント

  • Google、ネイバー、カカオ、フラッグハブまで、合計4つのソーシャルログインを一度に統合実装します。

  • 通常のログインとソーシャルログインが1つの認証システムとして機能するコード構造を実践を通して直接体験することができます。

  • MPA(タイムリーフ)とSPA(リアクト)環境の両方でログイン機能がどのように実装されるかを比較学習することができ、さまざまな実務状況に備えることができます。

  • 最新の技術スタック(Spring Boot 3、Spring Security 6、JWT、Reactなど)に基づいて、実務に直接書き込むことができるプロジェクトコードを提供します。

  • 簡単なコードに従うことを超えて、OAuth2プロバイダの登録から本番実装までの全プロセスを詳細に案内します。

ログイン機能一つで終わらない、統合的思考と実戦感覚を育てることができる講義です。

📘講義で学ぶ内容

この講義は理論ではなく実践中心で構成されており、実務ですぐに使用できる認証システムの実装能力を育成することに重点を置いています。

🛠主な学習内容

  • 一般ログイン機能の実装(ID/パスワードベースのログイン)

  • グーグル、ネイバー、カカオ、フェイトハブ4種ソーシャルログイン連動および統合処理

  • ソーシャルログインを使用するためのOAuth2プロバイダの登録方法と設定方法

  • Spring Securityの設定と認証フローのカスタマイズ

  • MPA(タイムリーフベース)Webアプリケーションでのログイン処理

  • SPA(Reactベース)アプリケーションでJWTトークン認証方式を実装する

  • JPA+MySQL連携によるユーザー情報の保存と認証処理

  • ログイン統合処理ロジック構造化と実際のプロジェクトで利用可能なコードの記述

理論対実践比

  • 実習中心の約80%、不可欠な理論は、流れを理解するのに必要なだけ説明します。

  • シンプルなコンセプト配信よりも、直接実装し、身体に慣れる方法で構成されています。

この講義を通じて、受講生は単純なログイン機能ではなく、実務レベルの認証システムを最初から最後まで実装できる能力を備えています。

💬予備受講生のためのQ&A

Q. ソーシャルログインの実装が初めてなのについて行けますか?

A. この講義は実習中心で、ソーシャルログインに必要なプロバイダ登録から連動まで全過程をじっくりご案内します。

ただし、基本的なスプリングブート、リアクト使用経験があれば、よりスムーズにフォローできます。

Q. スプリングやリアクトについてよく分からないのに受講しても大丈夫でしょうか?

A.完全入門者のための講義ではなく、Java文法、スプリングブート基本構造、リアクト基礎はご存知であることをお勧めします。

講義は個々の技術を説明するよりも統合実装に焦点を当てていますので、初心者なら事前学習をお勧めします。

Q. どのログイン機能まで実装しますか?

A. 一般ログイン(ID/パスワード) + Google、ネイバー、カカオ、FitHubソーシャルログインを統合実装します。

MPAとSPA環境でそれぞれログイン機能がどのように機能するかを実践することで体験できます。

Q. 講義を聞いた後、どのような結果が得られますか?

A. 実際のサービスに活用できる完成度の高いログインシステムを実装でき、

そのソースコードをポートフォリオや実務にすぐに活用できます。

Q. 練習のために別に準備する環境がありますか?

A.講義で使用するツールとバージョン(Spring Boot 3、React、MySQLなど)をご案内し、

ローカル開発環境に合わせてインストールとセットアップの手順も案内します。

📌受講前の注意事項

  • 実習中心講義であり、スプリングブート、リアクト、JPA、スプリングセキュリティなどは基礎知識のある方におすすめです。

  • MPAとSPAの2つのプロジェクトを完成した形で提供し、分量が多く、講義の台本ベースで進行されます。

  • 一部のナレーションは不自然かもしれませんが、本番コードとフローに焦点を当てました。

  • ソーシャルログインに加えて、Web開発全般(Spring Bootベース)を扱うので、復習や整理にも最適です

  • 講義はOAuth2理論よりも実践的な実装に焦点を当てており、必要な補完は今後の更新予定です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Spring Boot と React を活用した統合ログインシステムを実装したい Web開発者

  • 一般ログインとソーシャルログインを同時に扱うプロジェクトを構成してみたい中級開発者

  • JWTベースの認証フローをSPAで実装したいフロントエンド開発者

  • スプリングセキュリティを実際に活用してみたいバックエンド開発者

  • Spring Boot 3、Spring Security 6 に基づいた実務例を学びたい方

  • トイプロジェクト以上のログイン機能を実装したい開発者

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

  • Java 文法

  • Spring Boot の基本構造の理解

  • JPA 概念と簡単な使用経験

  • 基本的な Spring Security 使用経験 (選択的だが有利)

  • React 基本 文法 および 構造 理解

  • ReactでAPIを呼び出す方法

  • OAuth2認証の基本フロー (簡単な概念レベルで十分)

  • JWT (JSON Web Token)に関する基本概念

こんにちは
です。

215

受講生

4

受講レビュー

8

回答

5.0

講座評価

1

講座

カリキュラム

全体

90件 ∙ (13時間 11分)

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

受講レビュー

全体

4件

5.0

4件の受講レビュー

  • zxcqew327554님의 프로필 이미지
    zxcqew327554

    受講レビュー 3

    平均評価 4.7

    5

    30% 受講後に作成

    • angelwan0013850님의 프로필 이미지
      angelwan0013850

      受講レビュー 62

      平均評価 4.6

      修正済み

      5

      100% 受講後に作成

      Social login Kakao Naver Google GitHub. Understood. Very helpful.

      • oncoding
        知識共有者

        Thank you.

    • yoonvs1238240님의 프로필 이미지
      yoonvs1238240

      受講レビュー 3

      平均評価 5.0

      5

      100% 受講後に作成

    • dengo님의 프로필 이미지
      dengo

      受講レビュー 13

      平均評価 4.5

      5

      72% 受講後に作成

      This seems like the first time this year. A lecture that makes me feel I should leave a review. I followed along, visually seeing the logic through comments, and could experience the overall flow, including SPA. Also, because the instructor's words were fully reflected in the subtitles, I could write them down in my notes and review them, further increasing my understanding. If the instructor releases another lecture, I would take it without hesitation. Thank you for the high-quality lecture.

      • oncoding
        知識共有者

        Despite many shortcomings, I will continue to develop to help expand knowledge, however little. Thank you.

    ¥7,232

    似ている講座

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