Post on 23-Jan-2018
멋쟁이사자처럼2학기
API 서버를통한로그인구현(쿠키/세션/토큰)
서강대멋사박정현
프론트엔드
백엔드
요청 응답
로그인기능구현기억나세요?
프론트엔드
백엔드
알아서해주니까
어떻게되는건지모름..
레일즈가아니면로그인기능을만들수없다
로그인의원리에대해배워서일반적인(보편적인) 방식으로
구현해보자!
인터넷의간단한원리
인터넷의간단한원리
www.google.com
인터넷의간단한원리
www.google.com
HTTP 통신
인터넷의간단한원리
www.google.com
HTTP 통신
HTTP 통신특징
Stateless
Stateless무상태
즉, 매번의요청/응답이독립적이다
인터넷의간단한원리www.google.com
1
2
3
3
인터넷의간단한원리www.google.com
1
2
3
3
이번에통신을하는애가방금전에통신을했던애인지몰라!
이전통신과이후통신이연결된상태가아니다
즉, 원칙적으로는‘로그인’이라는게불가능하다
구글로그인페이지
Gmail.com
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
Gmail.com
구글로그인페이지
StatelessVS
Stateful
Stateful
FTP 통신
한번만연결하면계속파일을주고받을수있음
Stateless 이지만통신을구별할수있는법..?
쿠키 / 세션 / 토큰
첫번째방법
쿠키
유저의웹브라우저에정보를저장해서버에요청을보낼때
헤더에정보를담아서보내는방식
쿠키
Header
Body
HTTP 통신구조
2단도시락
Header
Body
HTTP 통신구조
2단도시락
구글로그인페이지
Gmail.com
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
아이디패스워드정보가담긴쿠키를브라우저에 저장
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
Gmail.com
아이디패스워드정보가담긴쿠키를 HTTP 헤더에담아서전송
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
Gmail.com
내메일함
실습
https://github.com/Rocket-Hyun/__RailsAPI__RailsLogin
레포지토리클론후Cookies 컨트롤러수정해서로그인기능완성시켜보기
회원가입URL: /signup로그인URL: /signin
bundle install 과 rake db migrate 필수!
쿠키세팅방법
cookies[:key값] = 해당값
결과시나리오
/signup 에서회원가입후
/signin에서로그인하면
/mypage_cookie 으로이동하고
/mypage_cookie2 까지들어간후로그아웃까지할수있는웹사이트
쿠키브라우저에그대로노출되어저장되므로
털리기쉽다
중요한정보는절대넣으면안된다!!!쇼핑몰둘러봤던물품등정보만저장
두번째방법
세션쿠키의응용!
기본적으로쿠키를통해통신을구분하지만,
중요한정보는서버에저장하는방식
세션
구글로그인페이지
Gmail.com
구글로그인페이지
Gmail.com
아이디패스워드입력
서버프로그램 ‘메모리’에세션변수로유저정보저장
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
고유한세션ID가 담긴쿠키를브라우저에 저장
서버프로그램 ‘메모리’에세션변수로유저정보저장
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
Gmail.com
고유한세션ID가 담긴쿠키가자동으로 HTTP 헤더에담겨서전송
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
Gmail.com고유한세션ID를 통해서세션을찾아유저식별
구글로그인페이지
Gmail.com
아이디패스워드입력
로그인확인페이지
Gmail.com
내메일함
고유한세션ID를 통해서세션을찾아유저식별
실습
Sessions 컨트롤러수정해서로그인기능완성시켜보기
주의!signin.html 부분코드수정해야함!
주의!signin.html
할일 1
세션세팅방법
session[:key값] = 해당값
할일 2
결과시나리오
/signup 에서회원가입후
/signin에서로그인하면
/mypage_session 으로이동하고
/mypage_session2 까지들어간후로그아웃까지할수있는웹사이트
*HTTP only 쿠키 (세션용쿠키)
클라이언트에서임의로 ‘조작불가’즉, 탈취당할확률도적고안전함
브라우저를종료하거나서버측에서삭제를해야함
/mypage2_session.html Sessions 컨트롤러
세션은좋은방법!하지만…
1. 모바일의등장
모바일앱은일반적인웹작동방식과다르다세션이적합하지않다.
인터넷의간단한원리
www.google.com브라우저에서띄울HTML 파일을줘!
.html 모든동작마다 통신을해야함즉, 세션이적합하다
일반서버
모바일앱의간단한원리
모바일클라이언트 API 서버
화면은앱자체에다있으니까필요한정보만줘!
여기너가요청한정보!(주로 JSON)
정보가필요할때만 통신통신에상태를유지하는세션은부적합
2. 대규모서비스들의등장
로드밸런싱
서버프로그램이처리하는세션은로드밸런싱에부적합!
세번째방법
토큰
모바일클라이언트 API 서버
Login화면
*모바일어플리케이션작동방법
유저정보획득을위해아이디패스워드정보전송
유저정보획득을위해아이디패스워드정보전송
모바일클라이언트 API 서버
Login화면
*모바일어플리케이션작동방법
아이디패스워드검증후암호화된토큰생성
*만료기간설정
모바일클라이언트 API 서버
Login화면
*모바일어플리케이션작동방법
아이디패스워드검증후암호화된토큰생성
유저정보와토큰을반환
유저정보획득을위해아이디패스워드정보전송
*만료기간설정
모바일클라이언트 API 서버
Login화면
*모바일어플리케이션작동방법
아이디패스워드검증후암호화된토큰생성
유저정보와토큰을반환
토큰을로컬저장소에저장
유저정보획득을위해아이디패스워드정보전송
*만료기간설정
모바일클라이언트 API 서버
Login화면
*모바일어플리케이션작동방법
유저정보와토큰을반환
*헤더에토큰을함께전송유저의중요정보요청
유저정보획득을위해아이디패스워드정보전송
모바일클라이언트
Login화면
*모바일어플리케이션작동방법
유저정보와토큰을반환
유저정보획득을위해아이디패스워드정보전송
토큰유효성검증후유저중요정보반환
*헤더에토큰을함께전송유저의중요정보요청
모바일클라이언트
Login화면
*모바일어플리케이션작동방법
유저정보와토큰을반환
유저정보획득을위해아이디패스워드정보전송
토큰유효성검증후유저중요정보반환
*헤더에토큰을함께전송유저의중요정보요청
유저중요정보반환
대표적인토큰인증방식
JWT(Json Web Token)
소셜로그인의구현원리!