함께 알아가는 IT 정보

원래 접근이 됐었는데 스포티파이 플레이어 적용하려고 메인 컨트롤러를 고치고 난 이후에 접속이 안되는 것을 확인했다. @RequestMapping("/usr/home/main") public String showMain(@AuthenticationPrincipal OAuth2User principal, Model model, OAuth2AuthenticationToken authentication) { System.err.println("===================메인페이지 접근====================="); // 토큰을 관리하고 자동으로 갱신 처리 OAuth2AuthorizedClient authorizedClient = authoriz..

메인 페이지? 대충 완성했으니까 이제 써야지 스포티파이 API jsp에 해당 코드 작성해서 일단은 플레이어가 불러와지는가 체크했다.아무 곡이나 불러와지네.그럼 이제 이걸 Lofi 장르만 가져오도록 해야되는데 이제부터가 어떻게 해야되는가이다.우선 방법을 대충 알아왔다.순서는 이렇다.OAuth2 인증 받기.엑세스 토큰 발급.시큐리티에서 토큰이 관리되니까 여기서 가져와야함.(OAuth2AuthorizedClientService을 사용해서 가져옴.)여기서 가져온 토큰 값을 다시 메인 페이지로 전달.JSP에서 템플릿에 엑세스 토큰을 js로 전달.클라이언트 측에서 전달받은 엑세스토큰을 Spotify API에게 요청.약간 이런 단계인데 대충 요약해서 말해보자면 로그인할 때 토큰 받아..

하는 와중에 또또또또또 시큐리티가 문제가 좀 있었는데,스타일을 따로 빼서 css 저장후 불러오려고 하니까 못불러와서 좀 한참 헤매다가 시큐리티가 차단하고 있는 걸 알아서 이 문제 부터 해결하고 가자.아니네, 보니까 설정은 잘 되어 있다.그래서 예전에 css어떻게 불러왔는지 깃 뒤져보니까.여기서 type="text/css"이게 빠져있었다. ㅇㅇ.. 해결.우선 그래서 메인 페이지 대충은 구현했다.여기서 유저에 구글 로그인할 때 받는 이미지를 넣을 생각이다. @Override public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException { // 기본적으로 OAuth2User 정보..

spotify API는 내가 예전에 통 번역해서(GPT 시켜서) 업로드 해 놓았다. 그거 보면서 하면 됨.우선 해당 사이트 가입해서 클라이언트 ID와 비밀번호 발급부터 받아보자.난 일단 이렇게 제출해서 받아냈다. 이제 프로젝트에 연결시켜보자. 우선 저번에 JWT할 때 환경변수는 잘 안먹는다는 것을 알았기 때문에 프로젝트 상에서 변수로 만들어서 저장해주고.(하는 김에 구글도 변수 처리 해줬다.) security: oauth2: client: registration: google: client-id: 742772456036-mvhbsvmdcmv0mjtev6sjqjjdg3t3tcfv.apps.googleusercontent.com # 구글 클라..

세션 관리와 로그아웃으로 넘어가면 된다!일단 세션 관리는 잘 된다. // 세션 관리 설정 // OAuth2 로그인 설정 .oauth2Login(oauth2 -> oauth2 .loginPage("/usr/member/login") .successHandler(oAuth2AuthenticationSuccessHandler) // 로그인 성공 후 핸들러 .defaultSuccessUrl("/usr/home/main", true) .failureUrl("/usr/mem..

뭔가 좀 꽃히면 뒤도 안돌아보고 돌진하는 스타일이라 다 만들어 놓고 깨달았는데 OAuto2부터 인증 받고 JWT를 해야되는데 이거 망한건 아닌가 잘 모르겠네;;여튼 간에 어떤 방식인지 정리부터 필요할 것 같다.사족이긴 한데 이미한걸 뭐 어떡하겠냐 일단 넣어봐야지.JWT와 OAuto2인증을 함께 사용할 때 장점OAuth2를 통해 외부 제공자의 인증을 신뢰할 수 있고,JWT를 통해 이후 요청에 대해 별도의 인증 절차 없이 사용자 인증이 가능합니다.서버가 세션을 관리할 필요가 없으니 Stateless 환경에서 유리합니다.근데 생각해보면 내 사이트는 Stateless하지는 않을 것 같단 말이지? 그럼 보안 강화를 목적에 두고 로그인을 할 때 만 JWT와 OAuto2 인증 둘 다 사용하고 이후에는 JWT는 버리고..

로컬 로그인 Session 문제 여전히 해결 안됐다.이건 내 능력 밖이라고 생각하고 그냥 버리려고 한다.소셜로그인만 사용해도 별 문제 없으니까..회원가입 페이지가 조금 아깝긴한데 그냥 버리자 이러다가 아무것도 진행못할 것 같다.그렇게 결단을 내리고,여태까지 쌓아왔던 클래스들을 지우니 마음이 좀 아팠다.(사실 속 시원했다)삭제한 클래스MemberController > doJoin - join - doLocalLogin - logout 메서드CustomUserDetails : 로컬 로그인 시 사용자의 인증 정보를 담았던 클래스CustomUserDetailsService : CustomUserDetails를 기반으로 사용자 정보를 조회하고 로컬 인증을 처리하던 서비스 클래스CustomLoginFilter : ..

이제 동시에 여러 계정이 로그인 되는 것을 막을 필요가 있었다. 기존에 사용하던 rq가 정상 작동 하지 않는 것을 보고 알아보니까이제는 security가 모든 것을 담당하게 되었다는 것을 알게되었다. 그래서 얘가 세션을 관리하게끔도 만들어줘야한다.일단은 해당 정보를 알았으니, 기본 세션 설정 코드를 시큐리티 클래스에 추가해줬다. // 세션 관리 설정 .sessionManagement(session -> session .sessionFixation().migrateSession() // 세션 고정 보호 (로그인 시 세션 새로 생성) .maximumSessions(1) ..

사실 이미 좀 진행했던 건데 안듣고 내 프로젝트 하다가 오늘은 제대로 들었다.그래서 중간부터 서술하는 점 이해 바란다.이런 식으로 하면 폴링 방식으로 0.5초마다 채팅방을 갱신한다.찔러보는 것은 나쁜건 아니지만 에너지 소모가 심하다. -> 무분별한 호출 야기를 방지하는 것이 목표.그래서 이걸 SSE 방식으로 바꾼다. (아쉬운 부분을 수정.)SSE브라우저 notify새 데이터가 들어온 것을 인식새 데이터가 들어온 것을 인식하는 것이 핵심. const sse = new EventSource("/sse/connect"); sse.addEventListener('chat__messageAdded', e => { Chat__loadMore(); }); // 최초에 한번 불러오기..

웹 페이지는 특유의 깜빡거림이 존재하는데 모바일 앱들은 보통 부드럽고 빠르게 동작한다.리액트는 모바일 앱 동작과 같은 웹을 만들 수 있고, 고품질의 웹, 복잡한 UI를 가진 앱도 깔끔하게 제작이 가능하다.물론 모바일 앱도 제작 가능하다.JS 라이브러리 중 하나. 사용자 인터페이스를 만들기 위해 사용됨.react 자습서 참고.console.clear();import React, { useState } from "https://cdn.skypack.dev/react@18";import ReactDOM from "https://cdn.skypack.dev/react-dom@18";const App = () => { //jsx (js안에서 html 작성가능.) return ( 안녕 ..