본문 바로가기
728x90
반응형
SMALL

Spring boot 프로젝트 기록42

CORS란? CORS는 크로스-오리진-리소스 셰어링의 약자입니다. 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해 주는 웹 보안 방침입니다. 저의 프로젝트의 애플리케이션에서 프론트엔드 서버의 도메인은 http://localhost:3000 입니다. 따라서 현재 Todo 페이지의 Origin은 http://localhost:3000 입니다. componentDidMount 함수의 fetch 부분에서 http://localhost:8080 으로 새 요청을 보내고있습니다. 이때 브라우저는 2개의 요청을 보내게 되는것입니다. 첫번째 요청은 Option에 메서드를 사용하는 요청입니다. 이 메서드는 보통 이 리소스에 대해 어떤 HTTP 메서드를 사용할 수 있는지 확인하고 싶을 때 보냅니다. OP.. 2021. 12. 17.
계정 생성 페이지구현 마지막으로 계정 생성코드를 작성해 보겠습니다.! 지금까지 TodoList를 작성하고, 로그인을 하고 로그아웃을 했지만 계정생성페이지를 만들지않아 계속 postman 을 통해서 계정을 만들어주었습니다.ㅠㅠ 계정생성이 불가능했으면 로그인 기능은 화중지병입니다. 따라서 이제 로그인, 유저에 대한 기능을 위한 계정 생성페이지를 구현해보겠습니다!! 로그인 하는 버튼 하단의 링크를 클릭해서 계정 생성 페이지로 라우팅 한 후 계정 생성 완료 시 로그인 페이지로 돌아가는 간단한 로직을 구현해 보겠습니다 계정생성 로직 ApiService에 signup 메서드를 추가해주고, 이 메서드를 이용해 백엔드의 signup 요청을 해주도록 하겠습니다. export function signup(userDTO){ return call.. 2021. 12. 16.
로그아웃과 글리치 해결 로그아웃 서비스 로그인 기능은 완료되었는데 로그아웃 기능이 현재 없습니다. 로그아웃 기능은 어떻게 만들까요? 우리는 로그인을 위해 엑세스 토큰을 로컬 스토리지에 추가했습니다. 로그아웃은 이를 반대로 해주면 됩니다. 로컬 스토리지에 존재하는 액세스 토큰을 제거하고 로그인 페이지로 리디렉트 하는것입니다. ApiService.js 비록 백엔드 서버에 요청하는 로직은 아니지만 코드관리를 위해 로컬 스토리지에 관련된 모든 것은 ApiService에 작성햬왔고 계속하겠습니다. signout 함수를 만들어보겠습니다. export function signout(){ localStorage.setItem(ACCESS_TOKEN, null); window.location.href = "/login"; } 그러나 아직 로그.. 2021. 12. 16.
액세스 토큰 저장 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 것이 저의 로직이됩니다. 백엔드에 API콜을 할 때마다 로컬 스토리지에서 액세스 토큰을 불러와 헤더에 추가해 줍니다. 첫 번째로 로그인 시 받은 토큰을 로컬 스토리지에 저장하는 코드를 작성해 보겠습니다. apiservice.js 의 로그인하는 함수를 수정해 주어야 합니다. export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { if(response.token){ //로컬스토리지에 저장 localStorage.setItem("ACCESS_TOKEN",response.token); //token이 존재하는 경우 Todo화면으로 리디렉트 w.. 2021. 12. 15.
로컬 스토리지 여기서 궁금증!!!! 과연 우리가 로그인하고, 상태값이라던가, 정보라던가, 내활동 기록들 등등이 어디에 기록될까요? 계속 DB에 왔다갔다하면서 로그인이 되어있으면 로그인관련 테이블의 로그인유무에 대한 컬럼의 row가 0, 1 로 계속 기록되는걸까요? 웹 스토리지를 이용하면 사용자의 브라우저에 데이터를 key-value 형태로 저장할 수 있습니다. 쿠키와 비슷하다고 생각하면 될것같습니다. 웹 스토리지에는 두 종류가 있습니다. 세션스토리지, 로컬 스토리지 세션 스토리지는 브라우저를 닫으면 사라지고 로컬 스토리지는 브라우저를 닫아도 사라지지 않습니다. 따.라.서, 사용자가 브라우저를 재시작할 때마다 로그인하게 하고 싶으면 세션 스토리지를, 브라우저를 재시작해도 로그인 상태를 유지하고 싶으면 로컬 스토리지를 사.. 2021. 12. 15.
로그인 페이지 구현내용 로그인 페이지 구현 메인 페이지 리디렉션 로직 구현 로그인을 위한 API서비스 메서드 작성 로그인 API서비스는 /auth/signin 이었습니다. 이 경로를 이용해 로그인하는 메서드를 ApiService에 작성해주겠습니다. export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { console.log("response : " , response); alert("로그인 토큰 : " + response.token); }); Login 컴포넌트를 수정했습니다 . Login 컴포넌트는 이메일과 패스워드를 받는 인풋 필드와 로그인 버튼으로 이뤄져 있습니다. 사용자가 이메일과 패스워드.. 2021. 12. 15.
로그인 컴포넌트 현재 프론트엔드 애플리케이션은 백엔드에 http 요청을 보냈을 때 403이 리턴되면 로그인 페이지로 리디렉트 해야합니다. 또 로그인한 후 백엔드 서비스로 부터 받은 토큰을 어딘가에 저장해 놓고 요청을 보낼 때마다 헤더에 Bearer 토큰을 지정해줘야합니다. 그래서 첫번쨰로 로그인 페이지와 리디렉션 로직을 구현해야합니다. 그러기위해서 리액트-라우터-돔 라이브러리가 필요합니다. 2021.12.14 - React-router-dom 라이브러리가 필요한 이유 React-router-dom 라이브러리가 필요한 이유 React-router-dom 라이브러리가 필요한이유 이 라이브러리가 왜 필요한지 설명전에 우리에게 익숙한 형식의 웹 애플리케이션을 살펴 보겠습니다. 우리에게 익숙한 형식의 라우팅은 다음과 같습니다 u.. 2021. 12. 14.
React-router-dom 라이브러리가 필요한 이유 React-router-dom 라이브러리가 필요한이유 이 라이브러리가 왜 필요한지 설명전에 우리에게 익숙한 형식의 웹 애플리케이션을 살펴 보겠습니다. 우리에게 익숙한 형식의 라우팅은 다음과 같습니다. 브라우저에 "어떤사이트.com"을 입력하고 들어가면 index.html 이 렌더링 됩니다. index.html은 어디서 온것일까요?? 바로 "어떤 사이트" 의 서버에서 온것입니다. 어떤사이트 주소를 렌더링 할 html 과 여타 다른 파일들을 리턴한 것입니다. 마찬가지로 어떤사이트.com/login 을 입력하고 들어가면 이 요청은 GET 요청이 되어 해당 사이트의 서버에 전달됩니다. 서버는 로그인 경로를 보고 login.html 페이지를 반환합니다. 브라우저는 이런 라우팅을 서버-사이트 라우팅 이라고 합니다... 2021. 12. 14.
패스워드 암호화 마지마긍로 패스워드를 암호화 해보겠습니다. 패스워드 암호화 부분은 스프링 시큐리티가 제공하는 BCryptPasswordEncoder의 사용을 위해 구현을 잠시 미뤄뒀었습니다. 우리가 UserController와 UserService 를 구현할 당시에는 스프링 시큐리티 디펜던시를 설정하지 않았었기 때문입니다. 이제 Userservice를 수정해줍니다. 기존의 getByCredentials 매서드를 수정해주어야합니다. public UserEntity getByCredentials(final String email, final String password, final PasswordEncoder passwordEncoder) { final UserEntity originalUser = userRepositor.. 2021. 12. 13.
TodoController에서 인증된 사용자 사용하기 지난 글들을 작성할때 , Todo 리스트에 대한 CRUD 기능을 구현할때 고정적인 아이디를 사용했습니다! 이땐 로그인 기능이 구현되지 않았어서 고정적으로 사용했었습니다. 그리고 이 기능을 아직도 사용하고있었습니다. 이제 이 메서드들이 인증된 사용자 아이디를 사용할 수 있도록 각 메서드에 userid라는 매개변수를 추가해줍시다! 우선 최초 url 매핑을 담당하는 SO부분을 수정시켜줍시다. @AuthenticationPrincipal String userId 해당 어노테이션을 이용해서 로그인되어있는 권한을 가져오는겁니다. 그리고 컨트롤러 오브젝트 단에서도 아이디를 매개변수로 받아서 해당 아이디로 셋팅하게됩니다. 그런데말입니다... userId는 도대체 누가 어떻게 String 인것을 알고 넘겨주는 걸까요? .. 2021. 12. 12.
JWT 를 이용한 인증 구현 2021.12.11 - JSON 웹 토큰 JSON 웹 토큰 서버에서 전자 서명된 토큰을 이용하면 인즈엥 따른 스케일 문제를 해결할 수 가 있습니다! 우리는 전자 서명된 토큰을 이용해 스케일 문제를 해결합니다.ㅎㅎ 그리고 이렇게 전자 서명된 토큰 uno-kim.tistory.com 구현을 위해 일단 JWT 관련 라이브러리를 디펜던시에 추가해야합니다.! implementation 'org.springframework.boot:spring-boot-starter-security' 빌드.그래들에 추가해줍시다! OncePerRequestFilter 라는 클래스를 상속해 필터를 생성해야합니다. 위 클래스는 한 요청당 한번만 실행됩니다. 따라서 한번만 인증하면 되는 우리에게 맞는 필터입니다! 위 클래스를 상속받는 J.. 2021. 12. 12.
JSON 웹 토큰 서버에서 전자 서명된 토큰을 이용하면 인즈엥 따른 스케일 문제를 해결할 수 가 있습니다! 우리는 전자 서명된 토큰을 이용해 스케일 문제를 해결합니다.ㅎㅎ 그리고 이렇게 전자 서명된 토큰 중 하나가 JSON 웹 토큰 입니다. 이것이 JWT라고 합니다. JWT는 오픈 스탠더드이고, JSON 형태로 된 토큰입니다. 토큰은 {header}.{payload}.{signature} 로 구성되어 있습니다. 각 파트의 필드가 무엇을 뜻할까요? Header typ : Type을 줄인 말로 토큰의 타입을 의미 alg : Algorith을 줄인 말로 토큰의 서명을 발행하는데 사용된 해시 알고리듬의 종류를 의미 Payload sub : Subject 를 줄인 말로 토큰의 주인을 의미, 애플리케이션에서는 사용자의 이메일이나 아.. 2021. 12. 11.
728x90
반응형
LIST

티스토리툴바