카카오 로그인 구현 - OAuth 2.0

dev_swan·2022년 3월 17일

nodejs

Nodejs

목록 보기

2/20

OAuth 2.0

정의

OAuth 2.0 프로토콜은 Third-Party 프로그램(구글 / 카카오 / 네이버 등등)에게 리소스 소유자를 대신하여 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임하는 방식을 제공합니다.

요약

간단히 말하자면 내가 어떤 프로그램 서비스를 만들었을때 회원가입 및 로그인 서비스를 구현하지 않고 구글 / 카카오 / 네이버 같은 다른 Third-Party 프로그램에게 로그인이나 개인정보관리 책임을 위임한다는 것입니다.
즉 내가 직접 개인정보를 받아 저장할 필요가 없습니다.
대신 사용자가 내가 만든 서비스를 이용하려면 다른 Third-Party 프로그램에 회원가입이 되어있어야합니다.

Oauth2.0 프로세스

출처 페이코 개발 가이드

카카오 로그인 구현

사전작업 ( feat.카카오 디벨로퍼 )

우선 카카오 디벨로퍼로 접속해서 로그인을 한후 애플리케이션에 들어가 내 애플리케이션을 추가합니다. 연습삼아 하는것이니 앱 이름은 대충 만듭시다.

이제 로그인 구현하는데 필요한 정보들을 가져와야하는데 우리가 카카오 서버로 요청을 보낼때
GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code 이런식으로 보내야해서 필요한 REST_API_KEY 와 REDIRECT_URL을 가져와야합니다.

2-1. 우선 내가 만든 애플리케이션에 들어가 REST API 키를 가져옵니다.

각각 키 들은 이런 용도로 사용된다고 합니다. 노출되지 않도록 조심합시다.

2-2. 이제 REDIRECT_URL을 가져와야 하는데 내 애플리케이션 -> 제품 설정 -> 카카오 로그인에 있습니다.
이때 활성화 설정이 OFF로 되어있을텐데 ON으로 해줘야 카카오 로그인을 할 수 있습니다.

2-3. 이렇게 두개만 가져오면 첫번째 인가 코드를 받을 준비가 끝났습니다.
위에 Oauth2.0 프로세스로 확인하면 5번까지 완료할 수 있겠습니다.
이제 Oauth2.0 프로세스의 6번을 하기위해 토큰을 요청하고 받아와야합니다.
지금까지 얻은 REST_API_KEY , REDIRECT_URL, 인가코드들만으로도 토큰을 받을수도 있지만 토큰을 발급할때 좀 더 보안을 강화하기 위해 Client Secret을 받아봅시다.
Client Secret을 받는 위치는 내 애플리케이션 -> 제품 설정 -> 카카오로그인 -> 보안 입니다.
Client Secret을 받고난후 밑에 활성화 상태를 사용함으로 변경해주어야합니다.

2-4. 마지막으로 유저의 닉네임과 프로필 사진정도는 확인할 수 있도록 내 애플리케이션 -> 제품 설정 -> 카카오 로그인 -> 동의항목에서 닉네임과 프로필 사진을 필수 동의로 바꿔줍시다.

이제 카카오 로그인을 하기위해 필요한 모든 값들을 가져왔으니 코드를 작성해봅시다.

html

테스트용이니 간단하게 카카오 버튼을 누르면 /kakao/login으로 get요청이 가도록 설정하였습니다.

인가 코드

우선 우리가 카카오 디벨로퍼에서 가져온 REST_API_KEY , REDIRECT_URL , Client Secret 을 각각 client_id , client_secret , redirect_url에 할당하였습니다.
버튼을 눌러 GET /kakao/login으로 요청이 들어오면 인가코드를 받을 수 있는 주소로 보내주었습니다.

카카오 로그인 Request URI
GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code
Host: kauth.kakao.com

버튼을 누르면 위와 같이 로그인 페이지를 응답받으면 성공입니다.
이제 ID와PW를 입력하면 아래와 같은 화면이 나오는데 서비스 가입 절차 같습니다.
또 아래쪽에 동의항목에 필수로 설정한 닉네임과 프로필 사진이 들어가있는것을 확인할 수 있습니다.
동의하고 계속하기를 누르고 인가 코드를 발급 받으면 Oauth2.0 프로세스의 5번까지 완료됩니다.

Access Token 받기

이 다음에는 인가코드를 가지고 우리가 설정한 redirect_uri로 이동되니 Oauth2.0 프로세스의 7번에 해당하는 Access Token 요청 작업을 해줍시다.
제 redirect_uri은 /kakao/test 이니 해당하는 각각 자신이 적은 redirect_uri로 라우터와 미들웨어를 만들어줍니다.
이제 토큰을 요청하는 코드를 작성하는데 토큰을 받으려면 아래와 같이 카카오에서 제시한 방법으로 요청하면 됩니다.

위와 같은 방법으로 요청한 토큰을 response에 담았으니 response에서 token 내용을 꺼내와서 확인합니다.

토큰이 잘 온것을 확인하면 성공입니다.

Access Token으로 API 호출

이제 Oauth2.0의 11번에 해당하는 Access Token으로 API를 호출하여 사용자정보 요청하는 코드를 작성해봅시다.
사용자정보를 요청하는 코드는 아래와 같이 카카오에서 제시한 방법으로 요청해줍시다.
(저는 Acces token에 대한 정보를 token으로 저장해두어서 토큰을 넣어주었습니다.)