본문 바로가기

Vue.js30

[Spring Boot] 33. JWT 인증 갱신처리 (2) 이번에는 저번시간에 이어서 JWT를 통한 인증 갱신처리하는 로직을 마저 구현하겠습니다. 지난번에 알아본 전체 동작 로직을 다시 생각해 보면, 아래와 같습니다. 사용자는 Google Signin Button을 통해서 Google OAuth로 인증을 수행하고, 연결되어 있는 API로 verify를 진행하게 됩니다. 이 부분은 지난번에 구현한 부분이기 때문에 생략하기로 하겠습니다. Back-End에서는 verification이 성공적으로 끝나면, JWT를 통한 Token을 생성하는데... 기존과 다르게 2가지 Token을 생성합니다. Access Token, Refresh Token이 그것입니다. Back-End에서는 이 중에서 Refresh Token을 사용자 e-mail 주소와 함께 DBMS에 저장합니다... 2021. 4. 24.
[Spring Boot] 30. Google OAuth with JWT (2) 지난 시간에는 jjwt 0.11.2를 이용해서 jws(short for signed JWT)를 생성해서 생성결과를 확인하는 부분까지 진행했었습니다. Json Web Token은 Header, Payload, Signature... 총 3가지 부분으로 구성되며 각 항목순으로 '.'을 중간에 붙여서 최종적인 Token이 생성됨을 확인했었습니다. 그 이후에는 생성된 결과를 jwt.io의 decode page를 통해서 header와 payload의 내용을 검증도 해 보았습니다. 이번에는 아래의 그림의 절차 중에서... Token 보관 부분에 대해서 구현해 보겠습니다. 생성된 Token을 사용자에게 전달하여, Token을 개별 Storage에 저장하는 부분에 대해서 생각해보면... 생성한 Token을 사용자에게 .. 2021. 4. 19.
[Vue.js] 19. Google OAuth 2.0 사용하기 (2) 지난 시간에 이어서 Goolge OAuth 2.0을 web application에 적용하는 방법을 알아보겠습니다. 전체적인 단계는 아래의 순서로 살펴보겠습니다. Create user authorization credentials web application에 적용해서 Login / Logout 구현하기 Token 전송 및 Google API 호출 / 사용하기 Create user authorization credentials을 진행했으니, 나의 web application에서는 해당 OAuth 2.0 Client ID를 이용해서 Google OAuth를 통해 Login이 가능한 환경이 되었습니다. 제가 적용을 하려고 하는 web applicaton은 vue.js 2.9.6 입니다. 그렇다면 vue.js에.. 2021. 4. 6.
[AT] 34. 우량주 매매시점 알림 Dashboard 제작 (2) 이번에는 저번시간에 이어서 우량주 매매시점 알림 대시보드의 첫번째 줄의 두번째와 세번째 카드에 대해서 제작해 보도록 하겠습니다. 해당 카드의 모습은 아래와 같습니다. 해당 카드들은 왼쪽의 MACD와 Signal선의 Cross별 통계를 보여주는 카드와, 오른쪽의 Cross별 세부 종목 리스트를 보여주는 카드로 구성되어 있기 때문에, 한번에 다루도록 하겠습니다. 두 카드간 동작은, 왼쪽카드의 chart 내 특정 data에 대한 영역을 클릭하게되면 오른쪽 카드에 해당 대상이 자동으로 표출됩니다. 만약, 빨간색의 GC영역을 클릭하면 오른쪽에 MACD vs Signal Cross Stock List에서는 Gold Cross에 해당하는 2건의 종목이 보여지게 되고... 라임색의 Point영역을 클릭하면 오른쪽에 2.. 2021. 4. 2.