강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
Programming

/

Back-end

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

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

（4.9）受講レビュー 31件

受講生 223名

難易度 初級

受講期間 無制限

  • bradkim
OAuth
OAuth
oauth2
oauth2
JWT
JWT
Spring Boot
Spring Boot
Vue.js
Vue.js
OAuth
OAuth
oauth2
oauth2
JWT
JWT
Spring Boot
Spring Boot
Vue.js
Vue.js

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

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

4.9

5.0

cksdnddlek99

95% 受講後に作成

ソーシャルログインの責任分担について悩んでいましたが、講義で明確に教えてくださってとても良かったです。 質の良い講義を制作してくださってありがとうございます。

5.0

김경환

100% 受講後に作成

豊富な学習資料と質の高い講義、大変勉強になりました。 ソーシャルログイン認証の過程で、単純な検索だけでは理解に苦しんでいた最中、私が知りたかったソーシャルログインのすべてを教えてくれるこの講義を見つけたおかげで、時間が経つのも忘れて受講しました :D

5.0

몽몽

95% 受講後に作成

ソーシャルログインを実装しようと、あちこちのブログを探しながら無駄骨ばかり折っていましたが、OAuthが行われる流れに沿ってコードを作成してくださったので、とても理解しやすかったです。他の講義も受講したことがありますが、講義力とても素晴らしいです！

受講後に得られること

  • SpringBoot 3.xでのJWTトークンベースのログイン実装

  • OAuthベースの会員登録、ログイン

  • Googleログイン、カカオログインの実装とコンソール作業

1. 学習内容📕

  • Google/カカオSNSログインの実装（フロント、バックエンド）


  • 2つの実装方法によるoauthログイン

    • 方法1）フロントエンド（認可コード）、サーバー（accessトークン、ユーザー情報）方式のsnsログイン

    • 方法2）springのoauth2-clientを活用したサーバー（認可コード、accessトークン、ユーザー情報）方式のsnsログイン


  • Google、カカオコンソール作業から授業で一緒に進行

2. 技術スタックと注意事項📢

  • バックエンド

    • java17、springboot3.4ベースのrestful api開発、spring data jpa、jwtトークンログイン、mysql

  • フロント

    • html/css/js、vue3、vuetify、vue-routerなどを活用

  • 注意事項

    • 上記の技術スタックの基礎的な知識が先行すれば良いのですが、理解が不足しても授業に従うのに大きな無理はありません。

    • 特に、vueパーツは非常に少ないコード作成が行われるので無理なく従うことができます。 githubにコードも公開されているので、手軽に腹付で授業に従うことができます。

3. 授業資料📢

こんな方に
おすすめです

学習対象は
誰でしょう？

  • SNSログインを実装してみたい開発者

  • OAuthの実装経験はあるものの、構造に関する理解が不足していた人

  • OAuth実装において、バックエンドの領域とフロントエンドの領域の区分について疑問に思った開発者

こんにちは
です。

3,031

受講生

312

受講レビュー

122

回答

4.9

講座評価

9

講座

💪💪💪実務と講義の経歴を兼ね備えた専門家 💪💪💪

こんにちは、金善国（キム・ソングク、bradkim）講師です。延世大学を卒業し、大企業やスタートアップなどで8年以上ソフトウェアエンジニアとして働いてきました。現在はブートキャンプで専任講師として働いています。実務経験と講義経験を兼ね備えた講師として、皆さんに必ず知っておくべき知識を中心に分かりやすくお伝えします。

プロフィール : https://www.linkedin.com/in/seongukkim

カリキュラム

全体

20件 ∙ (6時間 36分)

講座資料（こうぎしりょう）:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

31件

4.9

