로그인 플로우

1. 프론트엔드에서 api 요청이 아닌 a태그에 넣어주는 느낌으로 작성

   <Link href={'<http://localhost:8080/auth/google/login>'}>구글 로그인</Link>
   

   • 이유는 해당 api로 GET 요청을 보내면, 구글 로그인 페이지 url이 튀어나와서 바로 화면에 해당 주소를 띄워주게 해야함.

→ (유저가 버튼을 클릭할 경우 로그인 페이지 url을 제공

브라우저에서 구글 로그인 페이지에 접근하게됨

1. 해당 버튼 클릭시 구글 오어스 로그인 화면으로 이동
2. 구글 오어스 로그인 화면에서 구글 로그인 하면 프론트엔드의 리다이렉트 페이지로 이동함 (프론트엔드에 리다이렉트 화면을 구현해놨다고 가정하고, 해당 리다이렉트로 이동시키는 건 구글에서 세팅 해둠)
   1. 현재는 localhost/auth/google/redirect 페이지를 만들어서 테스트함. → 권한을 서비스로 전달 받음
   2. 페이지 경로는 바꿔도 되는데, 구글에서 세팅을 다시 해야해서 바꾸실 거라면 저한테 이야기해주세요.
3. 리다이렉트 페이지에서 바로 http://localhost:8080/auth/google/redirect?code=${code} api를 요청
   1. 위 url의 code는 3번에서 프론트엔드 리다이렉트 페이지로 이동하면서 쿼리 파라미터로 같이 들어옵니다. response_type = Authorization code반환 한걸 api 요청 (accessToken 발급 요청 과정)

  const getFetch = async (code: string) => {
    const response = await axios.get(`http://localhost:8080/auth/google/redirect?code=${code}`, {
      withCredentials: true,
    });
  };

1. connect.sid 이런 이름의 쿠키가 있는지 확인한다.
   1. 이 안에 세션 id가 담겨있고, cookie를 매번 요청할때마다 보내서 서버에서 해당 세션 id로 유저를 판별할 수 있다.