react-jwt-spring

 

 

 

 

빌드패스하고

 

cross origin 

자바스크립트공격 브라우저가막는다 내 스프링이 막는게 아니라

 

근데 

 

Authorization Code Grant Type 방식

 

리소스 주인

클라이언트

권한 서버

리소스 서버

 

 

 

 

리액트에서 구글 로그인버튼 누를 때

근데 a태그로 만들면 응답도 못받고 페이지도 넘어가면서 지금 페이지 사라짐.

리액트 화면

<a

APP.JS 사라지고 구글 로그인 페이지에서 진행하고나서 다시 돌아올 수가 없.

그럼 응답을 스프링 서버로 응답. 그래도 APP.JS <a는 페ㅐ이비는 사라짐

 

그래서 이방식은 안된다.

 

 

크리덴셜 방법으로 

Clinet Credentails Grant

 

 

구글 로그인 버튼 누르고 fetch요청 그럼 그 화면에서 그 부분만 비동기 통신으로 화면바뀌고 응답으로 then(res)에서 회원 프로필을 받을 수 있다. 이 res를 통째로 내 스프링서버에 Map<Stirng,  Object> 으로 받기. 그러면 Dto 안만들어도 됨.

 

 

여기서 내가 필요한 정보만 구성해서 이걸 jwt토큰으로 만들어서 User객체 하나 만들어서 Athentication객체 (세션 저장) 만들어서 넣어줘야한다 (이유는 권한 처리하기 위해서 필요하다) 다시 응답해줄거임.

그럼 다시 리액트에서 then으로 jwt토큰으로 받음. 그럼 브라우저 localstorage에 token저장 cookie에 저장 하지마요!!

 

그리고 요청시마다 토큰을 헤더에 가지고 요청하면 된다.

그래야 권한처리를 스프링에서 이걸로 한다. Authentication객체만들어줘야 한다.

옵션 : jwt token을 세션에 저장해놓고 필요할때 마다 꺼내써도 된.

 

외부에서 내 스프링에 header에 없이 요청들어오면 권한필터에서 걸려서 header있는지 검사 없으면 아무것도 안함. header에 토큰 있으면 토큰을 검증

 

토큰 검증에 실패하면 아무것도 안함.    돌려보냄?

성공하면 해당 토큰에있는 유저네임으로 클레임에서 꺼내고 그거랑 디비에 유저내임이랑 비교

Authentication 객체 만들고 session에 짚어 넣고 다시 필터 탑니다.

 

권한 없이 403

 

 

 

비쥬얼 스튜디오 코드

 

yarn creat rect-app jwtoauth-app

 

그리고  jwtoauth-app 폴더로 열기 (폴더로 이동하거나)

 

index.js에서 

 

리액트 크리덴셜방식

안드로이드 안드에서 자체에서 하고 

 

구글 로그인 설치하기

 

npm install react-google-login

 

구글 api 콘솔에서

새 프로젝트 만들기

 

 

OAuth Client ID 를 구글 로그인 버튼 속성 clientId의 값으로 넣어주세요.

 

 

fetch보다 axios 가 좋아요 ui도 넘겨줌.

 

스프링 서버에 응답받은 컨트롤러 만들기 token생성

 

스프링은 jsp랑 다르게 content type적어야한다. 메세지 컨버터에게 알려줘야 한다.

 

엑시오스는 오버라이드 되어있음

url

bodydata

config