31件の受講レビュー

  • wogusrla778193님의 프로필 이미지
    wogusrla778193

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    おかげでjwt + oauthログインまでの流れを理解するのにとても役立ちました!

    • yoojinleedev2252님의 프로필 이미지
      yoojinleedev2252

      受講レビュー 20

      ∙

      平均評価 5.0

      5

      30% 受講後に作成

      完走するまでファイティング

      • vidkid님의 프로필 이미지
        vidkid

        受講レビュー 7

        ∙

        平均評価 5.0

        5

        100% 受講後に作成

        とても助かりました。 ありがとうございます〜

        • kukaeden님의 프로필 이미지
          kukaeden

          受講レビュー 489

          ∙

          平均評価 5.0

          5

          60% 受講後に作成

          Spring Boot 3.0でのSpring SecurityとOAuth設定について良く学びました！特にVue3画面についての説明もしていただいて、より興味を持って進めることができたと思います。良い講義をありがとうございます！

          • didakd225197님의 프로필 이미지
            didakd225197

            受講レビュー 3

            ∙

            平均評価 5.0

            5

            95% 受講後に作成

            oauth-clientだけで実装する方法を知っていたのですが、他の方法ではこのように実装するんですね 😆😆 ありがとうございます！！

            ￥6,809

            bradkimの他の講座

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

            eksを活用したspring本番サーバーデプロイ(feat. devopsのすべて)講義サムネイル

            eksを活用したspring本番サーバーデプロイ(feat. devopsのすべて)

            bradkim

            ドメイン購入およびeksを活用したspringboot本番サーバーデプロイ、docker基礎、kubernetes基礎、aws基礎、github actionsを通じたCI/CD自動化、argocd、prometheus/grafanaなどdevops全般について学びます。

            初級

            初級

            AWS, Docker, Kubernetes

            eksを活用したspring本番サーバーデプロイ(feat. devopsのすべて)講義サムネイル

            eksを活用したspring本番サーバーデプロイ(feat. devopsのすべて)

            bradkim

            Websocket/STOMP チャット サービス (spring、vue、redis)講義サムネイル

            Websocket/STOMP チャット サービス (spring、vue、redis)

            bradkim

            Websocket/stomp、springboot を活用してチャット サービスを開発します。比較的簡単なフレームワークである vue.js を使用して、簡単な画面も構成します。redis pub/sub を使用して、マルチ サーバー拡張性設計も構成します。

            初級

            初級

            websocket, pubsub, Spring Boot

            Websocket/STOMP チャット サービス (spring、vue、redis)講義サムネイル

            Websocket/STOMP チャット サービス (spring、vue、redis)

            bradkim

            MariaDB(MySQL)のすべて - 深刻な編講義サムネイル

            MariaDB(MySQL)のすべて - 深刻な編

            bradkim

            開発初心者、バックエンド開発者、SQLD試験準備受講生など、開発者なら知っておくべきMariaDB(MySQL)のすべてを学びます。授業は、実際にDBを構築する実習中心で進められます。

            初級

            初級

            MariaDB, MySQL, sql-join

            MariaDB(MySQL)のすべて - 深刻な編講義サムネイル

            MariaDB(MySQL)のすべて - 深刻な編

            bradkim

            スピーディーに学ぶSpring Cloud基礎(MSA)講義サムネイル

            スピーディーに学ぶSpring Cloud基礎(MSA)

            bradkim

            Spring Cloudを活用したMSAサーバー構成について学習します。

            初級

            初級

            Spring Cloud, MSA, eureka

            スピーディーに学ぶSpring Cloud基礎(MSA)講義サムネイル

            スピーディーに学ぶSpring Cloud基礎(MSA)

            bradkim

            MariaDB(MySQL)のすべて - 基本編講義サムネイル

            MariaDB(MySQL)のすべて - 基本編

            bradkim

            開発初心者、バックエンド開発者、SQLD試験準備受講生など、開発者なら知っておくべきMariaDB(MySQL)のすべてを学びます。授業は、実際にDBを構築する実習中心で進められます。

            入門

            入門

            MariaDB, MySQL

            MariaDB(MySQL)のすべて - 基本編講義サムネイル

            MariaDB(MySQL)のすべて - 基本編

            bradkim

            開発者が知っておくべき Redis の基本講義サムネイル

            開発者が知っておくべき Redis の基本

            bradkim

            REDIS の基本的なデータ構造と REDIS の実務活用例を redis-cli (コマンド) 実習を通じて学びます。

            入門

            入門

            Redis, devops, database

            開発者が知っておくべき Redis の基本講義サムネイル

            開発者が知っておくべき Redis の基本

            bradkim

            実践活用のためのgit/github(feat.各種コンフリクトの解決)講義サムネイル

            実践活用のためのgit/github(feat.各種コンフリクトの解決)

            bradkim

            git/GitHubの基礎的な知識から、実務で直面する様々なコンフリクト状況に対する実践的な解決策と戦略を学びます。

            入門

            入門

            Git, GitHub, gitlab

            実践活用のためのgit/github(feat.各種コンフリクトの解決)講義サムネイル

            実践活用のためのgit/github(feat.各種コンフリクトの解決)

            bradkim

            開発者なら知っておくべき Linux (Ubuntu) 基本講義サムネイル

            開発者なら知っておくべき Linux (Ubuntu) 基本

            bradkim

            DevOpsやLinuxのエキスパートでなくても、開発者なら必ず知っておくべきLinuxの必須知識について学びます。ハンズオン形式で授業が進められます。

            入門

            入門

            Linux, ubuntu, Shell Script

            開発者なら知っておくべき Linux (Ubuntu) 基本講義サムネイル

            開発者なら知っておくべき Linux (Ubuntu) 基本

            bradkim

            似ている講座

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

            SpringAI + Reactで作る自分だけの感情日記サービス講義サムネイル

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

            Neo

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

            初級

            初級

            React, Kotlin, Spring Boot

            SpringAI + Reactで作る自分だけの感情日記サービス講義サムネイル

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

            Neo

            Vue 3 を始める講義サムネイル

            Vue 3 を始める

            captain

            Vue.jsの最新バージョンVue 3を始める方のための講座です。Vue.jsの動作原理から実務開発を行う際に知っておくべき基本概念を学びましょう。

            初級

            初級

            Vue.js, Vue 3, JavaScript

            Vue 3 を始める講義サムネイル

            Vue 3 を始める

            captain

            [最新]Vue川の終わりの王：Nuxt 3完璧マスター講義サムネイル

            [最新]Vue川の終わりの王：Nuxt 3完璧マスター

            gymcoding

            Vueベースでパフォーマンスに優れたWebをすばやく作成するのに役立つNuxtフレームワーク講義です。

            中級以上

            中級以上

            Vue.js, Nuxt.js, pinia

            [最新]Vue川の終わりの王：Nuxt 3完璧マスター講義サムネイル

            [最新]Vue川の終わりの王：Nuxt 3完璧マスター

            gymcoding

            プロジェクトで学ぶVue.js 3講義サムネイル

            プロジェクトで学ぶVue.js 3

            kossiecoder

            Vue.js 3の使い方を学び、プロジェクトに適用しながら習得するのに役立ちます。

            初級

            初級

            Vue.js, Vuex, Web Application

            プロジェクトで学ぶVue.js 3講義サムネイル

            プロジェクトで学ぶVue.js 3

            kossiecoder

            カカオの面接官が教えるMSA観点での分散トランザクションパターン講義サムネイル

            カカオの面接官が教えるMSA観点での分散トランザクションパターン

            Hong

            分散環境でデータ整合性を維持するためのSAGAトランザクション管理技法を実習中心に学習します。Spring BootとDockerを活用して3つのマイクロサービスを構成し、OrchestrationとChoreographyの2つのパターンをKafkaとMySQLで実装します。この講義を通じて分散トランザクションの動作原理、補償トランザクション設計、障害復旧処理など実務ですぐに活用可能な核心概念を習得できます。

            初級

            初級

            Java, Spring, MySQL

            カカオの面接官が教えるMSA観点での分散トランザクションパターン講義サムネイル

            カカオの面接官が教えるMSA観点での分散トランザクションパターン

            Hong

            ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)講義サムネイル

            ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)

            hodolman888675

            単にアプリケーションを 1 つ作成するだけではありません。Spring Boot を活用したバックエンドから Vue.js モダン フロントエンド スタックを連携したサービスの完成まで、A から Z までご紹介します。

            中級以上

            中級以上

            Spring Boot, JPA, AWS

            ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)講義サムネイル

            ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)

            hodolman888675

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

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

            neneee

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

            初級

            初級

            React, Node.js, REST API

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

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

            neneee

            誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成講義サムネイル

            誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成

            Neo

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

            初級

            初級

            JavaScript, React Native, Java

            誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成講義サムネイル

            誰よりも早く学ぶSpringboot + ReactNative RestAPI掲示板作成

            Neo

            誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り講義サムネイル

            誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り

            Neo

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

            入門

            入門

            React, Kotlin, TypeScript

            誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り講義サムネイル

            誰よりも速く学ぶSpringboot + NextJS RestAPI掲示板作り

            Neo

            誰よりも早く学ぶSpringboot + React RestAPI掲示板作り講義サムネイル

            誰よりも早く学ぶSpringboot + React RestAPI掲示板作り

            Neo

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

            初級

            初級

            React, Java, Kotlin

            誰よりも早く学ぶSpringboot + React RestAPI掲示板作り講義サムネイル

            誰よりも早く学ぶSpringboot + React RestAPI掲示板作り

            Neo

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

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

            greencoding1234

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

            入門

            入門

            HTML/CSS, JavaScript, JSP

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

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

            greencoding1234

            SpringBootでのWebSocket、STOMP講義サムネイル

            SpringBootでのWebSocket、STOMP

            Hello World

            1時間だけ投資すれば、SpringBootでWebSocket、STOMP関連の核心事項をすべて学ぶことができます。

            初級

            初級

            Spring Boot, stomp-websocket, Java

            SpringBootでのWebSocket、STOMP講義サムネイル

            SpringBootでのWebSocket、STOMP

            Hello World

            [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

            本当のjOOQ！ Type Safe SQL with Java講義サムネイル

            本当のjOOQ！ Type Safe SQL with Java

            sdm32851630

            jOOQでType SafeしたSQLの強力さを体験してください！

            中級以上

            中級以上

            Java, jooq, SQL

            本当のjOOQ！ Type Safe SQL with Java講義サムネイル

            本当のjOOQ！ Type Safe SQL with Java

            sdm32851630

            1時間でチキンコンボ代で学ぶサーバーデプロイ講義サムネイル

            1時間でチキンコンボ代で学ぶサーバーデプロイ

            Neo

            チキンコンボの値段でSpring Bootを 手動デプロイ -> Dockerでデプロイ -> Github Action CI/CD の順にデプロイ過程を学びます!

            初級

            初級

            AWS, Docker, Spring Boot

            1時間でチキンコンボ代で学ぶサーバーデプロイ講義サムネイル

            1時間でチキンコンボ代で学ぶサーバーデプロイ

            Neo

            実戦ですぐに使えるElasticsearch入門（検索最適化編）講義サムネイル

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

            jscode

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

            初級

            初級

            Spring Boot, Elasticsearch, devops

            実戦ですぐに使えるElasticsearch入門（検索最適化編）講義サムネイル

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

            jscode

            誰よりも早く学習する Springboot + iOS RestAPI 掲示板作成講義サムネイル

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

            Neo

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

            入門

            入門

            iOS, Kotlin, REST API

            誰よりも早く学習する Springboot + iOS RestAPI 掲示板作成講義サムネイル

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

            Neo

            インフラ工房 - もっともらしいサービス作り講義サムネイル

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

            brainbackdoor

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

            初級

            初級

            Network, Linux, Spring Boot

            インフラ工房 - もっともらしいサービス作り講義サムネイル

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

            brainbackdoor

            [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

            The 10x AI-Native Developer: 会社でAIを使って圧倒的な成果を出す方法

            dingcodingco

            AIはもはや選択ではなく生存の問題です。 3日かかっていた開発を30分に短縮し、反復業務はAIに任せてあなたはより重要な問題解決に集中してください。 理論ではなく実務ですぐに使えるAIネイティブ開発法で、会社で「AIが得意な開発者」として認められる確実な方法をお教えします。

            初級

            初級

            Spring Boot, Next.js, AI

            The 10x AI-Native Developer: 会社でAIを使って圧倒的な成果を出す方法

            dingcodingco