Vue.js 소셜 로그인

안녕하세요.

 

이번 시간에는 vue.js에서 소셜 로그인하는 방법에 대해 알아보겠습니다.

 

소셜 로그인으로는 카카오톡, 페이스북, 구글 로그인을 해보겠습니다.

 

각 개발자 사이트에 가보면 가이드가 나와있지만 SPA에 바로 적용시키기는 쉽지 않습니다. 기존의 SSR(서버 사이드 렌더링)을 기준으로 문서화가 되어 있기 때문인데요.

 

저도 삽질 좀 하다가 각 로그인 별 vue 모듈이 있더라고요, 그래서 다운로드하고 코드를 보면서 참고했습니다. 

 

혹시 안되시는 분 있으면 vue-facebook-login, vue-kakao-login, vue-google-login 다운로드하셔서 코드 참고하시면 될 거 같습니다. 

 

 

1) 페이스북

먼저 페이스북 개발자 사이트에 앱 메뉴에 들어갑니다.

 

https://developers.facebook.com/docs/apps/

앱 개발 - 문서 - Facebook for Developers

 

그런 다음 내 앱에 들어가 앱 만들기를 눌러 진행합니다.

 

facebook 로그인을 클릭하고 저희는 웹이기 때문에 플랫폼으로 웹을 선택합니다.

 

여러분들의 사이트 url를 입력하고 

 

해당 코드를 복사해 놓습니다.

 

(위에서 appId와 version은 여러분들의 설정에 맞게 입력하시면 됩니다.)

 

appId는 여러분들이 받은 appId, version은 '저는 v2.5'로 입력합니다.

 

그런 다음 Facebook.js 파일을 만들어 facebook 관련 코드를 입력합니다.

 

저는 Init이라는 함수를 만들어 facebook 로그인 초기 설정에 관한 코드를 넣었습니다. appId는 환경 변수를 만들어 관리합니다.

 

FB라는 변수를 만들어 관련 정보를 설정하는데 저는 window에 객체에 FB를 만들어 관리하겠습니다.

 

나중에 Init 함수를 created 단에서 불러오겠습니다. 

 

그런 다음 Login 함수로 만들어 줍니다. 해당 코드는 facebook 개발자 페이지에 잘 나와있습니다. FB.login sdk라고 치면 찾을 수 있습니다.

 

scope에서 허락받을 데이터를 정합니다. 저는 public_profile과 email로 이름, id, 프로필 사진과 이메일에 대한 동의를 구합니다.

 

로그인에 성공하면 accessToken을 주는데 이 accessToken은 앞으로 Facebook의 다른 api 요청을 할 때 필요한 토큰입니다. 

 

클라이언트에서는 쿠키에 저장돼 로그인 이후 알아서 해결해줍니다.

 

서버에 facebook api 요청을 하기 위해서는 accessToken을 저장했다가 요청을 할때 같이 보내줘야 합니다. 

 

accessToken은 이후 로그아웃할때도 필요합니다.

 

다음으로 프로필 정보를 가져오는 api 요청을 합니다. fields에 받고 싶은 데이터를 적습니다.(이때 scope를 통해 사용자에게 허락받은 데이터만 가져올 수 있습니다.)

 

api 요청에 성공하면 해당 유저에 대한 프로필 정보를 가져오고 이를 제가 express에서 만든 login 라우터로 보냅니다.   

 

accessToken을 자동으로 관리해주기 때문에 로그아웃 api 요청을 보내주면 됩니다. facebook logout이 완료되면 express에 정의된 logout 라우터로 요청을 보내 제 서버에서도 로그아웃되게끔 합니다.

 

이때 window.FB.getLoginStatus를 하는 이유는 그냥 window.FB.logout을 할 경우 새로고침 하면 accessToken을 못 찾더라고요.

 

이제 facebook 로그인 관련 함수들을 정의했으니 이를 vue 파일에서 사용해보겠습니다. 해당 함수들을 묶어 Facebook이라는 객체로 export 하겠습니다. 

 

먼저 window.FB가 이미 있는지 확인하고 없으면 Init함수를 실행합니다. 

그다음 버튼을 만들어 함수를 연결시키고

 

함수를 정의합니다. 

 

localStorage에 JWT_token이 있으면 로그인되어 있다고 간주하고 경고 메시지를 띄웁니다. 

 

facebook은 완료입니다.!

 

아직 고칠 부분도 많고 완벽하진 않지만 일단 facebook 로그인 화면이 뜨고 동의 화면이 뜬 뒤 로그인이 잘 되는 것을 보실 수 있을 겁니다. 

이것들을 바탕으로 여러분들의 로그인 관련 로직들을 결합하시면 될 거 같습니다.

 

2) 구글 로그인

구글 로그인도 페이스북과 마찬가지로 구글 개발자 사이트에 들어가 앱 등록을 해야 합니다.

 

앱 등록을 완료했다고 간주하고 진행하겠습니다. 

 

구글 로그인은 vue-google-login이 잘 되어있어서 그냥 쓰기로 했습니다.

 

$npm i vue-google-login을 통해 해당 모듈을 깔아줍니다.

 

props로 넘겨주는 params에는 여러분들이 구글 개발자 사이트에 등록했을 때 받은 client_id를 넣어줍니다.

 

그런 다음 로그인 성공 또는 실패했을 때 실행할 함수를 props 넘겨주는데 이 함수들을 정의해줍니다. 

 

실질적인 실행 로직은 페이스북과 마찬가지로 Goolge.js 파일에 관리합니다.

 

 

 3) 카카오 

 

카카오도 개발자 사이트에 들어가 앱을 등록합니다. 이때 로그인 동의 항목과 redirect url을 잘 설정해줍니다.

 

먼저 https://developers.kakao.com/docs/js/kakaologin에서 커스텀 로그인 버튼을 이용한 로그인에 있는 코드를 복사합니다.

 

이제 vue에 맞게끔 고치겠습니다.

 

Kakao.js에 카카오 로그인 관련 로직들을 넣습니다.

 

페이스북과 마찬가지로 window 객체에 Kakao를 정의하고 사용합니다. 

 

템플릿에 버튼을 만들어 함수를 연결시키고

 

해당 함수는 Kakao.js에 정의된 함수를 실행시킵니다. 

 

지금까지 vue에서 소셜 로그인을 하는 방법에 대해 알아보았습니다.

 

제가 한 방식이 정석은 아니나 vue에서 소셜 로그인을 하는 자료가 너무 없어서 한번 써보았습니다. 

 

문제가 있거나 안되면 댓글로 알려주세요.

 

감사합니다.