멋쟁이사자처럼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)

소셜로그인의구현원리!