2020-06-01 에 작성된 글입니다.
현재 OAuth2를 지원하는 많은 소셜사이트가 있는데요, 저는 그 중 카카오톡과 네이버를 이용하도록 하겠습니다.
사실 OAuth 연동은 공식 개발 문서만 봐도 충분하나, Nuxt만 그런 건지 Vue 자체가 그런 건지… 버그가 발견되어 공유를 하려 합니다.
일단, Naver부터 시작하겠습니다.
1. Naver로 로그인하기 (네아로)
시작하기 전, 애플리케이션 등록을 먼저 해 주세요.
사용 API에는 네아로를 선택해 주시고, 주소에는 로컬호스트 주소를 넣도록 하겠습니다.
OAuth 기능을 프론트엔드에서 지원할 것이기 때문에 Javascript로 연동을 시키려 합니다. 아래 공식 문서에서 튜토리얼을 확인할 수 있습니다.
이제 프로젝트에 네이버 스크립트를 import 해야 합니다. nuxt에서 추천하는 방법인 로컬 vue 파일 안에서 include 하고, 네이버 로그인하기 div도 추가하겠습니다.
그리고 도큐먼트가 로드되었을 때 네이버 로그인을 실행시켜야 하는데요, vue2까지는 ready라는 훅이 있었지만 이는 없어졌기 때문에 이를 mounted에서 실행시키도록 하겠습니다.
clientId는 내 애플리케이션 > 방금 만든 앱 > 개요 > 애플리케이션 정보 섹션에 있으니 확인해 주세요.
그리고 실행해 주세요.
naver is not defined 에러가 표출될 것입니다. 만약 표출이 되지 않는다면 페이지에서 새로고침을 해 주세요.
여기에서 헤맸는데, 확인을 해 보니 script보다 new naver를 통해서 naver를 만들어 준 부분이 먼저 호출되어 생긴 버그였습니다.
이 버그가 왜 발생한지는 모르겠지만, 이 버그를 위해서 script를 먼저 불러 줬어야 했습니다.
로컬의 created에서 불러오는 등 많은 시도를 해 보았지만 실패했고, 결국 가장 바깥쪽인 글로벌에서 include를 설정해 주었습니다. 로컬 부분에서 추가해 준 head를 삭제하고, nuxt.config.js 파일에서 스크립트를 불러오겠습니다.
그리고 실행하면, 정상적으로 실행이 되고 로그인 버튼까지 보일 것입니다.
이제 login.vue에서 추가한 callbackUrl을 설정해 줘야 하는데요, 저는 네아로 버튼 클릭 > 네이버 로그인 > login callback 페이지 > login 페이지 이 플로우로 동작하겠습니다.
네이버 개발자 사이트에서 내 애플리케이션 > 만든 앱 > API 설정 > 로그인 오픈 API 서비스 환경 섹션에서 callback URL에 로컬주소/login_callback 을 추가해 주세요.
위와 같이 login_callback.vue 파일을 추가했습니다. 로그인 정보를 불러온 후, 다시 login 페이지로 돌아가도록 하였습니다.
그리고 login.vue의 callbackUrl을 아래처럼 변경해 주세요.
callbackUrl: `${window.location.origin}/login_callback`그리고 실행해 주시면, 프로필 내용이 콘솔에 찍히는 것까지 잘 확인할 수 있을 것입니다.
내 앱 > 멤버관리 탭에 가서 네이버 아이디를 추가하면 네아로 테스트용 아이디가 추가됩니다.
위 페이지에서 네아로 - 기존 서비스 DB 가이드를 확인하여 주세요.
2. 카카오로 로그인하기
위 페이지로 가서 애플리케이션을 생성해 주세요.
위 페이지에서 javascript로 카카오 로그인하는 가이드를 볼 수 있습니다.
가이드에 적혀 있는 것처럼, sdk를 현재 프로젝트에 불러오겠습니다. naver와 동일하게 nuxt.config.js에서 불러오겠습니다.
그 다음, login 페이지에서 카카오를 실행시키겠습니다. 실행시킬 때 앱 키가 필요한데, 내 애플리케이션 > 앱 설정 > 요약정보에서 REST API 키를 가지고 와 주세요.
카카오 로그인은 로그인 페이지 > 카카오 로그인 버튼 > 카카오 로그인 페이지 > 로그인 콜백 페이지 > 로그인 페이지 이렇게 동작하겠습니다.
카카오 로그인 버튼, 카카오를 실행시키는 init 코드, initialize를 확인하는 코드, 그리고 카카오 로그인 함수를 추가해 줬습니다. 이번에도 역시 callback 페이지를 추가했습니다.
내 앱 > 만든 앱 > 카카오 로그인 에서 redirectUri를 추가해 주세요!
콘솔에 코드가 찍히는 것을 확인할 수 있습니다.
카카오는 네이버와는 다르게 접근 토큰을 가져올 수 있는 코드를 줍니다. 접근 토큰은 서버에서 가지고 와도 되고, 사이트의 보안성이 높다면 클라이언트에서 가져와도 됩니다. 저는 클라이언트에서 가져오겠습니다.
사용자의 토큰은 REST API를 통해서 가져올 수 있습니다. 아래 링크를 확인해 주세요.
그럼 콜백 페이지에 토큰을 가져오는 코드를 추가해 주겠습니다.
개발 문서에 설명 되어있는 것처럼 post로 form을 이용해서 보내 줘야 하는데, querystring을 이용했습니다.
파라미터와 헤더를 넣은 후 요청을 보내고, 성공일 경우에는 받아온 accessToken을 login 페이지에 파라미터로 보내 주겠습니다.
로그인 페이지에 Kakao에 토큰을 넣어주는 코드와, 현재 유저 프로필을 가지고 오는 코드를 추가했습니다. 콘솔을 확인하면 잘 가지고 온 것을 확인할 수 있을 것입니다.
이상입니다! 프론트엔드에서 사용자의 정보를 가지고 오는 것은 완료됐고, 이제 이것을 잘 만져서 서버 DB에 넣어 주면 됩니다.
'프론트 > Vue' 카테고리의 다른 글
| Vue2, Vue3 에서 지원되는 라이브러리를 만들어 보자 (0) | 2024.04.20 |
|---|---|
| [Nuxt3] useFetch 를 커스텀화 하기 (interceptor, type 적용) (2) | 2023.01.17 |
| [Nuxt] pwa cache 적용, version number 추가 (0) | 2022.02.06 |
| [Vue] Auth 적용, axios default header 추가, plugin 추가 (0) | 2022.02.06 |
| [vue] highcharts-vue, nuxt plugin 이용 (0) | 2022.02.06 |