제가 활동하는 동아리 노드의 아버지께서 passport 없이 소셜로그인을 구현하신다기에 저도 한번 도전해봤습니다 😤
사실 passport로 로컬로그인빼고 구현해본적 없음ㅎㅎ 아무래도 모듈을 갖다쓰면 커스텀하는데에 한계가 있을 것 같아서 저도 모듈없이! 구현해보려고 합니다. 구현에 앞서 먼저 알아야할 개념이 있습니다. 바로 OAuth

1. OAuth 개념 알기

OAuth의 탄생 배경은 API 접근 위임에 대한 표준안이 없다는 needs에서 출발합니다! 즉, 서로 다른 서비스 A와 B가 있을때, A가 B로부터 권한을 받아서 B의 API를 사용하고 싶은 경우, 이에 대한 소통 방식이 규정되지 않았다는 것입니다 😥 이러한 문제점을 해결하고자! OAuth가 탄생하였습니다! 두둥!

OAuth 작동원리의 자세한 개념은 생활코딩에 이고잉님께서 너무 잘 설명해주셨구요. 추천추천! 저는 그림을 통해 간략히 설명하겠습니다.

그림 출처 : https://tansfil.tistory.com/60

처음 OAuth1.0이 탄생하였고, 지금은 발전된 OAuth2.0을 많이 쓰고 있습니다. 그렇다면, 1.0에 비해 2.0은 무엇이 달라졌을까요?

[1] OAuth2.0의 장점

• 모바일 어플리케이션에서도 사용이 용이해짐.
• 반드시 HTTPS를 사용하기에 보안이 강화됨.
• Access Token 의 만료기간이 생김.

[2] OAuth 2.0의 인증 방식

• Authorization Code Grant
• Implicit Grant
• Resource Owner Password Credentials Grant
• Client Credentials Grant

2. 앱 등록

우선, 카카오 개발자에서 아래와 같은 버튼을 눌러 앱을 만듭니다.

앱을 생성하면 다음과 같은 화면이 나옵니다. 설정-일반에서, REST API 키는 Client ID 가 될 것이고, 사용하는 플랫폼을 추가합니다.

다음으로, 설정-사용자관리에서 우리가 필요한 사용자의 정보를 선택합니다! 앱을 사업자등록하지 않은 경우엔 사용자 profile 빼고는 필수항목으로 지정할 수 없는 것 같습니다 😥
그리고 Redirect URI를 함께 설정합니다. 저는 로컬에서 테스트할거라서 아래와 같이 설정했습니다.

설정-고급에서 Client Secret을 설정을 ON 해줍니다.

이제 구현을 위한 준비는 끝났습니다! 다음 포스팅에서는 소셜로그인을 구현해보겠습니다 🤗