사이드 프로젝트로 여러가지를 구현 해보다가 소셜로그인 구현의 정리를 위해서 이 글을 작성하게 되었다.

웹과 앱에서 회원가입 기능을 구현하기 위해서는 소셜로그인과 휴대폰 본인 인증이 거의 필수로 이루어지고 있는데 이를 간단하게 구현하는 방법에 대해서 정리를 해 보겠다.

카카오 로그인 구현

https://developers.kakao.com/docs/latest/ko/getting-started/app

먼저 카카오에서 제공하는 REST API를 사용하기 위해서는 자신의 앱을 등록해야한다.

공식문서에 나와있는 앱 등록하기를 통해서 자신의 앱을 등록하면 되는데 출시된 앱이 아닌 로컬로 테스트를 원해서 테스트 앱(?)을 등록해도 허용이 된다.

이런식으로 사용할 플랫폼을 선택하고 앱키를 받아서 자신의 프로젝트 안에 숨겨서 넣으면 되는데 보통 env파일 안에 넣어두고 하드코딩 하지않고 사용을 한다. 🛎️ (카카오 로그인을 구현하기 위해서는 REST API키가 필요하다!)

앱 등록이 끝났다면 나의 웹 페이지 url를 등록해야한다. 등록된 url에서만 API요청이 가능하니 필수부분이다.

본인은 로컬에서 테스트를 해보기 위해서 임으로 로컬호스트 주소를 등록했다.

💡 도메인 설정부분 아래에 있는 Redirect URL도 함께 등록 해줘야하는데 이것은 카카오 로그인에 성공하고 난 이후에 사이트의 url을 어디로 이동할지를 정하는 것이라고 생각하면 된다.

여기까지 완료했다면 API를 요청하기전 준비 단계는 끝이 난것이다!

이후에 auth.js 페이지에 화면 버튼을 만들어준다. 각 버튼의 이미지는 사이트에서 제공하는 이미지를 이용하여서 만들어 주었고 Link 태그를 이용하여서 주소에 url을 입력 해 주었다.

Auth.js 메인페이지

        <div style={{bottom: 0,position:'absolute',display:'flex',justifyContent:'center',alignItems:'center',width:'100%'}}>
            <div >
                    <Link href={KAKAO_AUTH_URL}>  
                        <div width="100%">
                            <img src="/kakao_login_medium_narrow.png" alt="Kakao Login" />
                        </div>
                    </Link>
                    <Link href={NAVER_AUTH_URL}>  
                        <div width="100%">
                            <img src="/btnG_완성형.png" alt="Naver Login" height="50px"/>
                        </div>
                    </Link>
            </div>
        </div>

Url 저장 페이지

본인이 설정한 사이트 도메인으로 url을 설정 해야한다..!!

// 이 URL이 카카오 버튼을 클릭했을 때 이동하는 URL 
const KAKAO_REDIRECT_URI = 'http://localhost:3000/auth/kakao/callback'
export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&scope=account_email`

// Naver URL 
const NAVER_REDIRECT_URL = 'http://localhost:3000/auth/naver/callback'
const STATE = 'false'
export const NAVER_AUTH_URL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${NAVER_CLIENT_ID}&state=${STATE}&redirect_uri=${NAVER_REDIRECT_URL}`

url을 다른 페이지로 분리하여서 참조하는 형식으로 하였으며 각각 페이지의 발급받은 key를 넣어줘한다

이후에 버튼을 클릭하면 각각 kakao와 naver 로그인 페이지로 이동하게 되며 naver로그인 처럼 이후에 로그인을 누르고 아이디 체크가 완료되면 로딩 에니메이션을 넣어서 메인페이지로 이동전에 로드 되고 있다는 것을 인지 시켜준다.

네이버 로그인 완료페이지

const NaverLogin = () => {
    
    useEffect(()=>{
        const NAVER_CODE = new URL(window.location.href).searchParams.get('code')
        //파라미터로 받아온 네이버 url code를 서버로 보내주고 토큰을 받으면 검사 후 
		  메인페이지로 이동하고 이후에 할 행동을 작성하면 된다.
        // Router.push('/')
    },[])

    return( 
    <>
        {<LoadingCircle/>}
    </>)
}

스피너 참고용

const LoadingSpinner = () => {
  return (
      <>
    <div className="spinner-container">
      <div className="spinner"></div>
      <style jsx>{`
                    .spinner-container {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100vh;
                    }
                    .spinner{
                        border: 4px solid rgba(0, 0, 0, 0.1);
                        border-top: 4px solid #3498db;
                        border-radius: 50%;
                        width: 40px;
                        height: 40px;
                        animation: spin 1s linear infinite;
                    }
                    @keyframes spin {
                        0% {
                          transform: rotate(0deg);
                        }
                        100% {
                          transform: rotate(360deg);
                        }
                      }
                  `}</style>
    </div>
    </>
  );
};

카카오와 네이버 로그인을 구현 해 보았는데 기본적으로 회원가입을 할 시에는 휴대폰인증이나 소셜로그인을 기능이 필수적으로 필요하기때문에 실무에서도 적용할 수 있다고 생각하며 크게 어려웠던 부분은 없었던 것 같다.