sns 로그인 (이어서)

자 이제 어플리케이션 설정이 끝났으니 설계를 먼저 해야겠지요?

 

정보를 담을 DB 설계를 하도록 합시다. 필자의 경우에는 mysql을 사용하였습니다.

앞에 테이블은 서비스 자체의 회원가입을 담는 테이블이고 뒤에는 sns 테이블입니다.

sns 에서 이메일은 겹칠 수 있는 구조이기 때문에 분리 시키는게 맞다고 생각했지만 더 좋은 구조가 있다면 알려주세요.

(사실 귀차니즘이...)

 

또롱 하고 대충 템플릿으로 로그인과 회원가입창을 구현해보았고 각 sns 버튼을 클릭하여 로그인 하는 구조로 해봤습니다.

우리가 하려는건 sns 로그인이지만 기존 로그인도 되면 좋겟죠? 기존 로그인도 구현하였습니다.

MVC 구조 대로 컨트롤러->서비스 추상 -> 서비스 구현 -> 매퍼 -> xml 구조작성했습니다.

 

여기서는 서비스 로그인코드는 올리지 않겠습니다 글이 길어지기에...

 자 이제 대망의 sns 로그인을 시작합시다.

 

시작하기 전에 알아야될 구조를 봅시다.

 

위에는 네이버로 되어있지만 상관없습니다.

자 클라이언트 (Vue)에서 네이버에 회원정보에 접근할 권환 즉 엑세스 토큰을 요청을 해야됩니다.

엑세스토큰이랑 그냥 집 자물쇠? 같은거라 생각하셔도 될거같습니다. 도어락 쓰신다고요? 알빠노? ㅈㅅ

 

거두절미하고 카카오(네이버)에 엑세스 토큰을 요청을하여 받아와야겟죠?

근데 집 열쇠를 내놔라고 해서 그냥 주진않고 인증 후 인가를 받는 형태로 되어있습니다.

먼저 카카오 인증 서버에서 id와 pw 를 입력하면 인증 코드를 주고 인가를 받을 수 있는데,

우리는 카카오 버튼을 눌렀을 때 로그인 창으로 이동하게 해주면 깔끔하겟죠?

GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1

문서에 이래되있습니다.

저렇게 로그인을 진행하면

이렇게 동의화면이 뜨는데 이때 동의화면의 정보는 설정한것만 뜹니다.

저기서 클라이언트 아이디와 리다이렉트 주소 리스폰스 타입 코드 가 보이시죠?

저 3가지를 이용하여 엑세스 토큰을 발급받아봅시다.

목숨이 아까우면 내놓거라하고 협박을 아니 요청을 합니다.

문서에 보면 저래담아서 돌래요 어쨌든 response로 받아옵니다 토큰키를 이제 이 토큰키로 집 문을 열 수 있습니다.

와아아아 짝짝짝 

이제 문을 열고 필요한 정보를 담아오시면 되는데 그건 다음 글에 서 하도록할게 용가리 수구바위!