구글, 네이버, 카카오 Oauth 소셜로그인 인가코드 구현

 

 

 

 

Next.js 13 OAuth(소셜 로그인) 사용방법 정리, feat.Google/Kakao / Naver

이전 포스팅에서 소셜로그인 관련해서 next.js에서 Oauth를 NextAuth를 통해서 구현하는 방법을 정리했었다.

 

 

이번 포스팅은 인가코드를 통해서 백엔드로 토큰을 보내고 로그인을 구현하는 방법을 정리하려고 한다.

서버와 함께 인가코드를 사용해서 로그인을 구현하게 되면 단계는 이렇다.

1. SNS(구글, 네이버, 카카오 .. ) 등을 통해 clientId값으로 검증하여 인가코드를 요청한다.

2. SNS를 통해 redirect URI로 인가코드를 받게된다.

3. SNS SERVER에서 받은  코드를 캐치해 백엔드 서버로 전송한다.

4. 백엔드에서는 받은 코드를 통해 시크릿키와 함께 SNS에 확인을 진행하고 유저정보를 요청한다.

5. 이러한 단계별로 통해 유저정보를 받아오고 백엔드에서는 유저정보를 회원가입없이 받을 수 있다.

6. 이제 이러한 정보를 통해 토큰을 발급해준다.

 

방법은 어렵지 않다.

해당 SNS API 서비스 및 개발자 서버에서 먼저 CLIENT KEY, SECRET KEY ... 을 백엔드에도 검증할 수 있도록 로직을 정리해야한다.

---

구글

Google 클라우드 플랫폼

const GOOGLE_REDIRECT_URI = 'http://localhost:3000/oauth/google';

const GOOGLE_AUTH_URL =
  'https://accounts.google.com/o/oauth2/auth?' +
  `client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_KEY}&` +
  `redirect_uri=${GOOGLE_REDIRECT_URI}&` +
  'response_type=code&' +
  'scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile';
  
<SocialLoginButton
	name="google"
	onClick={() => {
        window.location.href = GOOGLE_AUTH_URL;
	}}
/>

- Redirect_URI는 따로 클라우드 플랫폼에서 설정할 수 있다.

- AUTH_URL에서 response_type에서 다른 사람들은 token을 사용한사람들도 있었는데 code로 변경하고 나서 성공했다.

- 그리고 정의한 URI에서 로그인 처리를 진행하면된다. ex) 백엔드로 보내주자

 

  const AUTHORIZATION_CODE: string = searchParams.get('code') as string;
  const parsedHash = new URLSearchParams(window.location.hash.substring(1));
  
    const { data, error } = useSWR('/auth/google', () => googleLogin(AUTHORIZATION_CODE), {
    onSuccess: () => {
      router.push('/'); // 성공시 메인이동
    },
  });

- 아까 이야기한 code 값을 들고와서 보내주어야한다. 네 끝~

 

카카오

Kakao Developers

const KAKAO_REDIRECT_URI = 'http://localhost:3000/oauth/kakao';
const KAKAO_AUTH_URI = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`;

<SocialLoginButton
	name="kakao"
	onClick={() => {
	window.location.href = KAKAO_AUTH_URI;
	}}
/>

- 여기서도 구글과 똑같다. 

 

  const searchParams = useSearchParams();
  const AUTHORIZATION_CODE: string = searchParams.get('code') as string;
  
const { data, error } = useSWR('/auth/kakao', () => kakaoLogin(AUTHORIZATION_CODE), {
    onSuccess: () => {
      router.push('/');
    },
  });

- code값을 들고와서 백엔드로 전송

 

 

네이버

네이버 로그인 API 명세 - LOGIN

const NAVER_REDIRECT_URI = 'http://localhost:3000/oauth/naver';
const NAVER_AUTH_URL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${
  process.env.NEXT_PUBLIC_NAVER_CLIENT_KEY
}&redirect_uri=${NAVER_REDIRECT_URI}&state=${Math.random().toString(36).substring(3, 14)}`;

<SocialLoginButton
	name="naver"
	onClick={() => {
		window.location.href = NAVER_AUTH_URL;
	}}
/>

- 구글, 네이버, 카카오 인가코드를 받아와서 넣는 url이 다를뿐 해당 프로세스는 똑같으니 코드만 확인하고 토큰값이 들어오는지를 잘 보면 될것 같다.

 

  const searchParams = useSearchParams();
  const AUTHORIZATION_CODE: string = searchParams.get('code') as string;
  
    const { data, error } = useSWR('/auth/naver', () => naverLogin(AUTHORIZATION_CODE), {
    onSuccess: () => {
      router.push('/');
    },
  });

 

 

 

- 아 여기서 카카오는 따로 검수요청이 없이도 잘 진행이 되었는데 네이버는 검수요청에서 거부당했다..

우선 아직 테스트 작업중이다보니 실제 배포 테스트를 진행하고 빨리 MVP를 완성한 후에 검수요청을 보내봐야할 것 같다..!

---

 

- 이번 사이드 프로젝트에서는 회원가입이 없이 Oauth를 통해서만 회원관리를 진행하려한다! 실제 개인정보가 필요하기보다는 실제 유저들의 사용경험들을 테스트하기위함이랄까... 백로그를 진행하면서 어떻게 변경될지는 모르겠다..