함께 알아가는 IT 정보

하는 와중에 또또또또또 시큐리티가 문제가 좀 있었는데,스타일을 따로 빼서 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) ..

웹 페이지는 특유의 깜빡거림이 존재하는데 모바일 앱들은 보통 부드럽고 빠르게 동작한다.리액트는 모바일 앱 동작과 같은 웹을 만들 수 있고, 고품질의 웹, 복잡한 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 ( 안녕 ..

전 포스팅에서 구글 로그인 자체는 성공했다. firebase에서 인증을 통과 받았다는 뜻. 콘솔에서는 구글계정에서 받아온 데이터가 확실히 남은 것을 확인했으니 이제 이 데이터를 JAVA 프로젝트로 보내주면 된다.// 로그인 성공 후 사용자 이메일을 가져와서 서버로 요청을 보내는 코드onAuthStateChanged(window.auth, (user) => { if (user) { const email = user.email; // 서버로 Firebase 유저 정보를 요청 fetch(`/firebaseUser?email=${email}`) .then(response => response.text()) .then(data =>..

이제 진짜 본론으로 드디어 도달할 수 있게 되었다.일단 내가 생각했을 때, 구글로그인을 구현해가는 방법이나 순서를 생각의 흐름대로 나열해보자.Thinking Flow난 로컬 유저와 소셜유저를 아예 나눌 생각이다. 그래서 이메일로 로그인하게끔 만든거고, 테이블의 소셜 두개를 따로 둬서 해당 두개의 값이 다 null이라면 로컬인거고 둘 중 하나가 채워져있다면 소셜로그인인것. 두개는 스포티파이와 구글이다. 일단 난 구글에 집중해야되니, 스포티파이는 빼놓자고.그렇다면 어떻게 해야할까. 소셜로그인의 작동 방식은 조금만 생각해도 유추가 된다. 일단은 로그인 시도, 일치하는 정보가 없다? 그러면 바로 회원가입을 자동으로 처리 이후에 다시 로그인을 시켜준다. 이게 일반적인 소셜로그인의 방식일 것이다.그럼 이제 대충 그..

자 이제 정보를 firebase에 가져오는 것 까지 성공했으니, 내 프로젝트까지 이 데이터를 받아와서 가공하고 사용해야되는 단계다.OAuto2 인증을 사용할거고, 처음엔 다들 하니까 이유가 있겠거니 였는데 이런식으로 접근하면 안되고 이유를 명확히 알아냈다.크게 딱 두가지인데 보안과 편의성 때문이다. 가져온 정보를 리소스를 통해서 직접적으로 보는게 아닌 간접적으로 가져올 수 있기 때문이다.편의성을 위해 또 돌아가야한다니 아이러니하다..아무튼 한번 해보자.앞서 한번 더 말하는데 일단 해보는거라 정답이 아닐 확률이 굉장히 높다 흐름만 봐라..나중에 성공하면 어떻게 했는지 올리겠다.일단 의존성 추가가 제일 처음 해야할 일이다. org.springframework.boot spring-boot-star..