TIL_230420

어제 이야기를 나눴던 부분인데 나는 아래의 블로그를 참고해 소셜 로그인을 구현하고 로컬에서 email이 저장되는 것을 확인했다. 그런데 프론트엔드에서는 back end와 직접적 통신을 안하는데 어떻게 정보를 가져가냐고 해당 로직이 잘못됐다고 한다.
이 블로그에서 소셜 로그인 버튼이 back end와 연결해주는 부분이라고 생각했는데
해당 내용을 읽었는데 뭐가 잘 못 돼서 그렇게 말하는건지 이 블로그를 제대로 안 읽었는지 모르겠다.

프론트 설명은 한 페이지 반이 되는 내용이다

https://deeplify.dev/back-end/spring/oauth2-social-login#%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%B2%84%ED%8A%BC

[Spring Boot] OAuth2 소셜 로그인 가이드 (구글, 페이스북, 네이버, 카카오)

http://localhost:8080/oauth2/authorization/{provider-id}?redirect_uri=http://localhost:3000/oauth/redirect

위와 같은 url이 설정된 소셜로그인 버튼을 누른 후 서비스 제공자 별로 백엔드에 요청

redirect_uri는 인증이 완료된 후, 백엔드 API에 접근할 수 있는 Access Token을 쿼리스트링으로 받을 수 있는 프론트엔드 페이지

<template lang="pug">
</template>

<script>
import { mapMutations, mapActions } from 'vuex'

export default {
  created () {
    // 컴포넌트 렌더링이 되었을 때,

    // 쿼리스트링으로부터 토큰을 획득
    const token = this.$route.query.token
    console.log('token', token)

    // 토큰이 존재하는 경우, Vuex Store에 토큰을 저장한다.
    if (token) {
      this.setToken(token)
      this.fetchUser()
    }

    // 토큰이 있던 없던, 루트 페이지로 이동한다.
    this.$router.replace('/')
  },
  methods: {
    ...mapActions(['fetchUser']),
    ...mapMutations(['setToken'])
  }
}
</script>

# 백엔드 --Redirect--> 프론트엔드
http://localhost:3000/oauth/redirect?token={jwt-token}

소셜 로그인 요청에 파라미터로 같이 넣어주었던 redirect_uri에 쿼리스트링을 추가해 백엔드에서 프론트엔드로 토큰을 전달해준다.(나는 해당 내용을 header Authorization에 token을 넣어주는 로직으로 변경했다.)

프론트엔드에서 받은 토큰을 저장한 후, 백엔드 API 요청 시 헤더에 토큰을 추가하여 API를 사용할 수 있습니다.

로그인 후 FE에서 처리할 데이터가 없는 것 같은데 내가 잘 몰라서 그러는 걸까 아직 헷갈린다

나는 그런 로직을 안 쓰고 성공했기에 더 이해가 안 된다 프론트 로직에 대해서도 더 공부하고 싶은데 프론트 블로그에 첨부된 프론트의 git hub를 읽어도 알 수가 없으니 좀 답답하다 백엔드 실력을 늘리면서 프론트도 공부해야겠다.