[OAuth] 구글로그인 (2)

구글로그인 구현 순서

1. 인가코드 발급
2. 로그인토큰 발급
3. 사용자 정보 받기

1. 인가코드 발급

• 해당 코드는 구글 로그인창을 띄우는 코드이며 구글 로그인 버튼을 클릭했을 때 실행되게끔 작업하였다. client_id와 같은 개인정보는 next.config로 환경변수 처리하였다.

  https://accounts.google.com/o/oauth2/v2/auth
  ?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
  &redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URL}
  &response_type=code
  &scope=email profile

구글 로그인창 호출 필수 파라미터

• client_id: 구글 클라우드에서 생성한 클라이언트 아이디
• redirect_uri: 구글 클라우드에서 설정한 리다이렉트 URL 이다. 내 프로젝트의 경우 http://localhost:3000/auth/google로 설정하였다.
• response_type: 'code'로 고정이다.
• scope: 토큰 발급 이후 유저 정보에서 어떤 항목을 조회할것인지 작성해준다. 내 프로젝트의 경우 email과 profile만 조회하였다.
  
  

2. SSR로 로그인토큰,프로필 조회

사용자가 페이지 진입전 서버단에서 먼저 처리하기 위한 SSR

export const getServerSideProps = async ({ query }) => {
  
  // GOOGLE 토큰 정보 조회
  const getTokenInfo = await axios({
    method: 'POST',
    url: 'https://oauth2.googleapis.com/token',
    data: {
      grant_type: 'authorization_code',
      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
      client_secret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
      redirect_uri: `${process.env.NEXT_PUBLIC_REDIRECT_URL}/google`,
      code: query.code,
      access_type: 'offline',
      prompt: 'consent',
    },
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  });
}

// 응답 성공 시 출력 정보
{
	access_token: 'asdfasdfasdfasdf'
    expires_in: '30230'
    scope: 'asdfasdf'
    token_type: 'Bearer'
    id_token: 'asdfasdf'
}

구글 토큰 정보 조회 request

• grant_type: 'authorization_code' 고정
• client_id: 구글 클라우드에서 생성한 클라이언트 아이디
• client_secret: 구글 클라우드에서 생성한 보안비밀번호
• redirect_uri: 구글 클라우드에서 설정한 리다이렉트 URL
• code: 구글로그인후 받아온 쿼리의 인가코드
  
  

// GOOGLE 프로필 정보 조회
const getProfile = await axios({
      method: 'GET',
      url: 'https://www.googleapis.com/oauth2/v3/userinfo',
      params: {
        access_token: getLoginToken.data.access_token,
      },
    });

// 응답 성공 시 출력 정보
{
  sub: '1354315',
  name: 'asd',
  given_name: 'asd',
  family_name: 'asd',
  picture: 'https://lh3.googleusercontent.com/a/ACg8ocLcWGDZOGv560HyQIOatWSlqKZ4KA552xISUHACPpvIXsVrhQ=s96-c',
  email: 'eksh2@gmail.com',
  email_verified: true
}