로그인 관련 포스팅의 마지막, 소셜로그인이다. 요즘 대부분의 잘나가는 사이트에는 기본적으로 카카오나 네이버, 구글등의 아이디로 자사 서비스를 이용할 수 있는 기능을 탑재하고 있는 경우가 많다. 이런 경우 사용자로 하여금 편리함을 제공할 뿐아니라 개인적으로는 잘 만들어진 사이트일거라는 뭔지모를 느낌마저 받을 때가 있다.(나만그럴지도?) 아무튼, 오늘은 내 프로젝트에도 해당 기능을 탑재하기 위해서 사전 공부를 진행해보았다. 그럼 시작!
소셜 로그인이란?
위의 예시와 같이 일반적으로 사이트를 가입할 때 보면 해당 사이트에 직접 가입하는 경우와 카카오나 네이버 같이 대중적으로 많이 이용하는 사이트의 정보로 가입하는 경우, 2가지가 존재한다. 나만해도 실제로 카카오나 네이버를 통한 가입을 자주 하곤 하는데 가장 큰 장점으로는 사이트마다 아이디와 비번을 귀찮게 새로 설정하거나 기억하지 않아도 된다는 점이 있다. 단순히 버튼하나만 클릭했을 뿐인데 아이디, 비밀번호, 닉네임, 이메일 심지어는 핸드폰 인증까지도 새로이 다시 해주지 않아도 간편히 해당 사이트의 기능을 이용 할 수 있기 때문에 정말 많은 사람들이 자주 사용하는 기능일 것 같다. 실제로 한국소비자연맹에서 조사한 결과도 확인해 볼 수 있었다.
‘소셜로그인’ 네이버, 카카오, 페이스북 順 ::: 한국 마케팅신문사 :::
▷ 자료: 한국소비자연맹 별도의 회원가입 절차 없이 네이버나 카카오, 페이스북 등 소셜미디어(SNS) 계정을 이용해 간편하게 새로운 앱이나 웹사이트를 이용할 수 있는 ‘소셜로그인’ 사용이
www.mknews.kr
따라서 사용자와 개발자의 관점에서 소셜로그인 기능의 장점을 정리하자면 다음과 같을 것이다.
- 사용자관점 : 별다른 인증과정, 정보입력 필요없이 간편하게 회원가입할 수 있으며 사이트별로 아이디와 비밀번호를 다르게 설정하거나 기억할 필요 없이 간편하게 해당 사이트의 기능을 사용할 수 있다.
- 기업, 개발자관점 : 사용자 확인을 간소화하며 개인화를 목적으로 사용자 데이터에 더욱 안정적으로 액세스 할 수 있는 방법을 제공
소셜 로그인 적용방법
소셜 로그인의 편리함 뿐 아니라 중요성까지도 잘 알았다. 그래서 어떻게 이를 내 프로젝트에 적용할 수 있을까? 우선 이들을 활용하기 앞서 네이버 개발자 사이트 (https://developers.naver.com/main/)와 카카오 개발자 사이트(https://developers.kakao.com/) 그리고 구글 클라우드서비스 사이트(https://developers.google.com/?hl=ko)에 각각 가입을 하고 docks를 살펴보며 공부해 봤다. 참고로 소셜 로그인 API는 당연한 얘기겠지만 회사마다 조금씩 다르고 제공하는 정보도 다르기 때문에 의미있는 삽질이 많이 필요했다. 내 사이트에서 꼭 필요한 정보들은 무엇인지, 그 정보들을 해당 소셜로그인 하는 회사에서 제공해주는지를 꼭 확인해 보고 이를 적용해봐야지 그렇지 않다가는 정말 의미없는 삽질이 되버릴 수도 있으니 주의하자! (근데 사실 이들이 제공해주는 정보만으로 충분한 경우가 많긴하다)
우선 로그인 API를 쓰기 위해서 각 소셜로그인 API 제공 개발자 사이트에서 API 키와 value 값을 등록받고 로그인을 구현할 내 사이트주소를 등록해주어야한다. 각 사이트별로 초기 세팅 정보들이 해당 개발자 사이트에 잘 나와있으니 API key를 받고 내 사이트를 등록 하는 등 세팅을 먼저 해놓고 각각의 라이브러리를 install 하고 import 해서 사용한다.
구글 => yarn add passport-google-oauth20
네이버 => yarn add passport-naver
카카오 => yarn add passport-kakao
추가로 해당 라이브러리에서 Strategy를 임폴트 했을때 요구하는 모듈이 있다면 같이 install 한다.
각 소셜로그인 사이트별로 받은 clientID와 Secret을 환경변수 처리하여 입력한 뒤 어떤 정보들을 가져올지를 적어준다. 해당 변수들은 scope를 통해 가져올 수 있으며(사이트마다 scope는 적용 안되는 경우도 있더라..) 이를 라이브러리가 제공하는 Profile을 통해 원하는 정보만을 내 DB에 저장해 준다.
해당 데이터에서 받아오지 못한 정보는 임의로 하드코딩해서 DB에 저장할 수 있도록 해주었고 다음에는 이 데이터를 기존 회원가입한 데이터와 어떻게 구분해서 저장할지에 대해서 고민해봐야겠다. 좋은 방법을 찾거나 떠오르면 추가해야지!
'오늘의 공부 정리' 카테고리의 다른 글
| 28. Pagination (0) | 2022.08.23 |
|---|---|
| 27. CORS (0) | 2022.08.23 |
| 25. JWT (0) | 2022.08.21 |
| 24. Cookie, Local Storage, Session Storage (0) | 2022.08.21 |
| 23. Login process (0) | 2022.08.20 |