• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    미해결

jwt + OAuth2 문의

23.09.10 22:37 작성 23.09.11 00:25 수정 조회수 335

0

안녕하세요 현재 jwt 코드 리뷰 까지 듣고

수업 코드를 참고해 oauth2 + jwt를 만들어보고 있는데요

응답한 jwt토큰이 요청 헤더에 포함되지 않는 문제

도무지 해결하지 못해서 질문드립니다 ㅠㅠ

 

OAuth2 로그인-> loadUser에서 유저 정보를 받아 임시 세션에 저장 -> 핸들러에서 토큰 생성후 응답. 순서로 만들었습니다.

 

OAuth2User 구현체에 유저 정보 세팅해 임시 세션에 저장시켰습니다.

@Service
public class CustomOauth2UserService extends DefaultOAuth2UserService {

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {

        OAuth2User oAuth2User = super.loadUser(userRequest);

        UserEntity userEntity = new UserEntity();

        userEntity.setProvider(userRequest.getClientRegistration().getClientName());
        userEntity.setUsername(oAuth2User.getAttribute("name"));
        userEntity.setEmail(oAuth2User.getAttribute("email"));
        userEntity.setRole("ROLE_USER");

        // oAuth2User 와 userEntity 로 OAuth2User 구현체 생성
        return new DefaultOauth2User(userEntity, oAuth2User.getAttributes());
    }
}

핸들러로 넘어와 토큰을 생성하고 응답 헤더에 추가시켰습니다.

JwtProcess나 JwtVO는 선생님 코드랑 똑같이 만들었습니다.

@Component
public class Oauth2SuccessHandler extends SimpleUrlAuthenticationSuccessHandler {

    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response,
                                        Authentication authentication) throws IOException, ServletException {
  
        DefaultOauth2User oAuth2User = (DefaultOauth2User) authentication.getPrincipal();
 
        String jwtToken = JwtProcess.create(oAuth2User);

        response.addHeader(JwtVO.HEADER, jwtToken);

        getRedirectStrategy().sendRedirect(request, response, "/");

    }
}

시큐리티 설정파일입니다.

cors설정인 configurationSource도 선생님과 같습니다.

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig {

    private final CustomOauth2UserService userService;
    private final Oauth2SuccessHandler successHandler;

    @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception{
        http.headers().frameOptions().disable();
        http.csrf().disable();
        http.httpBasic().disable();
        http.cors().configurationSource(configurationSource());
        http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        http.authorizeRequests()

                .antMatchers("/user/**").authenticated()
                .antMatchers("/admin/**").hasRole("ADMIN")
                .anyRequest().permitAll()
                .and()
                .oauth2Login()
                .loginPage("/loginForm")
                .successHandler(successHandler)
                .userInfoEndpoint().userService(userService);

        return http.build();
    }

 구글 로그인 시 /로 리다이렉트는 정상적으로 됩니다.

그런데 크롬 개발자 도구를 보면 response 헤더에는 jwt토큰이 있는데

요청 헤더에는 jwt토큰이 없습니다...

 

프론트 쪽은 html 파일들만 생성했는데 혹시 자바스크립트로 뭔가 해줘야 하나요?

검색 결과들 참고해서 만들었는데 혹시 oauth2와 jwt를 합치는 방향 자체가 틀렸을까요?

 아니면 구글에서 받은 access토큰이 jwt인가요?

답변 1

답변을 작성해보세요.

0

프론트 쪽은 html 파일들만 생성했는데 혹시 자바스크립트로 뭔가 해줘야 하나요?

 

맞습니다. 프론트쪽에서 response 헤더에 있는 jwt 토큰을 자바스크립트로 저장해야 합니다.

localStorage같은 곳에 저장해두었다가

서버측으로 요청시에 모든 요청이 자바스크립트 요청(ajax)이 되어야 합니다.

그리고 요청할때 fetch(), axios(), 제이쿼리 $.ajax()를 사용하여 헤더에 jwt 를 추가해줘야 합니다.

 

일반적으로 form태그 요청이나 a태그 요청으로는 헤더 정보를 가지고 서버쪽에 요청할 수 없습니다.