nextauth 를 활용하여 깃허브 소셜로그인 기능 만들기(고객 API)

nextauth 를 활용하여 깃허브 소셜로그인 기능 만들기(고객 API)

github 웹 페이지 이번에는 구글 소셜 로그인 리액트 측 처리를 다뤄보도록 하겠습니다. 물론 내가 깃허브에 구현한 코드와는 다르고 깔끔한 방법이니 코드를 읽을 땐 아 이렇게 구현했구나 생각하면 편합니다. 이번에는 리액트 측에서 어떠한 식으로 구글 서버로 인증 요청을 보내고 응답을 받는지 구현해보도록 하겠습니다. npx createreactapp frontendcd frontendnpm install reactoauthgooglelatest 먼저 리액트 프로젝트를 생성해주고, reactoauthgoogle 라이브러리를 설치해주도록 하겠습니다.

인가 코드 받는 방법

사용자 정보를 불러오기 위해서는 카카오 인가 코드를 받아햐합니다. 앞서 말했다시피 카카오 개발자 사이트에 등록한 리다이렉트 url 에서 인가 코드를 받을 수 있으며, 서버백엔드에 전달이 가능합니다. 혹은 프론트가 직접 토큰을 받거나, 사용자 정보를 카카오 서버로부터 받을 수가 있습니다. 카카오 서버로부터 url로 code를 받을 수 있으며, url에서 추출한 code를 변수로 저장해 백엔드에게 전달합니다.

해당 방법은 아래의 포스팅에 잘 나와있으니 참고하면 좋을 것 같다.

OAuth0 을 이용하기 위해서는.

OAuth 의 프로토콜을 이용하기 위해서는 client, 즉 우리의 서버를 Authorization Server KAKAO 에게 알려 주시기 바랍니다야 합니다. 이 절차가 이루어져야 kakao 입장에서는 저희들이 등록된 client 임을 알고 토큰을 넘겨줄 수 있는 것입니다. 또한, Redirect URI 를 지정해야 합니다. 이는 로그인 성공 시에 리디렉션 되는 엔드포인트입니다. 보안을 위해서 localhost 를 제외하고는 https 만 허용됩니다.

등록 이후에는 client id 와 secret 을 얻는다. 이는 액세스 토큰을 얻기 위해서 사용됩니다. id 는 노출되어도 상관없지만, secret 은 Authorization Server 가 권한 있는 client 인지 분간하기 위해 필요하므로 절대 노출되어서는 안됩니다.

실습 생성한 .ts 파일 내부에 예시 코드를 작성합니다.

실습 네 번째, 로그인 로그아웃 페이지 생성 및 모듈 가져오기

많이 성의가 없어보이지만 동작은 능숙한 로그인과 로그아웃을 위한 페이지 및 버튼 UI를 생성합니다. 위는 페이지라고 했지만, 활용하기에 따라서 상단 헤더의 로그인 로고 대신에 두거나 알아서 하면 됩니다. 암튼, 위와 같이 생성했다면, 이제는 에디터로 돌아와서 아래와 같이 로그인과 로그아웃에 필요한 모듈을 next-auth/react 에서 가져옵니다.

Authorization Code 전달

사용자는 카카오 인증 서버에서 해당 서버의 방식으로 로그인을 수행하고인증의 징표로 Authorization Code를 받는다.

해당 Authorization Code는 300번 대의 응답으로 보내지기 때문에사용자가 직접 서버로 Authorization Code를 전달하는 요청을 날리지 않아도미리 Client Server가 설정한 Redirect URI로 Authorization Code를 전달하는 요청을 보낸다.

이런 사실을 알고 있었기에 우리 프로젝트에서는 Redirect URI를 httplocalhost8080apiuserlogincallback으로 설정했다.

문제 해결

1. React에서 리다이렉트된 요청의 응답을 받기 위해비동기 통신 방법을 사용해서 직접 리다이렉트 요청을 하고 응답처리를 하는 것 해당 방법이면 당연히 해결 가능할 것이라 고민하고 axios를 이용해서응답을 처리해보려 했지만 라는 Origin으로는Cors 문제가 발생하여 도저히 수행할 수가 없었습니다. 해당 방법은 Cors를 해결할 수 없어서 더 이상 수행할 수 없었습니다. 2. 서버에서 쿠키에 JWT를 담아서 전달하기. 해당 방법은 리다이렉트 요청을 보내도 쿠키가 자동으로 브라우저에 저장되기 때문에 응답을 굳이 처리하지 않아도 됩니다.

하지만 절망스럽게도 쿠키는 Web Server와 API Server의 도메인이 다르면 웹 브라우저 차원에서 저장하지 않기 때문에 이것을 받기 어려워진다.

로그인 버튼 스타일 바꾸는 법

이 내용 또한 모두 에 기록되어 있습니다. GoogleLogin 컴포넌트에 type 속성을 추가할 수있습니다. 이런식으로 prop을 추가해주면 되는데 하지만 문서에 나온대로 사용해보시면 됩니다. 이런 식으로 사용해주면 됩니다. useOneTap 속성은 팝업창을 새로 띄우지 않고 현재 탭에서 로그인 가능하도록 해줍니다. Figma같은 사이트에서 이런 스타일을 사용합니다. 그외에도 여러가지 속성들이 있으니 잘 사용해보시면 좋습니다.

모두 다루기에는 많은 분량이므로 이정도만 작성하도록 하겠습니다.

자주 묻는 질문