Portfolio

✏️

극락이들의 CleanCode 가이드 문서입니다. ⇒ 궁금한 점이 있으면 극락(

)에게 질문해주세요!

최종적으로

request시에 header는 아래와 같이 받습니다!!


{
    "Content-Type": "application/json",
    "Authorization": "Bearer tkenmskdnfkhkjnkdnl,nasdlnalsdjlaksjd"
}

Controller에서 memberId 받기


Long memberId = SecurityUtils.getCurrentUsername();

저도 잘은 모르지만... 일단 구현해보겠오!

Base는 프로그래머스 데브코스 Security 강의 8,9,10을 참고

조금 더 확장성을 가지기 위한 OAuth2.0 코드를 아래 블로그에 첨부했습니다!!

JWT.IO

JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS).

https://jwt.io/

[Spring Boot] OAuth2 소셜 로그인 가이드 (구글, 페이스북, 네이버, 카카오)

웹 또는 앱 서비스에서 로그인을 구현하는 것은 간단하지 않은 일입니다. 로그인을 구현하기 위해서는 다양한 사전 지식들을 가지고 있어야합니다. 특히 세션이나 쿠키 등의 역할 등을 알아야하고, 보안적인 측면에서도 신경을 써주어야합니다. 하지만 로그인을 구현하기 위헤서 개발 시간을 단축시켜줄 수 있는 것이 있다면 어떨까요?

https://deeplify.dev/back-end/spring/oauth2-social-login

Spring Security Reference

This section covers a minimal Spring Security application that uses Spring Boot, Java Configuration, or XML Configuration. This section covers the minimum setup for how to use Spring Security with Spring Boot. For how to use Spring Security with Java Configuration, see Section 8.2, "Hello Spring Security (Java Configuration)".

https://docs.spring.io/spring-security/site/docs/5.2.1.RELEASE/reference/htmlsingle/

Contents

스프링 시큐리티 공식 레퍼런스를 한글로 번역한 문서입니다. 버전은 5.3.2.RELEASE 기준입니다.

https://godekdls.github.io/Spring%20Security/contents/

운용 정보

Google OAuth Login

ID : 695530895396-2382dlj9f0kqn4qkpu6aba7k9tncmaqv.apps.googleusercontent.com

PW : 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


{
	"web":{
					"client_id":"695530895396-2382dlj9f0kqn4qkpu6aba7k9tncmaqv.apps.googleusercontent.com",
					"project_id":"jungdam",
					"auth_uri":"https://accounts.google.com/o/oauth2/auth",
					"token_uri":"https://oauth2.googleapis.com/token",
					"auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs",
					"client_secret":"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",
					"redirect_uris":["http://localhost:8080/login/oauth2/code/google"]
				}
}

Naver OAuth Login

ID : 9xqCY65uGsLMlD3k6mkN

PW : R_juF1K0kT


URL: http://localhost:3000
URL: http://localhost:8080/login/ouath2/code/naver

Kakao OAuth Login

rest api Key : 69adbd38b3f50c244febf59e22e776b0

client key : 7mNPBYA37OsRXATC0wvtw31aGS2lyFbv

http://localhost:8080/login/oauth2/code/kakao

개발 정보

Google OAuth Login

Naver OAuth Login

Kakao OAuth Login

순서도

소셜 로그인 요청

백엔드로 GET “/oauth2/authorization/{provider-id}?redirect_uri=http://localhost:3000/oauth/redirect”으로 OAuth 인가 요청

Provider 별로 Authorization Code 인증을 할 수 있도록 리다이렉트 (Redirect: GET “https://oauth.provider.com/oauth2.0/authorize?…”)

리다이렉트 화면에서 provider 서비스에 로그인

로그인이 완료된 후, Athorization server로부터 백엔드로 Authorization 코드 응답

백엔드에서 인가 코드를 이용하여 Authorization Server에 엑세스 토큰 요청

엑세스 토큰 획득

엑세스 토큰을 이용하여 Resource Server에 유저 데이터 요청

획득한 유저 데이터를 DB에 저장 후, JWT 엑세스 토큰과 리프레시 토큰을 생성

리프레시 토큰은 수정 불가능한 쿠키에 저장하고, 엑세스 토큰은 프로트엔드 리다이렉트 URI 에 쿼리스트링에 토큰을 담아 리다이렉트 (Redirect: GET http://localhost:3000/oauth/redirect?token={jwt-token})

프론트엔드에서 토큰을 저장 후, API 요청 시 헤더에 Authroization: Bearer {token}을 추가하여 요청

백엔드에서는 토큰을 확인하여 권한 확인

토큰이 만료된 경우, 쿠키에 저장된 리프레시 토큰을 이용하여 엑세스 토큰과 리프레시 토큰을 재발급

OAuth2 Front → Backend


http://localhost:8080/oauth2/authorization/{provider-id}?redirect_uri=http://localhost:3000/oauth/redirect

플랫폼 별 소셜 로그인 요청 진행


http://localhost:8080/oauth2/authorization/google?redirect_uri=http://localhost:3000/oauth/redirect

http://localhost:8080/oauth2/authorization/naver?redirect_uri=http://localhost:3000/oauth/redirect

http://localhost:8080/oauth2/authorization/kakao?redirect_uri=http://localhost:3000/oauth/redirect

OAuth2 Backend → Front


http://localhost:3000/oauth/redirect?token={jwt-token}

Front Redirect Page


<template lang="pug">
</template>

<script>
import { mapMutations, mapActions } from 'vuex'

export default {
  created () {
    // 컴포넌트 렌더링이 되었을 때,

    // 쿼리스트링으로부터 토큰을 획득
    const token = this.$route.query.token
    console.log('token', token)

    // 토큰이 존재하는 경우, Vuex Store에 토큰을 저장한다.
    if (token) {
      this.setToken(token)
      this.fetchUser()
    }

    // 토큰이 있던 없던, 루트 페이지로 이동한다.
    this.$router.replace('/')
  },
  methods: {
    ...mapActions(['fetchUser']),
    ...mapMutations(['setToken'])
  }
}
</script>