회원가입을 만들면 사람들이 귀찮아 한다.
이전에는 회원가입을 일일히 만들어서 서버에 사용자 계정을 만들도록 하고, 사용자가 접속할때 아이디와 비밀번호를 사용하는 방식이 많았다.
하지만 이런 방식은 사용자가 각각의 사이트에 일일이 회원가입을 하게 만드는 귀찮음을 낳았고, 사용자는 각각의 사이트에 대한 아이디 비밀번호를 기억해야만 했다.
그래서 많은 사람들이 이미 갖고있는 소셜계정으로 편하게 회원가입과 로그인을 하게 만들어주는 방식이 없을까 고민하게 되었고, 이것을 위한 일반적인 방법이 OAuth라는 표준 인증 프로토콜이다.
다른 회사 계정으로 우리 사이트에 로그인을?
다른 설명을 보면 서버, 클라이언트라는 단어를 막 사용해서 누가 누구의 서버이고 클라이언트인지 구분하기 힘들다.
그래서 직관적으로 프론트엔드, 백엔드, 소셜인증서버 3개로 용어를 통일하고 설명하고자 한다.
프론트엔드, 백엔드, 소셜인증서버로 나눠놓고 생각한 OAuth의 일반적인 진행 방법은 다음과 같다.
- 사용자가 프론트엔드에서 소셜로그인 버튼을 누르면 해당 소셜 로그인을 할 수 있는 페이지로 이동 시킨다. 이 페이지에 대한 주소는 소셜의 개발자 센터에서 미리 만들 수 있다.
- 사용자가 이동된 화면에서 로그인을 하면, 소셜인증서버는 로그인이 제대로 됐다면서 우리쪽 프론트엔드로 리다이렉트시키면서 소셜인증서버용 access token을 역으로 보내준다. 그런데 그러려면 소셜인증서버가 우리쪽 프론트엔드 url 주소를 알아야 하니까 소셜 개발자 센터에 우리쪽 프론트엔드가 access token을 처리 할 수 있는 redirect url을 적어두어야 한다.
- 프론트엔드는 소셜인증서버가 보내준 소셜인증서버용 access token을 백엔드로 보낸다.
- 백엔드는 프론트엔드한테 소셜인증서버용 access token을 받아서 소셜사이트에 이게 맞냐고 다시 물어본다. 맞다면 해당 유저의 정보를 소셜인증서버에서 얻을 수 있다.
- 백엔드는 클라이언트한테 로그인이 제대로 된 것 같다면서 백엔드에 접속할 수 있는 백엔드용 access token을 준다.
- 클라이언트는 이 백엔드용 access token으로 백엔드와 api 통신을 한다.
소셜인증서버는 사용자정보를 얻어내는 서버일 뿐이다.
즉, 쉽게 생각하면 사용자가 소셜로 먼저 로그인을 하도록 하고, 소셜에서 얻어낸 토큰으로 백엔드가 유저정보를 얻어낸 후에야 프론트엔드에게 백엔드 토큰을 주는 것이다.
Frontend Developer