Resource server & Resource Owner & Client
-
Resource server : 구글과 같이 서버를 제공해주는 회사들을 말하는 것, 이쪽에서 access token을 넘겨주는데 Resource Owner가 Resource server에 있는 기능중 일부만을 자신들(Resource Server)에 있는 기능 중 일부만을 Client에게 허락하는 용도로 사용된다(access token이 비밀번호 처럼 사용 되는 것)
-
Resource Owner : 서비스를 제공하는 주체라고 보면된다(Ex- KaKao Login을 사용하는 웹 커머스 사이트)
-
Client: Resource Owner의 서비스에 접근해 사용하는 user를 뜻함
(AccessToken을 받아 Resource Server에 Client의 고유 아이디를 요청하게 됨)
Resource Owner가 직접 개입하지 않고도 ResourceServer와 Client사이의 Access Token을 통한 정보 확인을 통해 인증의 목적까지도 수행할 수 있다.
이런 과정을 oauth라고 한다고 한다 🧐
Resource server 등록
Resource Server는 Client의 id와 secret, redirectURL을 요구한다.
- google console api에 들어가 프로젝트를 등록하자( 내 서비스가 됨)
-
사용자 인증 정보(credentials)탭에 들어가자
-
OAuth 클라이언트 아이디 만들기
나는 vue.js 를 run 할때 발생하는 localhost 8080번을 이용했다.
나중에 변경해야할듯
-클라이언트 ID(노출 괜찮음)와 보안 비밀번호는 중요하니 절대 까먹지 말자 :)
CORS: 교차 출처 리소스 공유 (CORS)
구글 로그인을 진행하다 CORS policy로 인해 백엔드 API와 통신을 하지 못한 일이 발생하여 찾다가 알게 된 것이다.
기본적으로 내가 구글에서 받는 API 주소랑 백엔드로 요청하는 주소가 달라서 생긴일인데 보통은 백엔드에서 테스트를 위해 위험하더라도 CORS관련 설정을 모든 주소에서 다 받을 수 있도록 만들어 놓아서 이때까지는 문제가 없었다.
아래는 관련 링크이니 나중의 나를 위해 적어놔야겠다 :) ..
참고: CORS MDN
vue-google-login
아래는 내가 사용한 googleLogin library의 template 태그 내의 작성본이다.
기본적으로 onSuccess와 onFailure함수를 지원해준다
그리고 google에서 기본적으로 제공해주는 버튼 모양이 아닌 직접 custom된 모양으로 사용할 수 있다는 장점이 존재한다 :)
아래처럼 호버기능을 넣은 귀염뽀짝한 모습으로 커스텀해보았다 :)
아래는 onSuccss 함수인데 해당 함수에서 로그인 백엔드 API를 받아 토큰을 vue-x의 store에 저장한다
그 토큰을 백엔드로 보내 회원가입이 되어 있는 상태인지 아닌지를 판단한다
그리고 회원이면 회원가입이 완료되며 홈으로 넘어가고,
비회원일때의 에러메시지는 401이므로 그 신호를 받을때는 회원가입페이지로 넘어간다 :)
회원가입 페이지로 넘어간 뒤에는 아이디 정보를 입력한 것을 store에 저장하고 다시 백엔드로 새로운 가입정보를 넘기기 위해 id와 휴대폰번호 그리고 처음에 저장해두었던 구글토큰을 넘겨준다.
아래의 코드에서 처럼 백에서 200응답을 받으면 우리 서버에서 발행하는(구글이 아닌)토큰을 로컬스토리지에 저장하고 새로고침을 해도 계속 회원인 것을 판단하며 구매 플로우를 진행하게 해준다.
그리고 진행이 완료되고 최종완성 페이지로 넘어가게 된다 :)
